16.《vue之自定义指令》

最新推荐文章于 2024-11-07 13:38:59 发布

@逆风微笑代码狗

最新推荐文章于 2024-11-07 13:38:59 发布

阅读量149

点赞数

文章标签： vue js dom javascript

本文链接：https://blog.csdn.net/qq_44864082/article/details/106532625

版权

我是@执念,有问题联系我QQ:2065049187

1、自定义指令：使用Vue.directive(id,definition)注册全局自定义指令，使用组件的directives选项注册局部自定义指令。

2、钩子函数：

指令定义函数提供了几个钩子函数（可选）：

bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

inserted：被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。

update：第一次是紧跟在 bind 之后调用，获得的参数是绑定的初始值，之后被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。

componentUpdated：被绑定元素所在模板完成一次更新周期时调用。

unbind：只调用一次，指令与元素解绑时调用。

3、钩子函数的参数：(el, binding, vnode, oldVnode)

el：指令所绑定的元素，可以用来直接操作 DOM 。

binding：一个对象，包含以下属性

name：指令名，不包含v-的前缀；

value：指令的绑定值；例如：v-my-directive="1+1"，value的值是2；

oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子函数中可用，无论值是否改变都可用；

expression：绑定值的字符串形式；例如：v-my-directive="1+1"，expression的值是'1+1'；

arg：传给指令的参数；例如：v-my-directive:foo，arg的值为 'foo'；

modifiers：一个包含修饰符的对象；例如：v-my-directive.a.b，modifiers的值为{'a':true,'b':true}

vnode：Vue编译的生成虚拟节点；

oldVnode：上一次的虚拟节点，仅在update和componentUpdated钩子函数中可用。

自定义指令的简单使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>vue之自定义指令（上）</title>
	</head>
	<script src="js/vue.js"></script>
	
	<body>
		<div id='app'>
		     <p v-color=color>HELLO  WORD!</p>
		</div>
		<script>
			//自定义指令语法 Vue.directive
			Vue.directive('color',function(el,binding){
				el.style.backgroundColor=binding.value;
			})
			var  vm=new Vue({
				el:'#app',
				data:{
					color:'green'
				},
				directives:{
					bold:function(dom1){
						dom1.style.fontWeight='bold'
					}
				}
			})
		</script>
	</body>
</html>