指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

 

参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind指令可以用于响应式地更新 HTML 特性：

<a v-bind:href="url">测试参数</a>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式url的值绑定。

另一个例子是 v-on 指令，它用于监听 DOM 事件：

<a v-on:click="click">点击事件</a>

在这里参数是监听的事件名。

 

内置指令（前面说过的就不令举例子了）

v-text

更新元素的 textContent。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。

<div class="hello" v-text="msg"></div>

v-html

更新元素的 innerHTML 。

<div class="hello" v-html="html"></div>

v-show

根据表达式之真假值，切换元素的 display CSS 属性。

v-if

根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template> ，将提出它的内容作为条件块。

v-else-if

前一兄弟元素必须有 v-if 或 v-else-if。表示 v-if 的 “else if 块”。可以链式调用。

v-else

前一兄弟元素必须有 v-if 或 v-else-if。为 v-if 或者 v-else-if 添加“else 块”。

v-for

基于源数据多次渲染元素或模板块。

v-on

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
在监听原生 DOM 事件时，方法以事件为唯一的参数。
从 2.4.0 开始，v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。

###缩写@

修饰符

还是先将例子放出来，用来学习修饰符。

<div class="parent" @click="firstClick"><div class="child" @click="secondClick"><div class="grandson" @click="thirdClick"></div></div>
</div>methods: {firstClick: function (value) {console.log("父亲点击事件")},secondClick: function (value) {console.log("孩子点击事件")},thirdClick: function (value) {console.log("孙子点击事件")}
}

如图：我分别点击父亲元素，孩子元素，孙子元素。

修饰符：我的理解是在事件出发的同时，帮我们多做一些事情，省略我们的工作。

.stop - 调用 event.stopPropagation()
 

 <div class="parent" @click="firstClick"><div class="child" @click.stop="secondClick"><div class="grandson" @click="thirdClick"></div></div></div>

此时点击孩子元素，页面输出如下，不会事件往上传递：

孩子点击事件

.prevent - 调用 event.preventDefault()

<a href="https://blog.csdn.net/it_rod/article/details/79433887" @click.prevent>页面跳转</a>

.capture - 添加事件侦听器时使用 capture 模式

<div class="parent" @click.capture="firstClick"><div class="child" @click.capture="secondClick"><div class="grandson" @click.capture="thirdClick"><a href="https://blog.csdn.net/it_rod/article/details/79433887" @click.prevent>页面跳转</a></div></div></div>

可以自行和上面的例子进行比较，事件冒泡和事件捕获的不同。

.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。就是只响应注册自己元素上的事件，不会进行事件冒泡。但是不会禁止默认行为。

 <div class="parent" @click.self="firstClick"><div class="child" @click.self="secondClick"><div class="grandson" @click.self="thirdClick"><a href="https://blog.csdn.net/it_rod/article/details/79433887" @click.self>页面跳转</a></div></div></div>

.passive - (2.3.0) 以 { passive: true } 模式添加侦听器。是说一次绑定多个事件。不支持任何修饰器的。

<div class="parent" v-on="{click: firstClick, mouseup: secondClick}">

尴尬的是eslint的报错。

下面几个就不一一举例了。

• .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
• .native - 监听组件根元素的原生事件。
• .once - 只触发一次回调。
• .left - (2.2.0) 只当点击鼠标左键时触发。
• .right - (2.2.0) 只当点击鼠标右键时触发。
• .middle - (2.2.0) 只当点击鼠标中键时触发。

v-bind

动态地绑定一个或多个特性，或一个组件 prop 到表达式。
在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。
在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

修饰符：

.prop - 被用于绑定 DOM 属性 (property)
其实看到这里，可能会有些迷糊啊，对于html属性和dom属性的区别请看我之前学习angular4的相关部分

 <div><input type="text" v-bind:test.prop="number" ref="input1"><input type="text" v-bind:test="number" ref="input2"><button @click="addFunction">number + 1</button></div>methods: {addFunction: function (event) {this.number++console.log(this.$refs.input1.test)console.log(this.$refs.input1.getAttribute('test'))console.log(this.$refs.input2.test)console.log(this.$refs.input2.getAttribute('test'))}}

然后我们先看结果：

首先我们可以看到html上，第一个没有属性test，那是因为我们绑定的是DOM属性。第二个输出结果也可以看到，第一个input的dom属性有值，第二个input则是html属性有值。

 

.camel - (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)

<input type="text" v-bind:view-box.camel="number" ref="input1">

页面渲染如下：

<input data-v-469af010="" type="text" viewbox="1">

.sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器
具体内容到了组件在学习。

v-model

在表单控件或者组件上创建双向绑定。

限制应用元素：

• <input>
• <select>
• <textarea>
• components

修饰符

• .lazy - 取代 input 监听 change 事件
• .number - 输入字符串转为有效的数字
• .trim - 输入首尾空格过滤

v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<span v-pre>{{ this will not be compiled }}</span>

v-cloak

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
这个指令没有怎么测试，在网上搜到和页面闪烁有关，先记下。

v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

 

自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。

例如下面创建指令：当前节点插入到父节点是，设置文字颜色为红色。

<input v-foucus type="text" v-bind:value="number" ref="input1">export default {name: 'HelloWorld',data () {return {number: 1,url: 'https://blog.csdn.net/It_rod'}},methods: {addFunction: function (event) {this.number++console.log(this.$refs.input1.test)console.log(this.$refs.input1.getAttribute('test'))console.log(this.$refs.input2.test)console.log(this.$refs.input2.getAttribute('test'))}},directives:{foucus:{inserted: function (el) {// 聚焦元素el.style.color='red'}}}
}

上面创建方式为局部创建，全局创建如下：

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {// 当被绑定的元素插入到 DOM 中时……inserted: function (el) {// 聚焦元素el.focus()}
})

 

指令钩子函数（生命周期）

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind：只调用一次，指令与元素解绑时调用。

至于钩子函数参数还是见官方文档，后面学到组件的时候关注生命周期的时候估计会联系到这边。

 

函数简写

在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写:

Vue.directive('color-swatch', function (el, binding) {el.style.backgroundColor = binding.value
})