1. 計(jì)算屬性

在我看來(lái)，計(jì)算屬性是vue的一大特色，它極大的簡(jiǎn)化了開(kāi)發(fā)邏輯，極大地提升了開(kāi)發(fā)效率。或許不用計(jì)算屬性，也完全可用寫(xiě)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ù)雜，小伙伴們一試便知。

2. 列表渲染

有的小伙伴可能發(fā)現(xiàn)，我的筆記并沒(méi)有按照官方文檔的順序一路寫(xiě)下來(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ā)視圖的更新:

1. 當(dāng)直接設(shè)置數(shù)組里的一項(xiàng)值時(shí)，如 vm.items[indexOfItem] = newValue
2. 當(dāng)修改數(shù)組長(zhǎng)度時(shí)，如
   vm.items.length = newLength

我就曾經(jīng)在項(xiàng)目中遇到這種情況，官方也提供了解決辦法，第1種情況:

// Vue.set
Vue.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中手寫(xiě)這些，但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">
<!-- 縮寫(xiě)語(yǔ)法 -->
<input @keyup.enter="submit">

全部的按鍵別名:

• .enter
• .tab
• .delete
• .esc
• .space
• .up
• .down
• .left
• .right
  還可以自定義按鍵別名哦，是不是很貼心，自定義別名方法如下:

// 可以使用 v-on:keyup.f1
Vue.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è)好處：

1. 掃一眼 HTML 模板便能輕松定位在 JavaScript 代碼里對(duì)應(yīng)的方法。
2. 因?yàn)槟銦o(wú)須在 JavaScript 里手動(dòng)綁定事件，你的 ViewModel 代碼可以是非常純粹的邏輯，和 DOM 完全解耦，更易于測(cè)試。
3. 當(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ì)跳出你的邊界，看到一片全新的天地。

相關(guān)文章鏈接

vue.js學(xué)習(xí)筆記--1

參考資料

vue中文文檔