創建一個 Vue 實例
每個 Vue 應用都是通過用 Vue 函數創建一個新的 Vue實例開始的:
var vm = new Vue({
// 選項
});
雖然沒有完全遵循 MVVM 模型,但是 Vue 的設計也受到它的啓發。當創建一個 Vue 實例時,可以傳入一個選項對象。
一個 Vue 應用由一個通過 new Vue 創建的根Vue實例,以及可選的嵌套的、可複用的組件樹組成。舉個例子,一個todo應用的組件樹可以是這樣的:
根實例
└─ TodoList
├─ TodoItem
│ ├─ DeleteTodoButton
│ └─ EditTodoButton
└─ TodoListFooter
├─ ClearTodosButton
└─ TodoListStatistics
我們現在只要明白,所有的 Vue 組件都是 Vue 實例,並且接受相同的選項對象(一些根實例特有的選項除外)。
數據與方法
當一個 Vue 實例被創建時,它將 data 對象中的所有的屬性加入到 Vue 的響應式系統中,
當這些屬性的值發生改變時,視圖將會產生“響應”,即匹配更新新的值。
如上圖,當這些數據改變時,視圖會進行重新渲染。值得注意的是,只有當實例被創建時就已經存在於 data中的屬性纔是響應式的。也就是說如果你添加一個新的屬性,比如:
vm.b = 'hi'
那麼對 b 的改動將不會觸發任何視圖的更新。如果你知道你會在晚些時候需要一個屬性,那麼一開始它爲空或不存在,那麼你僅需要設置一些初始值。比如:
data: {
newToDo: '',
visitCont: 0,
}
這裏唯一例外的是使用 Object.feeze(),這會阻止修改現有的屬性,也意味着響應式系統無法在追蹤變化。
除了數據屬性,Vue 實例還暴露了一些有用的實例屬性與方法,它們都有前綴 $ ,以便與用戶定義的屬性區分開來。例如: