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

官方解釋：

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

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

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

建議盡可能在使用?v-for?時提供?key，除非遍歷輸出的 DOM 內容非常簡單，或者是刻意依賴默認行為以獲取性能上的提升。因為它是Vue識別節點的一個通用機制。

從虛擬DOM的Diff算法實現的角度：

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

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

所以我們需要使用key來給每個節點做一個唯一標識，Diff算法就可以正確的識別此節點，找到正確的位置區插入新的節點。

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

修飾符

.stop

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

.prevent

調用 event.preventDefault()。取消事件的默認動作

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

.capture

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

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

.self

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

.{keyCode | keyAlias}

只當事件是從特定鍵觸發時才觸發回調。

.native

監聽組件根元素的原生事件。

.once

只觸發一次回調。

.left - (2.2.0)

只當點擊鼠標左鍵時觸發。

.right - (2.2.0)

只當點擊鼠標右鍵時觸發

.middle - (2.2.0)

只當點擊鼠標中鍵時觸發

.passive - (2.3.0)

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

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

不過是以下實例的語法糖

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

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

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

會被擴展成

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

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

},
watch: {

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

}
methods: {

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

}

只渲染元素和組件一次。隨后的重新渲染，元素/組件及其所有的子節點將被視為靜態內容并跳過。這可以用于優化更新性能。

全局注冊

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

// 聚焦元素
el.focus()

}
})

局部注冊

directives: {
focus: {

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

}
}

bind：只調用一次，指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置。

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

update：所在組件的 VNode 更新時調用。

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

unbind：只調用一次，指令與元素解綁時調用。

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

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

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

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

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

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

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

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

vnode：Vue 編譯生成的虛擬節點。

oldVnode：上一個虛擬節點，僅在?update?和?componentUpdated?鉤子中可用。

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

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