Vue自定义指令

Vue自定义指令

---

• 什么是自定义指令

比如v-show元素的显示/隐藏，vue允许我们自己设置自定义的指令

• 自定义指令传递的参数

el: 指令所绑定的元素，可以用来直接操作DOM。 
binding: 一个对象，包含指令的很多信息。 
vnode: Vue编译生成的虚拟节点。

• 怎么使用自定义指令？

例如：自定义一个指令 v-rainbow 主要实现的功能是：实现彩虹字体
用法：<h2 v-rainbow>{{blog.title}}</h2>

//全局注册：
Vue.directive("rainbow",{
	inserted(el,binding,vnode){
		el.style.color="#"+Math.random().toString(16).slice(2,8)
	}
})

//局部注册
directives:{
	//彩虹字体功能
	"rainbow":{
		inserted(el,binding,vnode){
			el.style.color="#"+Math.random().toString(16).slice(2,8)
		}
	},
	//防抖 在有限时间内执行一次，最后一次执行
	debounce: {
		inserted: function (el, binding) {
			let timer;
			el.addEventListener('click', () => {
				if (timer) {
					clearTimeout(timer)
				}
				timer = setTimeout(() => {
					console.log(binding)
					binding.value() //执行函数
				}, 300)
			})
		}
   }
}

//在组件中使用 v-rainbow 就可以显示彩虹字体

//2.v-debounce = "search" search函数

• 自定义指令的钩子函数

  • bind ：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  • inserted : 绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
  • update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
  • componentUpdated : 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  • unbind：只调用一次，指令与元素解绑时调用。

更多请了解：
vue：https://cn.vuejs.org/v2/guide/custom-directive.html
自定义节流指令：https://my.oschina.net/u/3970421/blog/2988151
15个自定义指令：https://my.oschina.net/liuyuantao/blog/3130325