Vue指令详解

摘要：添加事件侦听器时使用模式。只当事件是从侦听器绑定的元素本身触发时才触发回调。只当点击鼠标右键时触发只当点击鼠标中键时触发以模式添加侦听器，减少额外的监听，提高性能表示永远不会调用。记住，指令函数能够接受所有合法的表达式。

官方解释：

当 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!"
})