1. 計算屬性
在我看來，計算屬性是vue的一大特色，它極大的簡化了開發邏輯，極大地提升了開發效率。或許不用計算屬性，也完全可用寫vue，不影響開發頁面，但我們更該去嘗試一些更先進更便捷的東西不是嗎?
基礎案例:
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
})
reversedMessage的值始終跟隨message的值得變化而發生變化，不需要再做其他的處理就能達到這個效果，非常便捷。
計算屬性 VS methods
用methods明顯也能達到同樣的效果，不過，大家明顯能感覺到，這么一個數據處理，用methods似乎。。對，大材小用的一種感覺，簡簡單單的用一個計算屬性computed，輕松搞定!
另外，還有計算緩存的問題，這里不細說，只需知道這個概念，在實際用的時候自然能夠在兩者之間取舍。
計算屬性 VS Watched Property
直接放官方代碼對比看效果
用watch的代碼:
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
用computed的代碼:
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
有感受到computed討人喜愛的地方了嗎，反正我是感受到了。
setter
感覺setter是個略為高級點的用法，目前我也還沒想到它的實際應用場景，因此只放代碼實例:
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
watch
百度搜索大家都用過，每輸一個字就會彈出相應的建議選項，這就是和watch大概相似的原理，時刻監聽頁面上的數據變化，只要它一變化，就出發一個函數事件，這類的事件一般是異步請求的居多，用來提升用戶體驗，也算是現在很常用的技術了，用法并不復雜，小伙伴們一試便知。
2. 列表渲染
有的小伙伴可能發現，我的筆記并沒有按照官方文檔的順序一路寫下來。那是因為，這是我的筆記，而不是教程，所以記下來的更多的是自己覺得比較需要注意或者是自己有些想法的地方。
照搬官方文檔的話，我的這些筆記意義也就并不大了。
遍歷對象 v-for
vue的v-for不光能夠遍歷數組，也能夠直接遍歷對象，基本語法是:
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</div>
范圍遍歷 v-for
v-for 也可以直接遍歷一個整數，特別方便，如下:
<div>
<span v-for="n in 10">{{ n }}</span>
</div>
得出結果是:
1 2 3 4 5 6 7 8 9 10
數組更新檢測
vue 包含了一組觀察數組的變異方法，它的可以觸發視圖更新:
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
注意
下面兩張情況不會觸發視圖的更新:
- 當直接設置數組里的一項值時，如 vm.items[indexOfItem] = newValue
- 當修改數組長度時，如
vm.items.length = newLength
我就曾經在項目中遇到這種情況，官方也提供了解決辦法，第1種情況:
// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
或者
// Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue)
第2種情況:
example1.items.splice(newLength)
其實解決方法遠遠不局限于這兩種，真正遇到只要能避開直接出現上述的兩種情況就可以解決。
事件處理器
事件修飾符
在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。雖然我們當然可以自己在methods中手寫這些，但vue給我們提供更好更方便的方法，那就是事件修飾符，具體做法是在指令的后綴后面加上 . 和阻止事件，有以下阻止事件:
- .stop
- .prevent
- .capture
- .self
- .once
下面是一些事例:
<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件偵聽器時使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當事件在該元素本身（而不是子元素）觸發時觸發回調 -->
<div v-on:click.self="doThat">...</div>
按鍵修飾符
按鍵事件的綁定也跟上述的事件相似，直接上例子:
<!-- 只有在 keyCode 是 13 時調用 vm.submit() -->
<input v-on:keyup.13="submit">
vue為一些常用的按鍵提供了別名，這樣就不用每次都要去找keyCode了，樣子如下:
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 縮寫語法 -->
<input @keyup.enter="submit">
全部的按鍵別名:
- .enter
- .tab
- .delete
- .esc
- .space
- .up
- .down
- .left
- .right
還可以自定義按鍵別名哦，是不是很貼心，自定義別名方法如下:
// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112
為什么在HTML中監聽事件
這個可能并不能使我們更加熟練的使用vue，但能讓我們去了解vue的內層設計思想，從中得到一些啟發。
可以看到，vue的思想就是讓我們只需要去單純的處理數據運算就可以了，至于DOM上的所有事情，我們都無須擔心，它都提供了最便捷的方法和最完善的善后工作，這種視圖層和數據層完全的分離，無論是對于當時的開發者，還是后面的維護者來說，都是極好的(在這里，我們先暫且不討論討論性能，畢竟可能對于前端初學者，更關注的還是便捷性和易用性)。
再貼上官方的一段話。使用 v-on 有幾個好處：
- 掃一眼 HTML 模板便能輕松定位在 JavaScript 代碼里對應的方法。
- 因為你無須在 JavaScript 里手動綁定事件，你的 ViewModel 代碼可以是非常純粹的邏輯，和 DOM 完全解耦，更易于測試。
- 當一個 ViewModel 被銷毀時，所有的事件處理器都會自動被刪除。你無須擔心如何自己清理它們。
總結得太好了!
3.表單控件綁定
多個復選框綁定到同一個數組
直接先給例子:
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
new Vue({
el: '...',
data: {
checkedNames: []
}
})
頁面的效果如下:
你會發現，根本不需要再做任何其他的操作，只要在頁面上綁定好，vue自動幫我們把所有的復選框的value值push進了v-model指定的數組，厲害吧!
總結
小伙伴們，相信經過今天的這篇文章，你已經對什么是只關注視圖層的處理這個概念有更深的理解了吧，同時，應該也被vue提供的便捷操作所折服。
在我看來，了解一個框架的核心思想和它的特色是遠遠比學會使用它要重要的多。一件工具，把它簡簡單單的當成工具，那么你也許可以把它用的很好，但你卻永遠受制于人。如果把它看成一種設計，一種思想的聚合體，并嘗試去學習，去模仿，那么你將會跳出你的邊界，看到一片全新的天地。
