vue自定义指令

受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自定义指令，让你的项目开发爽到爆。