对vue中自定义指令directive的理解

directive指令是为了满足vue中内置指令不能满足需求的情况下,开发者需要自定义一些指令来满足业务需要。
自定义指令分为全局自定义指令和局部自定义指令。
全局自定义指令如下:

Vue.directive("myDirective",{
	bind:functiion(el,binding,vnode){
		/**
		el:自定义指令绑定的元素
		binding:使用自定义指令绑定的属性和值,binding时一个对象,属性如下:
					   name:指令名,不包括v-前缀,例如:v-demo,指令名为demo
					   value:制定绑定的值,v-demo="1+1",那么指令值为2,v-demo="msg",msg="hello"指令值为hello
					   oldValue:指令绑定的前一个值,仅在update和componentUpdated钩子函数中可用,无论绑定的value是否改变。
					   expression:字符串形式的指令表达式,其实就是自定义指令中的表达式。例如v-demo="hello",那么expression的值为hello
					   arg:传给指令的参数。例如v-demo:hello中,指令的参数为hello,v-demo[args],args="hello":指令参数为hello
					   modifiers:一个包含修饰符的对象,例如v-demo.a.b,修饰符对象为{a:true,b:true}
		*/
		//除了el之外,其他属性都是只读的,不能进行修改,如果需要在自定义指令中的钩子函数中进行数据传输,需要使用dataset来进行
vnode:虚拟DOM
oldVnode:上一个虚拟节点。
	}
})

自定义指令简写
在只有bind和update的时候,可以对自定义指令简写,例如;
Vue.directive(“demo”,function(el,binding){
el.style.color=binding.value;
})
动态指令
其实就是对象属性值,使用vue动态赋值,在自定义函数中动态获取,例如:
动态定位头部标签或左边标签栏,使用自定义指令就很好使

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值