vue基礎內容總結(四)

創建一個 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 實例還暴露了一些有用的實例屬性與方法,它們都有前綴 $ ,以便與用戶定義的屬性區分開來。例如:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章