[http://jsrun.pro/bvfKp/edit](http://jsrun.pro/bvfKp/edit) ### 開始 Vue應用從使用Vue函數創建一個Vue實例開始。 ``` var vm = new Vue({ // 選項 }) ``` vm是ViewModel的縮寫， 關聯MVVM模型。 ### 數據 data 是選項之一。 data 的值是一個JSON對象。 當Vue實例被創建是，data對象中的所有屬性加入到Vue的響應式系統中， 當屬性值發生改變時，視圖將會產生“響應”。 ``` // 我們的數據對象 var data = { a: 1 } // 該對象被加入到一個 Vue 實例中 var vm = new Vue({ data: data }) // 獲得這個實例上的屬性 // 返回源數據中對應的字段 vm.a == data.a // => true // 設置屬性也會影響到原始數據 vm.a = 2 data.a // => 2 // ……反之亦然 data.a = 3 vm.a // => 3 ``` 需要注意： 數據改變，視圖重新渲染的前提是實例創建之前屬性就已經存在data中， 如果是實例之后新加的屬性則不會生效。比如： ``` vm.b = 'hi' ``` 所以， 如果是需要的屬性值，可以提前設置一個空值。 ### Object.freeze()， 阻止屬性修改，頁面響應不變化 ### 實例屬性與方法 ``` var data = { a: 1 } var vm = new Vue({ el: '#example', data: data }) ``` 1. 實例的$data屬性， vm.$data === data 2. 實例的$el屬性， vm.$el === document.getElementById('example') 3. $watch實例方法 ``` vm.$watch('a', function (newValue, oldValue) { // 這個回調將在 `vm.a` 改變后調用 }) ``` ### 實例生命周期鉤子 鉤子函數也稱作回調函數， 是框架在進行一些操作之后提供了一些切入點執行自定義的代碼。 #### created 鉤子函數， 在實例創建之后執行代碼 ``` new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 實例 console.log('a is: ' + this.a) } }) // => "a is: 1" ``` 函數種的this指向調用它的Vue實例。 **不要在選項函數或回調上使用箭頭函數，比如** ``` created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod()) ``` 原因是箭頭函數并沒有`this`，`this`會作為變量一直向上級詞法作用域查找，直至找到為止，經常導致： ``` `Uncaught TypeError: Cannot read property of undefined`或`Uncaught TypeError: this.myMethod is not a function`之類的錯誤。 ``` ### 生命周期圖示