本筆記來(lái)源與官網(wǎng)vue教程和第三方教學(xué)視頻，并不十分全面，但也可以作為一個(gè)復(fù)習(xí)提綱，一邊對(duì)應(yīng)目錄，一邊復(fù)習(xí)相關(guān)知識(shí)點(diǎn)。

vue體驗(yàn)

1.創(chuàng)建vue的實(shí)例

let vm = new Vue ({
    el: '#app';  //與html中id為app的關(guān)聯(lián)
    data: {
    massage: '你好，世界！'  //替換{{massage}}的數(shù)據(jù)
}
})

1.指令

1. 指令 v-model

2. 指令 v-once

3. v-if

4. v-show

5. v-for

6. v-text

7. v-html

8. v-bind

9. v-on

計(jì)算屬性

基礎(chǔ)例子

<div id="example">
    <p> Original message: "{{}}"</p>
    <p>Computed reversed message: "{{reversedMessage}}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 計(jì)算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 實(shí)例
      return this.message.split('').reverse().join('')
    }
  }
})

我們可以將同一函數(shù)定義為一個(gè)方法而不是一個(gè)計(jì)算屬性。兩種方式的最終結(jié)果確實(shí)是完全相同的。然而，不同的是計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的。

計(jì)算屬性的setter

計(jì)算屬性默認(rèn)只有 getter ，不過(guò)在需要時(shí)你也可以提供一個(gè) 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]
    }
  }
}
// ...

現(xiàn)在再運(yùn)行 vm.fullName = 'John Doe' 時(shí)，setter 會(huì)被調(diào)用，vm.firstName 和 vm.lastName 也會(huì)相應(yīng)地被更新。

列表渲染

一個(gè)對(duì)象的v-for

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

含有三個(gè)參數(shù)為索引：

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

數(shù)組更新檢測(cè)

變異方法

變異方法 (mutation method)，顧名思義，會(huì)改變被這些方法調(diào)用的原始數(shù)組。

Vue 包含一組觀察數(shù)組的變異方法，所以它們也將會(huì)觸發(fā)視圖更新。這些方法如下：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

替換數(shù)組

非變異 (non-mutating method) 方法，例如：filter(), concat() 和 slice() 。這些不會(huì)改變?cè)紨?shù)組，但總是返回一個(gè)新數(shù)組。當(dāng)使用非變異方法時(shí)，可以用新數(shù)組替換舊數(shù)組

注意事項(xiàng)

由于 JavaScript 的限制，Vue 不能檢測(cè)以下變動(dòng)的數(shù)組：

1. 當(dāng)你利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)，例如：vm.items[indexOfItem] = newValue
2. 當(dāng)你修改數(shù)組的長(zhǎng)度時(shí)，例如：vm.items.length = newLength

還是由于 JavaScript 的限制，Vue 不能檢測(cè)對(duì)象屬性的添加或刪除

顯示過(guò)濾/排序結(jié)果

有時(shí)，我們想要顯示一個(gè)數(shù)組的過(guò)濾或排序副本，而不實(shí)際改變或重置原始數(shù)據(jù)。在這種情況下，可以創(chuàng)建返回過(guò)濾或排序數(shù)組的計(jì)算屬性。

例如：

<li v-for="n in evenNumbers">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

在計(jì)算屬性不適用的情況下 (例如，在嵌套 v-for 循環(huán)中) 你可以使用一個(gè) method 方法：

<li v-for="n in even(numbers)">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

事件處理

事件修飾符

在事件處理程序中調(diào)用 event.preventDefault() 或 event.stopPropagation() 是非常常見(jiàn)的需求。盡管我們可以在方法中輕松實(shí)現(xiàn)這點(diǎn)，但更好的方式是：方法只有純粹的數(shù)據(jù)邏輯，而不是去處理 DOM 事件細(xì)節(jié)。

為了解決這個(gè)問(wèn)題，Vue.js 為 v-on 提供了事件修飾符。之前提過(guò)，修飾符是由點(diǎn)開(kāi)頭的指令后綴來(lái)表示的。

<!-- 阻止單擊事件繼續(xù)傳播 -->
<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>

<!-- 添加事件監(jiān)聽(tīng)器時(shí)使用事件捕獲模式 -->
<!-- 即元素自身觸發(fā)的事件先在此處理，然后才交由內(nèi)部元素進(jìn)行處理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
<div v-on:click.self="doThat">...</div>

<!-- 點(diǎn)擊事件將只會(huì)觸發(fā)一次 -->
<a v-on:click.once="doThis"></a>

Vue 還對(duì)應(yīng) addEventListener 中的 passive 選項(xiàng)提供了 .passive 修飾符。

<!-- 滾動(dòng)事件的默認(rèn)行為 (即滾動(dòng)行為) 將會(huì)立即觸發(fā) -->
<!-- 而不會(huì)等待 `onScroll` 完成  -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>

?。?！不要把 .passive 和 .prevent 一起使用，因?yàn)?.prevent 將會(huì)被忽略，同時(shí)瀏覽器可能會(huì)向你展示一個(gè)警告。請(qǐng)記住，.passive 會(huì)告訴瀏覽器你不想阻止事件的默認(rèn)行為。

表單輸入綁定

修飾符

.lazy

在默認(rèn)情況下，v-model 在每次 input 事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步 (除了上述輸入法組合文字時(shí))。你可以添加 lazy 修飾符，從而轉(zhuǎn)變?yōu)槭褂?change 事件進(jìn)行同步：

<!-- 在“change”時(shí)而非“input”時(shí)更新 -->
<input v-model.lazy="msg" >

.number

如果想自動(dòng)將用戶的輸入值轉(zhuǎn)為數(shù)值類(lèi)型，可以給 v-model 添加 number 修飾符：

<input v-model.number="age" type="number">

.trim

如果要自動(dòng)過(guò)濾用戶輸入的首尾空白字符，可以給 v-model 添加 trim 修飾符：

<input v-model.trim="msg">

組件基礎(chǔ)

組件的復(fù)用

data必須是一個(gè)函數(shù)

一個(gè)組件的 data 選項(xiàng)必須是一個(gè)函數(shù)，因此每個(gè)實(shí)例可以維護(hù)一份被返回對(duì)象的獨(dú)立的拷貝。

如果 Vue 沒(méi)有這條規(guī)則，可能點(diǎn)擊一個(gè)按鈕就會(huì)影響到其它所有實(shí)例

解析DOM模板時(shí)的注意事項(xiàng)

有些 HTML 元素，諸如 <ul>、<ol>、<table> 和 <select>，對(duì)于哪些元素可以出現(xiàn)在其內(nèi)部是有嚴(yán)格限制的。而有些元素，諸如 <li>、<tr> 和 <option>，只能出現(xiàn)在其它某些特定的元素內(nèi)部。

這會(huì)導(dǎo)致我們使用這些有約束條件的元素時(shí)遇到一些問(wèn)題。例如：

<table>
  <blog-post-row></blog-post-row>
</table>

這個(gè)自定義組件 <blog-post-row> 會(huì)被作為無(wú)效的內(nèi)容提升到外部，并導(dǎo)致最終渲染結(jié)果出錯(cuò)。幸好這個(gè)特殊的 is 特性給了我們一個(gè)變通的辦法：

<table>
  <tr is="blog-post-row"></tr>
</table>