最簡單的Vue 實例

//html
<div id="app">
 {{message}}
</div>

//javascript
var vm = new Vue({
 el: '#app',
 data: {
 message: 'Hello Vue!'
 }
})

由于 Vue 借鑒了 MVVM 的思想，這里的字符串 "Hello Vue!" 就相當(dāng)于 Model，DOM 就相當(dāng)于 View，Vue 實例 "vm" 則是起連接 Mode 和 View 作用的 ViewModel，因此我們才得以通過數(shù)據(jù)驅(qū)動視圖，而不需要關(guān)心它是怎么實現(xiàn)的，因為 Vue 已經(jīng)幫我們做好了一切。

Vue 實例內(nèi)置的屬性和方法都是以 "$" 開頭的，例如：vm.$data、vm.$el 等，另外選項并不等于實例，選項是通過 new Vue() 構(gòu)造函數(shù)時傳入的參數(shù)對象，但是實例可以從暴露的接口訪問某些選項的值，例如：console.log(vm.$data.message) 輸出 "Hello Vue!"。

實例的生命周期

在創(chuàng)建實例的過程中，Vue 提供了一些生命周期鉤子函數(shù)，允許我們再某一特定階段執(zhí)行一些額外的操作：

beforeCreate：

在實例初始化之后，數(shù)據(jù)綁定之前會調(diào)用這個函數(shù)，例如：

//javascript
var vm = new Vue({
 el: '#app',
 data: {
  message: 'Hello Vue!'
 },
 beforeCreate: function() {
  console.log(this.message); //undefind
 }
})

需要說明的有兩點：1、這里的 "this" 指向 Vue 實例，即 "vm"，2、Vue 實例同時也代理了選項中 "data" 下的所有屬性，也就是說 vm.message == vm.$data.message == "Hello Vue!"，但是因為在這個階段數(shù)據(jù)并沒有綁定到 Vun 實例上面，所以輸出 "undefind"。在這之前數(shù)據(jù)會先保存在 vm.$options 中，如果要在這個階段獲取數(shù)據(jù)，可以先通過 vm.$options.data() 方法，返回 "data" 對象，通過 vm.$options.data().message 返回對應(yīng)的值。
在這個階段可以做一些不需要數(shù)據(jù)的工作，比如說開啟全局 loading 效果。

created：

在實例創(chuàng)建完成，數(shù)據(jù)綁定之后會調(diào)用這個函數(shù)，此時 console.log(this.message) 輸出正確的值 "Hello Vue!"。
在這個階段，數(shù)據(jù)已經(jīng)初始化為選項中的默認(rèn)值，但是真實的數(shù)據(jù)還要通過 ajax 從后端數(shù)據(jù)庫獲取，因此這個階段可以向后端發(fā)請求獲取數(shù)據(jù)，然后綁定到對應(yīng)屬性上。

之后判斷選項中有無 "el" 屬性(作為 Vue 實例的掛載目標(biāo)，在這里就是 id 為 app 的 div 標(biāo)簽)，如果沒有，則需要手動調(diào)用 vm.$mount(el) 方法指定掛載的目標(biāo)；

接著判斷選項中有無 "template" 屬性，如果沒有，則直接使用 "el" 屬性指定的掛載目標(biāo)，如果有，那么就用 "template" 屬性指定的字符串模板替換掛載目標(biāo)，掛載目標(biāo)中的所有內(nèi)容將被忽略；

beforeMount：

在實例掛載之前調(diào)用。

在這個階段可以移除全局 loading 效果。

mounted：

在實例掛載之后調(diào)用。

在這個階段頁面已經(jīng)加載完畢，可以對 DOM 進(jìn)行操作。

beforeUpdate：

在數(shù)據(jù)更新時調(diào)用。

在這個階段可以在數(shù)據(jù)更新前訪問現(xiàn)有的 DOM。

updated：

在數(shù)據(jù)更新之后調(diào)用。

在這個階段可以對更新后的 DOM 進(jìn)行操作。

最新評論