Vue實例初始化的選項配置對象詳解
1. Vue實例的的data對象
- 介紹
Vue的實例的數據對象data 我們已經用了很多了，數據綁定離不開data里面的數據。也是Vue的核心屬性。 它是Vue綁定數據到HTML標簽的數據源泉，另外Vue框架會自動監視data里面的數據變化，自動更新數據到HTML標簽上去。本質原理是：Vue會自動將data里面的數據進行遞歸抓換成getter和setter，然后就可以自動更新HTML標簽了，當然用getter和setter所以老的瀏覽器Vue支持的不夠好。
-
data對象的類型：
- 類型是Object或者Function。
- 如果是組件對象中，data必須是Function類型。【后面學了組件后就明白了，暫時對組件先放放。】
-
實例：
// 創建普通的Vue實例var vm = new Vue({
data: data
})
// 組件定義
// Vue.extend() 中 data 必須是函數
var Component = Vue.extend({
data: function () {
//這里必須是函數！！！
return { a: 1 }
}
})
2. Vue實例的computed
- 介紹
Vue的計算屬性（computed)的屬性會自動混入Vue的實例中。所有 getter 和 setter 的 this 上下文自動地綁定為 Vue 實例。這就很強大了，再計算屬性中定義的函數里面可以直接使用指向了vue實例的this，異常方便的啊。
- 類型
{ 鍵：函數} { [key: string]: Function | { get: Function, set: Function } } 當然，可以省略setter,如果省略了setter，那么值就可以是普通函數，但是必須有返回值。
- 官方的實例
var vm = new Vue({ data: { a: 1 }, computed: { // 僅讀取，值只須為函數 aDouble: function () { return this.a * 2 }, // 讀取和設置 aPlus: { get: function () { return this.a + 1 }, set: function (v) { this.a = v - 1 } } } }) vm.aPlus // -> 2 vm.aPlus = 3 vm.a // -> 2 vm.aDouble // -> 4
3. methods
-
類型: { [key: string]: Function }
-
詳細:
methods 將被混入到 Vue 實例中。可以直接通過 VM 實例訪問這些方法，或者在指令表達式中使用。方法中的 this 自動綁定為 Vue 實例。
注意，不應該使用箭頭函數來定義 method 函數 (例如 plus: () => this.a++)。理由是箭頭函數綁定了父級作用域的上下文，所以 this 將不會按照期望指向 Vue 實例，this.a 將是 undefined。
- 示例:
var vm = new Vue({
data: { a: 1 },
methods: {
plus: function () {
this.a++
}
}
})
vm.plus()
vm.a // 2
4. watch
- 類型
{ [key: string]: string | Function | Object }
- 詳細:
一個對象，鍵是需要觀察的表達式，值是對應回調函數。值也可以是方法名，或者包含選項的對象。Vue 實例將會在實例化時調用 $watch()，遍歷 watch 對象的每一個屬性。
- 示例:
var vm = new Vue({
data: {
a: 1,
b: 2,
c: 3
},
watch: {
// 監控a變量變化的時候，自動執行此函數
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 深度 watcher
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
}
}
})
vm.a = 2 // -> new: 2, old: 1
//注意，不應該使用箭頭函數來定義 watcher 函數 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭頭函數綁定了父級作用域的上下文，所以 this 將不會按照期望指向 Vue 實例，this.updateAutocomplete 將是 undefined。 參考綜合案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入門之數據監控</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ number }}</p>
<input type="button" name="btnGetNumber" value="增加" v-on:click="getNumber()">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
number: 1
},
methods: {
// 事件響應方法的邏輯代碼
getNumber: function (e) {
this.number += 1; // 不管是內聯方法調用，還是綁定事件處理器兩種方式執行事件響應方法的時候 this都是指向 app
}
},
watch: {
// 監控number的變化，並自動執行下面的函數
number: function (val, oldVal) {
console.log('val:' + val + ' - oldVal: ' + oldVal);
}
}
});
</script>
</body>
</html>
5. 設置el的詳解
- 類型
string | HTMLElement
限制： 只在由 new 創建的實例中遵守。
- 詳細：
提供一個在頁面上已存在的 DOM 元素作為 Vue 實例的掛載目標,也就是說Vue綁定數據到哪里去找。可以是CSS 選擇器，也可以是一個 HTMLElement實例。
在實例掛載之后(生命周期的內容后面會詳細講的奧)， 元素可以用 vm.$el 訪問。
如果這個選項在實例化時有作用，實例將立即進入編譯過程，否則，需要顯式調用 vm.$mount() 手動開啟編譯。
// 幾乎所有例子都用到這個，所以就不再贅述var app = new Vue({
el: '#app',
...
});
參考： http://www.cnblogs.com/fly_dragon/p/6220273.html