在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。

官方文档：自定义指令 — Vue.js (vuejs.org) (opens new window)

自定义全局指令

/* 通过在全局Vue对象上调用directive方法
格式
Vue.directive("指令名称"， {
    生命周期钩子函数名称： function (el, obj) {
        // el:被绑定的元素
        // obj:指令被绑定时,传递的参数
    }
})

0.自定义全局指定可以被任何一个Vue实例挂载的模板使用
1.在定义的时候，指令名称不需要添加v- 
2.指令需要挂载到vue的生命周期钩子函数上，所以在自定指令的时候需要确定在该生命周期能获取在需要的元素
3.生命周期详解
bind：只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置
inserted：被绑定元素插入父节点时调用
... */

Vue.directive("color", {
    bind: function (el, obj) {
        el.style.color = obj.value
    }
})
Vue.directive("focus", {
    inserted: function (el) {
        el.focus();
    }
})
let vue = new Vue({
    el: '#app',
});

<div id="app">
    <p v-color="'red'">我是P标签</p>
    <input type="text" v-focus>
</div>

自定义局部指令

/* 通过在Vue实例对象的directives属性添加
格式
new Vue({
    el: '模板ID',
    directives: {
        "指令名称": {
            生命周期钩子函数名称: function (el, obj) {}
        }
    }
});

0.自定义局部指令只能在对应的Vue实例挂载的模板使用
1.在定义的时候，指令名称不需要添加v- 
2.指令需要挂载到vue的生命周期钩子函数上，所以在自定指令的时候需要确定在该生命周期能获取在需要的元素
3.生命周期详解
bind：只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置
inserted：被绑定元素插入父节点时调用
... */
let app1 = new Vue({
    el: '#app1',
    directives: {
        "color": {
            bind: function (el, obj) {
                el.style.color = obj.value
            }
        }
    }
});
let app2 = new Vue({
    el: '#app2',
});

<div id="app1">
    <p v-color="'red'">我是P标签</p>
</div>

<!--该模板不能使用v-color-->
<div id="app2">
    <p v-color="'red'">我是P标签</p>
</div>

钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

• unbind：只调用一次，指令与元素解绑时调用。