- 計(jì)算屬性
在我看來(lái)，計(jì)算屬性是vue的一大特色曼追，它極大的簡(jiǎn)化了開(kāi)發(fā)邏輯窍仰，極大地提升了開(kāi)發(fā)效率±袷猓或許不用計(jì)算屬性驹吮，也完全可用寫vue，不影響開(kāi)發(fā)頁(yè)面晶伦，但我們更該去嘗試一些更先進(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á)到同樣的效果族沃，不過(guò)，大家明顯能感覺(jué)到近忙，這么一個(gè)數(shù)據(jù)處理竭业，用methods似乎智润。及舍。對(duì)，大材小用的一種感覺(jué)窟绷，簡(jiǎn)簡(jiǎn)單單的用一個(gè)計(jì)算屬性computed锯玛，輕松搞定!另外，還有計(jì)算緩存的問(wèn)題，這里不細(xì)說(shuō)攘残，只需知道這個(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討人喜愛(ài)的地方了嗎歼郭，反正我是感受到了遗契。
setter
感覺(jué)setter是個(gè)略為高級(jí)點(diǎn)的用法，目前我也還沒(méi)想到它的實(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
百度搜索大家都用過(guò)牍蜂，每輸一個(gè)字就會(huì)彈出相應(yīng)的建議選項(xiàng)，這就是和watch大概相似的原理泰涂，時(shí)刻監(jiān)聽(tīng)頁(yè)面上的數(shù)據(jù)變化鲫竞，只要它一變化，就出發(fā)一個(gè)函數(shù)事件逼蒙，這類的事件一般是異步請(qǐng)求的居多从绘，用來(lái)提升用戶體驗(yàn)，也算是現(xiàn)在很常用的技術(shù)了是牢，用法并不復(fù)雜僵井，小伙伴們一試便知。
- 列表渲染
有的小伙伴可能發(fā)現(xiàn)驳棱，我的筆記并沒(méi)有按照官方文檔的順序一路寫下來(lái)驹沿。那是因?yàn)椋@是我的筆記蹈胡，而不是教程渊季，所以記下來(lái)的更多的是自己覺(jué)得比較需要注意或者是自己有些想法的地方。照搬官方文檔的話罚渐，我的這些筆記意義也就并不大了却汉。
遍歷對(duì)象 v-for
vue的v-for不光能夠遍歷數(shù)組，也能夠直接遍歷對(duì)象荷并，基本語(yǔ)法是:
<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)不局限于這兩種，真正遇到只要能避開(kāi)直接出現(xiàn)上述的兩種情況就可以解決侠仇。
事件處理器
事件修飾符
在事件處理程序中調(diào)用 event.preventDefault() 或 event.stopPropagation() 是非常常見(jiàn)的需求轻姿。雖然我們當(dāng)然可以自己在methods中手寫這些犁珠，但vue給我們提供更好更方便的方法，那就是事件修飾符互亮，具體做法是在指令的后綴后面加上 . 和阻止事件犁享，有以下阻止事件:
.stop
.prevent
.capture
.self
.once下面是一些事例:
<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁(yè)面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件偵聽(tīng)器時(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"><!-- 縮寫語(yǔ)法 --><input @keyup.enter="submit">
全部的按鍵別名:
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right還可以自定義按鍵別名哦，是不是很貼心威根，自定義別名方法如下:
// 可以使用 v-on:keyup.f1Vue.config.keyCodes.f1 = 112
為什么在HTML中監(jiān)聽(tīng)事件
這個(gè)可能并不能使我們更加熟練的使用vue窑眯，但能讓我們?nèi)チ私鈜ue的內(nèi)層設(shè)計(jì)思想，從中得到一些啟發(fā)医窿“跛Γ可以看到，vue的思想就是讓我們只需要去單純的處理數(shù)據(jù)運(yùn)算就可以了姥卢，至于DOM上的所有事情卷要，我們都無(wú)須擔(dān)心，它都提供了最便捷的方法和最完善的善后工作独榴，這種視圖層和數(shù)據(jù)層完全的分離僧叉，無(wú)論是對(duì)于當(dāng)時(shí)的開(kāi)發(fā)者，還是后面的維護(hù)者來(lái)說(shuō)棺榔，都是極好的(在這里瓶堕，我們先暫且不討論討論性能，畢竟可能對(duì)于前端初學(xué)者症歇，更關(guān)注的還是便捷性和易用性)郎笆。再貼上官方的一段話。使用 v-on 有幾個(gè)好處：
·掃一眼 HTML 模板便能輕松定位在 JavaScript 代碼里對(duì)應(yīng)的方法忘晤。
·因?yàn)槟銦o(wú)須在 JavaScript 里手動(dòng)綁定事件宛蚓，你的 ViewModel 代碼可以是非常純粹的邏
輯，和 DOM 完全解耦设塔，更易于測(cè)試凄吏。
·當(dāng)一個(gè) ViewModel 被銷毀時(shí)，所有的事件處理器都會(huì)自動(dòng)被刪除闰蛔。你無(wú)須擔(dān)心如何自己
清理它們痕钢。總結(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: []
}
})
頁(yè)面的效果如下:
Paste_Image.png
你會(huì)發(fā)現(xiàn)序六，根本不需要再做任何其他的操作任连，只要在頁(yè)面上綁定好，vue自動(dòng)幫我們把所有的復(fù)選框的value值push進(jìn)了v-model指定的數(shù)組难咕，厲害吧!
總結(jié)
小伙伴們课梳，相信經(jīng)過(guò)今天的這篇文章距辆，你已經(jīng)對(duì)什么是只關(guān)注視圖層的處理這個(gè)概念有更深的理解了吧余佃，同時(shí)暮刃，應(yīng)該也被vue提供的便捷操作所折服。在我看來(lái)爆土，了解一個(gè)框架的核心思想和它的特色是遠(yuǎn)遠(yuǎn)比學(xué)會(huì)使用它要重要的多椭懊。一件工具，把它簡(jiǎn)簡(jiǎn)單單的當(dāng)成工具步势，那么你也許可以把它用的很好氧猬，但你卻永遠(yuǎn)受制于人。如果把它看成一種設(shè)計(jì)坏瘩，一種思想的聚合體盅抚，并嘗試去學(xué)習(xí)，去模仿倔矾，那么你將會(huì)跳出你的邊界妄均，看到一片全新的天地。
