Vue.directive自定义指令
<p>自定义类似 <code>v-on</code> 的指令,用于对页面元素的操作. 如action类权限</p>
<p><a href="https://segmentfault.com/a/1190000018767046" title="教程">教程</a></p>
<h3>1. 定义全局自定义指令</h3>
<pre><code>Vue.directive('my-directive', {
bind: function () {},
inserted: function () {},
update: function () {},
componentUpdated: function () {},
unbind: function () {}
})
Vue.directive('focus', {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
el.focus(); // 聚焦元素
}
})</code></pre>
<h3>2. 5个指令钩子函数：</h3>
<p><strong>bind</strong>: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
<strong>inserted</strong>: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
<strong>update</strong>:被绑定元素所在的模板更新时调用，而不论绑定值是否变化。
<strong>componentUpdated</strong>: 被绑定元素所在模板完成一次更新周期时调用。
<strong>unbind</strong>: 只调用一次，指令与元素解绑时调用。</p>
<h3>3. 钩子函数参数</h3>
<p>钩子函数被赋予了以下参数：</p>
<p><strong>el</strong> : 指令所绑定的元素，可以用来直接操作 DOM</p>
<p><strong>binding</strong> : 一个对象，包含以下属性：</p>
<ul>
<li><strong><code>name</code></strong>: 指令名，不包括 v- 前缀。</li>
<li><strong><code>value</code></strong>: 指令的绑定值， 例如： v-my-directive=“1 + 1”, value 的值是 2。</li>
<li><strong><code>oldValue</code></strong>: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。</li>
<li><strong><code>expression</code></strong>: 绑定值的字符串形式。 例如 v-my-directive=“1 + 1” ， expression 的值是 “1 + 1”。</li>
<li><strong><code>arg</code></strong>: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 “foo”。</li>
<li><strong><code>modifiers</code></strong>: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。</li>
</ul>
<p><strong>vnode</strong>: Vue 编译生成的虚拟节点，查阅 VNode API 了解更多详情。</p>
<p><strong>oldVnode</strong>: 上一个虚拟节点，仅在 <code>update</code> 和 <code>componentUpdated</code> 钩子中可用。</p>
<h3>4. 简写bind和update</h3>
<pre><code>// 这种写法 相当于把代码写到了bind和update中去
Vue.directive('focus', function (el, binding) {
el.focus(); // 聚焦元素
}
})</code></pre>