vue如何编写自定义指令directive

vue已经给我们内置了很多很好用的指令了(v-mode 、v-show)等等,但是有时候当这些指令不能满足我们需求的时候,我们还可以使用vue的自定义指令功能编写我们的指令,这是一个很强大的功能。

需要说明的是:尽管自定义指令这个功能很强大,但是其是对普通的DOM底层进行了直接的操作,会消耗一定的性能,所以我们在使用的时候一定要权衡利弊。

全局定义

我们可以使用vue的接口Vue.directive()去定义一个自定义的指令。

// 第一个参数为指令的名称,第二参数则是一个对象,包含了指令的钩子函数

Vue.directiive("directivename",{
	// 这个钩子只调用一次,在指令绑定到元素的时候被调用。通常可以在这里进行初始化
	bind(el,binding,vnode,oldVnode){
		consolo.log(el,binding,vnode)
	}
	// 在绑定指令后,绑定的元素插入父元素时触发,在bind钩子后
	inserted(el,binding,vnode,oldVnode){

	}
	// 所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。
	update(el,binding,vnode,oldVnode){

	}
	// 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
	componentUpdate(el,binding,vnode,oldVnode){

	}
	// 指令与元素解绑后调用
	unbind(el,binding,vnode,oldVnode){}
})
指令的使用

和使用其他内置指令一样在元素上绑定

<div v-directive:参数.修饰符.修饰符="数据"></div>

binding参数

在这里插入图片描述

bindinf.name:指令的名字
binding.arg:指令的参数
binding.modifiers:指令的修饰符
binding.value:数据的数值(数值)
binding.expression:数据的字符串

局部指令

如果你愿意的话,你可以只定义一个组件或者部分组件的自定义指令
定义的的方法也很简单:只需要在组件选项里定义directives即可

directives:{
	directivename:{
		// 这个钩子只调用一次,在指令绑定到元素的时候被调用。通常可以在这里进行初始化
		bind(el,binding,vnode,oldVnode){}
		// 在绑定指令后,绑定的元素插入父元素时触发,在bind钩子后
		inserted(el,binding,vnode,oldVnode){}
		// 所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。
		update(el,binding,vnode,oldVnode){}
		// 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
		componentUpdate(el,binding,vnode,oldVnode){}
		// 指令与元素解绑后调用
		unbind(el,binding,vnode,oldVnode){}
	}
}

动态参数

除此之外,我们还可以定义具有动态参数的指令

v-directivename:[动态参数].修饰符.修饰符="数据"
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值