vue自定义指令

私有自定义指令

基础用法

• 在组件内的directives标签内定义自己的自定义指令
• bind()方法在第一次绑定的时候就会执行一次，数据发生了更新就不会重新执行了
• bind(el，约定为binding来接受其他要传的数据)

<template>
  <div class="app-container">
    <h1 v-color="color1">App 根组件</h1>
	<p v-color="color1">测试</p>
	<p v-color="'red'">测试</p>
    <hr />
   </div>
</template>
 

<script>
export default {
	data() {
		return {
			color1: 'blue',
		}
	},
	directives:{
		// 定义color的自定义指令
		color:{
			// 第一次被绑定到dom元素上被执行
			bind(el,binding){
				// el表示绑定的dom元素
				console.log("binding: ",binding);
				console.log(el); 
				console.log('触发bind函数');
				el.style.color = binding.value

			}
		}
	}
} 
</script>

update函数

• update函数第一次不生效，后面每一次更新都会生效

directives:{
	// 定义color的自定义指令
	color:{
		// 第一次被绑定到dom元素上被执行
		bind(el,binding){
			// el表示绑定的dom元素
			console.log("binding: ",binding);
			console.log(el); 
			console.log('触发bind函数');
			el.style.color = binding.value

		},
		update(el,binding){
			console.log("修改了 v-color 的update的函数");
			el.style.color = binding.value
		}
	}
}

函数简写方式

• 如果bind和update逻辑完全相同，则对象格式的自定义指令可以简写为函数形式：

directives:{
		color(el,binding){
			el.style.color = binding.value
		}
	}

全局自定义指令

• 组件内定义的指令只能在自己的组件内使用
• 全局共享自定义指令，通过Vue.directive()在main.js里面进行声明

// Vue.directive('color',{
// 	bind(el,binding){
// 		el.style.color = binding.value
// 	},
// 	update(el,binding){
// 		el.style.color = binding.value
// 	}
// })

Vue.directive('color',function(el,binding){
	console.log("这是全局自定义指令");
	el.style.color = binding.value
})