点击右上方红色按钮关注“web秀”，让你真正秀起来

前言

什么是vue指令了？ Vue自带的指令很多，v-for/v-if/v-else/v-else-if/v-model/v-bind/v-on/v-show/v-html/v-text… 原来这就是指令。

但是这些指令都是比较偏向于工具化，有些时候在实现具体的业务逻辑的时候，发现不够用，如何来自定义指令？

全局指令

第一步

最好建立一个全局的命令文件例如：directive.js 利用Vue.directive()建立一个全局命令，并将它暴露出来，例如一个focus 让表单自动聚焦

第二步

在main.js（入口JS文件）中将它引入，可以省略文件后缀

// main.js
import focus from 'xxx/directive'

这样任何一个Vue文件只有使用v-focus(指令名)，就可以很方便的自动聚焦了。

<input type="text" v-focus:foo="我是指令参数">

局部指令

用法和全局指令一样，只是在单个Vue实例页面内部定义，只能被这一个实例使用，而全局可以被多个实例使用。

自定义指令钩子函数参数介绍

函数

1. bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
2. inserted：被绑定元素插入父节点时调用 (父节点存在即可调用，不必存在于 document 中)。
3. update：所在组件的 VNode 更新时调用，但是可能发生在其孩子的 VNode 更新之前。指令的值可能发生了改变也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
4. componentUpdated：所在组件的 VNode 及其孩子的 VNode 全部更新时调用。
5. unbind：只调用一次，指令与元素解绑时调用。

参数

1. el：指令所绑定的元素，可以用来直接操作 DOM 。
2. binding：一个对象，包含以下属性： name：指令名，不包括 v- 前缀。 value：指令的绑定值，例如：v-my-directive="1 + 1", value 的值是 2。oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。expression：绑定值的字符串形式。例如 v-my-directive="1 + 1" ，expression 的值是 "1 + 1"。 arg：传给指令的参数。例如 v-my-directive:foo，arg 的值是 "foo"。 modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
3. vnode：Vue 编译生成的虚拟节点，查阅 VNode API 了解更多详情。
4. oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

学以致用

最后我们来写一个非常实用的栗子，页面倒计时，请上眼

页面可以直接使用

<!-- 截止时间与当前时间差（单位毫秒） -->
<span v-timer='100000'></span>

公告

喜欢小编的点击关注，了解更多知识！