vue自定义指令

AngularJS的启发,Vue内置了一些非常有用的指令,比如v-htmlv-once等,每个指令都有自身的用途。除了系统内部的指令,Vue也允许注册自定义指令。

一、自定义指令的注册

全局引入

创建一个directive.js,代码如下,然后在main.js中引入即可。

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

这里有个函数简写形式,想在bindupdate时触发相同行为,而不关心其它的钩子。可以这样写:

Vue.directive('focus', function (el, binding) {
    el.focus();
})
局部引入

如果想注册局部指令,组件中也接受一个 directives 的选项:

directives: {
    focus: {
        inserted: function (el) {
            el.focus();
        }
    }
}

然后就可以在模板中任何元素上使用新的v-focus属性,如下:


二、参数

自定义指令一共有5个钩子函数:bindinsertedupdatecomponentUpdateunbind
钩子函数会被传入以下参数:elbindingvnodeoldVnode
以上内容详细可以参考官网对钩子函数的简介——钩子函数 。不过有点非常重要的就是除了 el 之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行。

三、举例说明

指令的使用方式主要是以下四种:

  • v-once,什么都不传递。
  • v-text='"test"',把我们需要传递的值放在=号后面传递过去。
  • v-on:click="handClick" ,为指令传递参数click
  • v-on:click.stop="handClick" ,为指令添加一个修饰符。
场景一: 限制输入框输入的最大长度(不包含空格)

指令名为limit,指令的绑定值为可输入最大长度。

//template


//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,传给指令的参数为clickclick作为参数传入的目的在于可以配置事件,通过传keydownmouseover等也可以让这个指令支持鼠标或者键盘事件等等。而修饰符.stop或者.prevent可以配置事件冒泡和阻止默认事件等等。

//template
//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); }); });

以上是两个简单的例子,会发现用的最频繁的是elbindingel表示元素本身,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 指令绑定的前一个值,仅在updatecomponentUpdated钩子中可用。无论值是否改变都可用。

binding.valuebinding.expression可能会搞乱,binding.value获取的是具体的方法或者数值,而binding.expression获取的仅仅是方法名和值的表达式,举个例子:

//template
//directive.js Vue.directive('test', function (el, binding) { console.log(binding.value); //2 console.log(binding.expression); //1+1 });

四、干货分享

总的来说,指令是非常强大的,但是往往也很容易被开发者们所忽略,因为很多时候用工具类函数或者组件的方式也可以实现同样的功能,不过学会指令的话肯定就是如虎添翼,作为一个有要求的程序员,还是非常有必要掌握这个技能,分享个干货,这15个Vue自定义指令,让你的项目开发爽到爆。

你可能感兴趣的:(vue自定义指令)