摘要：添加事件偵聽器時使用模式。只當(dāng)事件是從偵聽器綁定的元素本身觸發(fā)時才觸發(fā)回調(diào)。只當(dāng)點(diǎn)擊鼠標(biāo)右鍵時觸發(fā)只當(dāng)點(diǎn)擊鼠標(biāo)中鍵時觸發(fā)以模式添加偵聽器，減少額外的監(jiān)聽，提高性能表示永遠(yuǎn)不會調(diào)用。記住，指令函數(shù)能夠接受所有合法的表達(dá)式。

官方解釋：

當(dāng) Vue.js 用?v-for?正在更新已渲染過的元素列表時，它默認(rèn)用“就地復(fù)用”策略。如果數(shù)據(jù)項(xiàng)的順序被改變，Vue 將不會移動 DOM 元素來匹配數(shù)據(jù)項(xiàng)的順序， 而是簡單復(fù)用此處每個元素，并且確保它在特定索引下顯示已被渲染過的每個元素。這個類似 Vue 1.x 的?track-by="$index"?。

這個默認(rèn)的模式是高效的，但是只適用于不依賴子組件狀態(tài)或臨時 DOM 狀態(tài) (例如：表單輸入值) 的列表渲染輸出。

為了給 Vue 一個提示，以便它能跟蹤每個節(jié)點(diǎn)的身份，從而重用和重新排序現(xiàn)有元素，你需要為每項(xiàng)提供一個唯一?key?屬性。理想的?key?值是每項(xiàng)都有的唯一 id。這個特殊的屬性相當(dāng)于 Vue 1.x 的?track-by?，但它的工作方式類似于一個屬性，所以你需要用?v-bind?來綁定動態(tài)值 (在這里使用簡寫)：

建議盡可能在使用?v-for?時提供?key，除非遍歷輸出的 DOM 內(nèi)容非常簡單，或者是刻意依賴默認(rèn)行為以獲取性能上的提升。因?yàn)樗荲ue識別節(jié)點(diǎn)的一個通用機(jī)制。

從虛擬DOM的Diff算法實(shí)現(xiàn)的角度：

比如我們希望可以在B和C之間加一個F，Diff算法默認(rèn)執(zhí)行起來是這樣的：

即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很沒有效率？

所以我們需要使用key來給每個節(jié)點(diǎn)做一個唯一標(biāo)識，Diff算法就可以正確的識別此節(jié)點(diǎn)，找到正確的位置區(qū)插入新的節(jié)點(diǎn)。

所以一句話，key的作用主要是為了高效的更新虛擬DOM。

修飾符

.stop

調(diào)用 event.stopPropagation()。阻止冒泡

.prevent

調(diào)用 event.preventDefault()。取消事件的默認(rèn)動作

該方法將通知 Web 瀏覽器不要執(zhí)行與事件關(guān)聯(lián)的默認(rèn)動作（如果存在這樣的動作）。例如，如果 type 屬性是 "submit"，在事件傳播的任意階段可以調(diào)用任意的事件句柄，通過調(diào)用該方法，可以阻止提交表單。注意，如果 Event 對象的 cancelable 屬性是 fasle，那么就沒有默認(rèn)動作，或者不能阻止默認(rèn)動作。無論哪種情況，調(diào)用該方法都沒有作用。

.capture

添加事件偵聽器時使用 capture 模式。（即是給元素添加一個監(jiān)聽器，當(dāng)元素發(fā)生冒泡時，先觸發(fā)帶有該修飾符的元素。若有多個該修飾符，則由外而內(nèi)觸發(fā)。?

就是誰有該事件修飾符，就先觸發(fā)誰。 ）

.self

只當(dāng)事件是從偵聽器綁定的元素本身觸發(fā)時才觸發(fā)回調(diào)。(相當(dāng)于忽略了其他元素的冒泡或者捕獲事件)

.{keyCode | keyAlias}

只當(dāng)事件是從特定鍵觸發(fā)時才觸發(fā)回調(diào)。

.native

監(jiān)聽組件根元素的原生事件。

.once

只觸發(fā)一次回調(diào)。

.left - (2.2.0)

