溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Vue3入口文件createApp函數(shù)怎么使用

發(fā)布時間:2023-04-18 10:44:21 來源:億速云 閱讀:141 作者:iii 欄目:開發(fā)技術

今天小編給大家分享一下Vue3入口文件createApp函數(shù)怎么使用的相關知識點,內容詳細,邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。

2.x中,main.js是vue項目的入口文件,引入構造函數(shù)Vue,然后new Vue傳入配置項生成vm實例,如下:

import Vue from "vue"
import App from "./App.vue"
import router from "./router"
import store from "./store"

new Vue({
    router,
    store,
    render: h => h(App) 
}).$mount("#app")

Vue3 中,通過使用 createApp 函數(shù)來創(chuàng)建應用,使用vue庫的createApp方法傳入基組件生成vm,然后再調用vmmount方法傳入選擇器將實例掛載在dom節(jié)點上。

語法:

const app = Vue.createApp({ /* 選項 */ })

傳遞給createApp的選項用于配置跟組件,也就是入口文件。

// 先導入createApp模塊
import { createApp } from 'vue';
import App from './App.vue';

// createApp 創(chuàng)建一個APP實例,將入口文件放進去,參數(shù)是根組件(HelloVueApp),在使用 mount() 掛載應用時,該組件是渲染的起點。
createApp(App).mount('#app');

實例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 練習</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app" class="demo">
  {{ message }}
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello,this is Vue3!'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

運行結果:

Vue3入口文件createApp函數(shù)怎么使用

以上代碼實現(xiàn)了: mount('#app')Vue 應用 HelloVueApp 掛載到 <div id="app"></div>DOM元素中。

以上就是“Vue3入口文件createApp函數(shù)怎么使用”這篇文章的所有內容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學習更多的知識,請關注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI