- 計(jì)算屬性
在我看來，計(jì)算屬性是vue的一大特色，它極大的簡(jiǎn)化了開發(fā)邏輯，極大地提升了開發(fā)效率?；蛟S不用計(jì)算屬性，也完全可用寫vue，不影響開發(fā)頁面，但我們更該去嘗試一些更先進(jìn)更便捷的東西不是嗎?基礎(chǔ)案例:
<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的值得變化而發(fā)生變化，不需要再做其他的處理就能達(dá)到這個(gè)效果，非常便捷。
計(jì)算屬性 VS methods
用methods明顯也能達(dá)到同樣的效果，不過，大家明顯能感覺到，這么一個(gè)數(shù)據(jù)處理，用methods似乎。。對(duì)，大材小用的一種感覺，簡(jiǎn)簡(jiǎn)單單的用一個(gè)計(jì)算屬性computed，輕松搞定!另外，還有計(jì)算緩存的問題，這里不細(xì)說，只需知道這個(gè)概念，在實(shí)際用的時(shí)候自然能夠在兩者之間取舍。
計(jì)算屬性 VS Watched Property
直接放官方代碼對(duì)比看效果用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是個(gè)略為高級(jí)點(diǎn)的用法，目前我也還沒想到它的實(shí)際應(yīng)用場(chǎng)景，因此只放代碼實(shí)例:
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
百度搜索大家都用過，每輸一個(gè)字就會(huì)彈出相應(yīng)的建議選項(xiàng)，這就是和watch大概相似的原理，時(shí)刻監(jiān)聽頁面上的數(shù)據(jù)變化，只要它一變化，就出發(fā)一個(gè)函數(shù)事件，這類的事件一般是異步請(qǐng)求的居多，用來提升用戶體驗(yàn)，也算是現(xiàn)在很常用的技術(shù)了，用法并不復(fù)雜，小伙伴們一試便知。
- 列表渲染
有的小伙伴可能發(fā)現(xiàn)，我的筆記并沒有按照官方文檔的順序一路寫下來。那是因?yàn)?，這是我的筆記，而不是教程，所以記下來的更多的是自己覺得比較需要注意或者是自己有些想法的地方。照搬官方文檔的話，我的這些筆記意義也就并不大了。
遍歷對(duì)象 v-for
vue的v-for不光能夠遍歷數(shù)組，也能夠直接遍歷對(duì)象，基本語法是:
<div v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }}</div>
范圍遍歷 v-for
v-for 也可以直接遍歷一個(gè)整數(shù)，特別方便，如下:
<div> <span v-for="n in 10">{{ n }}</span></div>
得出結(jié)果是:
1 2 3 4 5 6 7 8 9 10
數(shù)組更新檢測(cè)
vue 包含了一組觀察數(shù)組的變異方法，它的可以觸發(fā)視圖更新:
· push()
· pop()
· shift()
· unshift()
· splice()
· sort()
· reverse()
注意下面兩張情況不會(huì)觸發(fā)視圖的更新:
當(dāng)直接設(shè)置數(shù)組里的一項(xiàng)值時(shí)，如
vm.items[indexOfItem] = newValue
當(dāng)修改數(shù)組長(zhǎng)度時(shí)，如
vm.items.length = newLength
我就曾經(jīng)在項(xiàng)目中遇到這種情況，官方也提供了解決辦法，第1種情況:
// Vue.setVue.set(example1.items, indexOfItem, newValue)
或者
// Array.prototype.splice`example1.items.splice(indexOfItem, 1, newValue)
第2種情況:
example1.items.splice(newLength)
其實(shí)解決方法遠(yuǎn)遠(yuǎn)不局限于這兩種，真正遇到只要能避開直接出現(xiàn)上述的兩種情況就可以解決。
事件處理器
事件修飾符
在事件處理程序中調(diào)用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。雖然我們當(dāng)然可以自己在methods中手寫這些，但vue給我們提供更好更方便的方法，那就是事件修飾符，具體做法是在指令的后綴后面加上 . 和阻止事件，有以下阻止事件:
.stop
.prevent
.capture
.self
.once下面是一些事例:
<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件偵聽器時(shí)使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當(dāng)事件在該元素本身（而不是子元素）觸發(fā)時(shí)觸發(fā)回調(diào) -->
<div v-on:click.self="doThat">...</div>
按鍵修飾符
按鍵事件的綁定也跟上述的事件相似，直接上例子:
<!-- 只有在 keyCode 是 13 時(shí)調(diào)用 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.f1Vue.config.keyCodes.f1 = 112
為什么在HTML中監(jiān)聽事件
這個(gè)可能并不能使我們更加熟練的使用vue，但能讓我們?nèi)チ私鈜ue的內(nèi)層設(shè)計(jì)思想，從中得到一些啟發(fā)?？梢钥吹剑瑅ue的思想就是讓我們只需要去單純的處理數(shù)據(jù)運(yùn)算就可以了，至于DOM上的所有事情，我們都無須擔(dān)心，它都提供了最便捷的方法和最完善的善后工作，這種視圖層和數(shù)據(jù)層完全的分離，無論是對(duì)于當(dāng)時(shí)的開發(fā)者，還是后面的維護(hù)者來說，都是極好的(在這里，我們先暫且不討論討論性能，畢竟可能對(duì)于前端初學(xué)者，更關(guān)注的還是便捷性和易用性)。再貼上官方的一段話。使用 v-on 有幾個(gè)好處：
·掃一眼 HTML 模板便能輕松定位在 JavaScript 代碼里對(duì)應(yīng)的方法。
·因?yàn)槟銦o須在 JavaScript 里手動(dòng)綁定事件，你的 ViewModel 代碼可以是非常純粹的邏
輯，和 DOM 完全解耦，更易于測(cè)試。
·當(dāng)一個(gè) ViewModel 被銷毀時(shí)，所有的事件處理器都會(huì)自動(dòng)被刪除。你無須擔(dān)心如何自己
清理它們?？偨Y(jié)得太好了!
3.表單控件綁定
多個(gè)復(fù)選框綁定到同一個(gè)數(shù)組
直接先給例子:
<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: []
}
})
頁面的效果如下:
Paste_Image.png
你會(huì)發(fā)現(xiàn)，根本不需要再做任何其他的操作，只要在頁面上綁定好，vue自動(dòng)幫我們把所有的復(fù)選框的value值push進(jìn)了v-model指定的數(shù)組，厲害吧!
總結(jié)
小伙伴們，相信經(jīng)過今天的這篇文章，你已經(jīng)對(duì)什么是只關(guān)注視圖層的處理這個(gè)概念有更深的理解了吧，同時(shí)，應(yīng)該也被vue提供的便捷操作所折服。在我看來，了解一個(gè)框架的核心思想和它的特色是遠(yuǎn)遠(yuǎn)比學(xué)會(huì)使用它要重要的多。一件工具，把它簡(jiǎn)簡(jiǎn)單單的當(dāng)成工具，那么你也許可以把它用的很好，但你卻永遠(yuǎn)受制于人。如果把它看成一種設(shè)計(jì)，一種思想的聚合體，并嘗試去學(xué)習(xí)，去模仿，那么你將會(huì)跳出你的邊界，看到一片全新的天地。
