vue自定义指令简述

1- 为何需要自定义指令

内置指令不满足需求

2- 全局自定义指令，带参数的

知识点tips:
自定义指令提供的钩子函数，
	bind(){//指令第一次绑定到元素时调用，只用一次}
	inserted(){//被绑定元素插入到父节点时调用}
	update(){//组件更新时调用}
	componentUpdated(){//所在组件及子节点全部更新后调用}
	unbind(){//指令与元素解绑时调用}
	钩子函数的参数:
		el：元素,
		binding绑定，
		vnodeVue 编译生成的虚拟节点,
		oldVnode 上一个虚拟节点，仅在 update 和componentUpdated 钩子中可用。)

3- 代码展示

<div id="app">
	<!-- 自定义命令使用：v-命令="值" -->
	<div v-color="{color:'orange'}">自定义指令</div>
</div>

// 全局自定义指令
//语法：Vue.directive('命令',{执行函数})
Vue.directive('color',{
	inserted(el,binding){
		el.style.backgroundColor = binding.value.color
	}
})
new Vue({
	el:'#app',
})

效果图：