受
AngularJS的启发，Vue内置了一些非常有用的指令，比如v-html和v-once等，每个指令都有自身的用途。除了系统内部的指令，Vue也允许注册自定义指令。
一、自定义指令的注册
全局引入
创建一个directive.js，代码如下，然后在main.js中引入即可。
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时
inserted: function (el) {
el.focus()
}
})
这里有个函数简写形式，想在bind和update时触发相同行为，而不关心其它的钩子。可以这样写：
Vue.directive('focus', function (el, binding) {
el.focus();
})
局部引入
如果想注册局部指令，组件中也接受一个 directives 的选项：
directives: {
focus: {
inserted: function (el) {
el.focus();
}
}
}
然后就可以在模板中任何元素上使用新的v-focus属性，如下：
<input v-focus>
二、参数
自定义指令一共有5个钩子函数：bind、inserted、update、componentUpdate和unbind。
钩子函数会被传入以下参数：el、binding、vnode、oldVnode。
以上内容详细可以参考官网对钩子函数的简介——钩子函数 。不过有点非常重要的就是除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。
三、举例说明
指令的使用方式主要是以下四种：
-
v-once，什么都不传递。 -
v-text='"test"'，把我们需要传递的值放在=号后面传递过去。 -
v-on:click="handClick"，为指令传递参数click。 -
v-on:click.stop="handClick"，为指令添加一个修饰符。
场景一： 限制输入框输入的最大长度（不包含空格）
指令名为limit，指令的绑定值为可输入最大长度。
//template
<input v-limit="20"/>
//directive.js
Vue.directive('limit', function (el, binding, vnode) {
el.addEventListener("input", function () {
if(el.type !== 'text')return;
el.value = el.value.replace(" ","");
if(el.value.length>binding.value)el.value = el.value.slice(0,binding.value);
});
});
场景二：通过指令实现防抖
指令名为debounce，传给指令的参数为click，click作为参数传入的目的在于可以配置事件，通过传keydown，mouseover等也可以让这个指令支持鼠标或者键盘事件等等。而修饰符.stop或者.prevent可以配置事件冒泡和阻止默认事件等等。
//template
<div v-debounce:click.stop.prevent="clickFn"></div>
//directive.js
Vue.directive('debounce', function (el, binding) {
let timer;
el.addEventListener(binding.arg, () => {
if (binding.modifiers.stop) event.stopPropagation();
if (binding.modifiers.prevent) event.preventDefault();
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
binding.value();
}, 300);
});
});
以上是两个简单的例子，会发现用的最频繁的是el和binding，el表示元素本身，binding比较复杂了，它有以下属性：
-
binding.name指令名。比如例子中的v-debounce中的debounce。 -
binding.value绑定的指令的值。比如v-debounce:click="clickFn"中的clickFn。 -
binding.arg传给指令的参数。比如v-debounce:click="clickFn"中v-debounce:后面的click。 -
binding.modifiers一个包含修饰符的对象。比如v-debounce:click.stop.prevent中，修饰符对象为{ stop: true, prevent: true }。 -
binding.expression字符串形式的指令表达式。比如v-debounce:click="clickFn"中的"clickFn"。 -
binding.oldValue指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。
binding.value和binding.expression可能会搞乱，binding.value获取的是具体的方法或者数值，而binding.expression获取的仅仅是方法名和值的表达式，举个例子：
//template
<div v-test="1+1"></div>
//directive.js
Vue.directive('test', function (el, binding) {
console.log(binding.value); //2
console.log(binding.expression); //1+1
});
四、干货分享
总的来说，指令是非常强大的，但是往往也很容易被开发者们所忽略，因为很多时候用工具类函数或者组件的方式也可以实现同样的功能，不过学会指令的话肯定就是如虎添翼，作为一个有要求的程序员，还是非常有必要掌握这个技能，分享个干货，这15个Vue自定义指令，让你的项目开发爽到爆。
