Vue的實例是Vue應用的一個根節點,所以理解實例很重要。下面這個例子展示了如何創建一個Vue實例并綁定到頁面上:
var vm = new Vue({
el: '#app',
data: {
message: 'Hello world'
}
});
這里創建了一個Vue實例并將它綁定到具有id“app”的DOM元素上。在這個例子中,data選項定義了消息“Hello world”,el選項告訴Vue實例在哪里渲染模板。
下面是Vue實例的目錄:
- 數據對象(Data): 數據對象定義了Vue實例的數據,包括它的屬性和方法。
- DOM元素(el): DOM元素可以是一個模板字符串或者一個已經存在的DOM元素,它指定了Vue將在哪里進行渲染。
- 模板(Template): 模板定義了Vue實例的HTML結構。
- 計算屬性(Computed): 給Vue實例添加計算屬性,這使得可以根據其他屬性計算出新的值。
- 監聽器(Watchers): Vue實例還可以“監聽”數據的變化,并在變化時執行相應的操作。
- 方法(Methods): Vue實例的方法可以被綁定到HTML元素上,提供了一個交互的方式。
- 生命周期(Lifecycle Hooks): 生命周期鉤子提供了一個在生命周期階段中執行代碼的方式。
除了Vue實例,Vue還有很多其他功能,包括指令、組件、插件等等。這些功能使得我們可以創建復雜的應用程序。