關于如何學習Vue，Vue的締造者尤雨溪前輩曾經在知乎發表過一篇新手向：Vue 2.0 的建議學習順序。
筆者推薦使用Vscode進行Vue項目開發，相比Webstorm，Vscode界面簡單，運行時占用體積小。
篇幅二
篇幅三
篇幅四
1. 計算屬性和觀察者
- 計算屬性：
computed
Vue推薦任何復雜的數據邏輯，都應當使用計算屬性。
原因如下：
計算屬性是基于它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時才會重新求值。 - 觀察者：
watch
Vue 通過 watch 選項提供一個更通用的方法，來響應數據的變化。當你想要在數據變化響應時，執行異步操作或開銷較大的操作，這是很有用的。
2. Class和style綁定(:class 和 :style)
- 綁定內聯樣式時，屬性名需要使用駝峰值，并且單位需要使用單引號，例如：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
個人覺得沒有直接寫內聯樣式方便，可能是還不習慣，但是綁定內聯樣式時，Vue會為屬性自動添加前綴！！！
所以Vue推薦直接綁定一個樣式對象通常更好，讓模板更清晰。綁定Class也一樣。
3. 條件渲染
- v-if、v-else、v-else-if
v-else，v-else-if必須緊跟在v-if或者v-else-if元素之后。
Vue 會盡可能高效地渲染元素，通常會復用。
當你不想復用元素時，只需添加一個具有唯一值的 key 屬性即可已有元素而不是從頭開始渲染。如：
<input placeholder="Enter your email address" key="email-input"> - v-if vs v-show
v-if是“真正的”條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。v-if也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。
相比之下，
v-show就簡單得多——不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進行切換。
一般來說，v-if有更高的切換開銷，而v-show有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用v-show較好；如果在運行時條件不太可能改變，則使用v-if較好。
4. 列表渲染
-
v-for
v-for遍歷數組時，接受兩個參數
<li v-for="(item, index) in items" :key="item.id">
v-for遍歷對象時，接受三個參數
<li v-for="(value, key ,index) in objects :key="item.id""
注：使用v-for時，你需要為每項提供一個唯一key屬性。
理想的 （盡可能的使用v-for提供id）key 值是每項都有的且唯一的 id(如上面)。key并不與v-for特別關聯，key還具有其他用途。 - 數組檢測跟新
Vue 包含一組觀察數組的變異方法，所以它們也將會觸發視圖更新。這些方法如下：
push(),pop(),shift(),unshift(),splice(),sort()和reverse()
相比之下，也有非變異方法，例如：filter(),concat()和slice()。
注意：
由于 JavaScript 的限制，Vue 不能檢測以下變動的數組：
當你利用索引直接設置一個項時，例如：
vm.items[indexOfItem] = newValue
當你修改數組的長度時，例如：vm.items.length = newLength
為了解決第一類問題，以下兩種方式都可以實現和vm.items[indexOfItem] = newValue相同的效果，同時也將觸發狀態更新：
// Vue.set Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice example1.items.splice(indexOfItem, 1, newValue)
為了解決第二類問題，你可以使用splice()：
example1.items.splice(newLength) - 對象更改檢測注意事項
還是由于 JavaScript 的限制，Vue 不能檢測對象屬性的添加或刪除：
var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 現在是響應式的
vm.b = 2
// `vm.b` 不是響應式的
對于已經創建的實例，Vue 不能動態添加根級別的響應式屬性。但是，可以使用 Vue.set(object, key, value)方法向嵌套對象添加響應式屬性。例如，對于：
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})
你可以添加一個新的 age屬性到嵌套的 userProfile 對象：
Vue.set(vm.userProfile, 'age', 27)
你還可以使用 vm.$set實例方法，它只是全局Vue.set的別名：this.$set(this.userProfile, 'age', 27)
有時你可能需要為已有對象賦予多個新屬性，比如用 Object.assign()
或_.extend()。在這種情況下，你應該用兩個對象的屬性創建一個新的對象。所以，如果你想添加新的響應式屬性，不要像這樣：
Object.assign(this.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
你應該這樣做：
this.userProfile = Object.assign({}, this.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
