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