只當(dāng)點(diǎn)擊鼠標(biāo)左鍵時觸發(fā)。

.right - (2.2.0)

只當(dāng)點(diǎn)擊鼠標(biāo)右鍵時觸發(fā)

.middle - (2.2.0)

只當(dāng)點(diǎn)擊鼠標(biāo)中鍵時觸發(fā)

.passive - (2.3.0)

以 { passive: true } 模式添加偵聽器，減少額外的監(jiān)聽，提高性能（表示?listener?永遠(yuǎn)不會調(diào)用?preventDefault()。如果 listener 仍然調(diào)用了這個函數(shù)，客戶端將會忽略它并拋出一個控制臺警告。）

用于滾動性能優(yōu)化-滾動事件的默認(rèn)行為 (即滾動行為) 將會立即觸發(fā)而不會等待 onScroll 完成https://blog.csdn.net/shenlei...

不過是以下實(shí)例的語法糖

所以在子組件可以這樣寫：

props: ["value"],
data() {
    return {
        // 新建props屬性副本
        value_p: this.value
    }
},
watch: {
    // 監(jiān)聽props屬性值，實(shí)時更新副本值
    value(val) {
        this.value_p = val
    }
}
methods: {
    valueChange() {
        // 觸發(fā)Input事件，將新增傳遞給父組件，父組件會自動更新
        this.$emit("input", this.value_p)
    }
}

sync修飾符在vue2.0被移除，在vue2.3.0被重新引入。但是這次它只是作為一個編譯時的語法糖存在。它會被擴(kuò)展為一個自動更新父組件屬性的 v-on 監(jiān)聽器。

會被擴(kuò)展成

props: ["title"],
data() {

return {
    // 新建props屬性副本
    title_p: this.title
}

},
watch: {

// 監(jiān)聽props屬性值，實(shí)時更新副本值
title(val) {
    this.title_p = val
}

}
methods: {

valueChange() {
    // 值改變時顯式地觸發(fā)一個更新事件，父組件自動更新
    this.$emit("update:title", this.title_p)
}

}

只渲染元素和組件一次。隨后的重新渲染，元素/組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過。這可以用于優(yōu)化更新性能。

全局注冊

Vue.directive("focus", {
// 當(dāng)被綁定的元素插入到 DOM 中時……
inserted: function (el) {

// 聚焦元素
el.focus()

}
})

局部注冊

directives: {
focus: {

// 指令的定義
inserted: function (el) {
  el.focus()
}

}
}

bind：只調(diào)用一次，指令第一次綁定到元素時調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置。

inserted：被綁定元素插入父節(jié)點(diǎn)時調(diào)用 (僅保證父節(jié)點(diǎn)存在，但不一定已被插入文檔中)。

update：所在組件的 VNode 更新時調(diào)用。

componentUpdated：指令所在組件的 VNode?及其子 VNode?全部更新后調(diào)用。

unbind：只調(diào)用一次，指令與元素解綁時調(diào)用。

el：指令所綁定的元素，可以用來直接操作 DOM 。

binding：一個對象，包含以下屬性：

name：指令名，不包括?v-?前綴。

value：指令的綁定值，例如：v-my-directive="1 + 1"?中，綁定值為?2。

oldValue：指令綁定的前一個值，僅在?update?和?componentUpdated?鉤子中可用。無論值是否改變都可用。

expression：字符串形式的指令表達(dá)式。例如?v-my-directive="1 + 1"中，表達(dá)式為?"1 + 1"。

arg：傳給指令的參數(shù)，可選。例如?v-my-directive:foo?中，參數(shù)為?"foo"。

modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar?中，修飾符對象為?{ foo: true, bar: true }。

vnode：Vue 編譯生成的虛擬節(jié)點(diǎn)。

oldVnode：上一個虛擬節(jié)點(diǎn)，僅在?update?和?componentUpdated?鉤子中可用。

如果指令需要多個值，可以傳入一個 JavaScript 對象字面量。記住，指令函數(shù)能夠接受所有合法的 JavaScript 表達(dá)式。

Vue.directive("demo", function (el, binding) {
console.log(binding.value.color) // => "white"
console.log(binding.value.text) // => "hello!"
})