【通俗易懂】详解Vue.directive自定义指令是什么，怎么用

什么是自定义指令

一句话：就是你平常在元素上用过的v-bind，v-loading，v-show，v-if,v-model,v-for等等之类的就是自定义的指令，只不过是已经被vue提前配置好了直接可以使用的几个指令。你可以理解为提前封装好的函数类似。

自定义指令的参数和钩子函数

钩子函数：

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
bind：
只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：
被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：
所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。
componentUpdated：
指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：
只调用一次，指令与元素解绑时调用。

钩子函数参数：

指令钩子函数会被传入以下参数：
el 指令所绑定的元素，可以用来直接操作 DOM
binding 一个对象，包含以下属性：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

指令简写：

当你的函数没有写钩子名的时候，默认就是触发bind和update钩子函数。

// 如果你只需要执行绑定的 bind 和 update 两个事件,vue指令定义也配置了简写方式.
Vue.directive('my-color',(el) => {
  el.style.color = 'red'
  el.style.backgroundColor = 'yellow'
})

如何自己写一个自定义指令

Vue.directive：是用来创造一个自定义指令的
‘focus’：这个位置写的是指令的名字，以后你调用就是v-focus
inserted:钩子函数名，代表被绑定元素插入父节点时调用
el：当前操作的dom
binding：一个对象，包含的参数自己看上面
el.focus()：这个意思就是给当前的这个dom添加focus事件

Vue.directive('focus', {
  	// 当绑定元素插入到 DOM 中。
  	inserted: function (el,binding) {
    		// 聚焦元素
    		el.focus();
 	}
});

然后我们到元素上v-focus调用自定义指令就可以用了。

<div id="app">
	<input type="text" v-focus/>
</div>

全局指令

想要全局使用就在main.js内写自定义指令就行。如果要单的那就在组件内直接写自定义指令就行。