自定义指令
<h4>Vue自定义指令</h4>
<hr />
<ul>
<li>什么是自定义指令</li>
</ul>
<p>比如v-show元素的显示/隐藏，vue允许我们自己设置自定义的指令</p>
<ul>
<li>自定义指令传递的参数</li>
</ul>
<pre><code>el: 指令所绑定的元素，可以用来直接操作DOM。
binding: 一个对象，包含指令的很多信息。
vnode: Vue编译生成的虚拟节点。</code></pre>
<ul>
<li>怎么使用自定义指令？</li>
</ul>
<p>例如：自定义一个指令 v-rainbow 主要实现的功能是：实现彩虹字体
用法：<code><h2 v-rainbow>{{blog.title}}</h2></code></p>
<pre><code class="language-javascript">//全局注册：
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函数
</code></pre>
<ul>
<li>
<p>自定义指令的钩子函数</p>
<ul>
<li>bind ：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。</li>
<li>inserted : 绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。</li>
<li>update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。</li>
<li>componentUpdated : 指令所在组件的 VNode 及其子 VNode 全部更新后调用。</li>
<li>unbind：只调用一次，指令与元素解绑时调用。</li>
</ul>
</li>
</ul>
<p>vue链接：<a href="https://cn.vuejs.org/v2/guide/custom-directive.html">https://cn.vuejs.org/v2/guide/custom-directive.html</a>
自定义指令：节流函数实例：<a href="https://my.oschina.net/u/3970421/blog/2988151">https://my.oschina.net/u/3970421/blog/2988151</a>
15个自定义指令：<a href="https://my.oschina.net/liuyuantao/blog/3130325">https://my.oschina.net/liuyuantao/blog/3130325</a></p>