1. 定义

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。当开发人员有的情况下，仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

1）局部指令

new Vue({
    directives: {
        指令名：配置对象
    }
});
//或
new Vue({
    directives: {
        指令名：函数
    }
});

2）全局指令

Vue.directive(指令名，配置对象)
Vue.directive(指令名，回调函数)

3）配置对象常用的3个回调

• bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
• inserted 被绑定元素插入父节点时调用
• update 所在组件的 VNode 更新时调用
• componentUpdated 指令所在组件的 VNode 及其子 VNode 全部更新后调用
• unbind 只调用一次，指令与元素解绑时调用

4）回调参数

• el 指令所绑定的元素，可以用来直接操作 DOM
• binding 一个属性对象
• vnode Vue 编译生成的虚拟节点
• oldVnode 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

2. 使用

需求一：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍

<div id='root'>
    <h2>当前的n值是：<span v-text="n"></span></h2>
    <h2>放大10倍后的n值是：<span v-big="n"></span></h2>
    <button @click="n++">点我你+1</button>
</div>
<script>
//自定义指令（全局）
Vue.directive('big',function(element,binding) {
    element.innerText = binding.value * 10;
});

new Vue({
    el: '#root',
    data: {
        n: 1
    },
    //自定义指令（局部）
    directives: {
        //第一种写法：函数
        //big函数何时被调用：
        //1. 指令与元素成功绑定时 2.指令所在的模板被重新解析时
        big(element, binding) {
            // element 元素（真实DOM元素）
            // binding 绑定对象
            element.innerText = binding.value * 10;
        }
    }
});
</script>

需求二：定义一个v-fbind指令，和b-bind功能类似，但是可以让其所绑定的input元素默认获取焦点

<div id='root'>
    <input type="text" v-fbind:value="n">
</div>
<script>
    //自定义指令（全局）
    Vue.directive('fbind',{
        //指令与元素成功绑定时
        bind(element,binding) {
            console.log('bind')
            element.value = binding.value;
        },
        //指定所在元素被插入页面时
        inserted(element,binding) {
            console.log('inserted')
            element.focus();
        },
        //指令所在模板被重新解析时
        update(element,binding) {
            console.log('update')
            element.value = binding.value;
        }
    });

    new Vue({
        el: '#root',
        data: {
            n: 1
        },
        //自定义指令（局部）
        directives: {
            //第二种写法：对象
            fbind: {
                //指令与元素成功绑定时
                bind(element,binding) {
                    console.log('bind')
                    element.value = binding.value;
                },
                //指定所在元素被插入页面时
                inserted(element,binding) {
                    console.log('inserted')
                    element.focus();
                },
                //指令所在模板被重新解析时
                update(element,binding) {
                    console.log('update')
                    element.value = binding.value;
                }
            }
        }
    });
</script>

备注：

• 指令定义时不加-，但使用时要加-
• 指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名