Every Vue application starts with a single Vue component instance as the application root. Any other Vue component created in the same application needs to be nested inside this root component.
每個 Vue 應用都以一個 Vue 組件實例作為應用的根開始。在同一個應用中創建的任何其他 Vue 組件都需要嵌套在這個根組件內部。
In Vue 2, Vue exposes a?Vue
?class (or JavaScript function) for you to create a Vue component instance based on a set of configuration options, using the following?syntax:
在 Vue 2 中,Vue 暴露了一個 Vue
類(或 JavaScript 函數),你可以基于一組配置選項使用以下語法創建一個 Vue 組件實例:
const App = {//component's options
}
const app = new Vue(App)
Vue
?receives a component, or the component’s configuration to be more precise. A component’s configuration is an?Object
?containing all the component’s initial configuration options. We call the structure of this argument?Options API, which is another of Vue’s core APIs.
Vue
接收一個組件,或者更準確地說,是接收一個組件的配置。組件的配置是一個 Object
,包含組件的所有初始配置選項。我們稱這個參數的結構為 Options API,這是 Vue 的另一個核心 API。
Beginning with Vue 3, you can no longer call?new Vue()
?directly. Instead, you create the application instance using the?createApp()
?method from the?vue
?package. This change in functionality enhances the isolation of each Vue instance created both on dependencies and shared components (if any) and the code readability:
從 Vue 3 開始,你不能再直接調用 new Vue()
。相反,你需要使用 vue
包中的 createApp()
方法來創建應用實例。這一功能的改變增強了每個 Vue 實例在依賴和共享組件(如果有)方面的隔離性,并提高了代碼的可讀性:
import { createApp } from 'vue'const App = {//component's options
}const app = createApp(App)
createApp()
?also accepts an?Object
?of the component’s configurations. Based on these configurations, Vue creates a Vue component instance as its application root?app
. Then you need to mount the root component?app
?to the desired HTML element using the?app.mount()
?method, as follows:
createApp()
同樣接受一個包含組件配置的 Object
。根據這些配置,Vue 會創建一個以應用根 app
為形式的 Vue 組件實例。然后,你需要使用 app.mount()
方法將根組件 app
掛載到指定的 HTML 元素上,如下所示:
app.mount('#app')
#app
?is the unique id selector for the application’s root element. The Vue engine queries for the element using this id, mounts the app instance to it, then renders the application in the browser.
#app
是應用程序根元素的唯一 id 選擇器。Vue 引擎使用這個 id 查找元素,將應用實例掛載到該元素上,然后在瀏覽器中渲染應用程序。