应用场景

element-ui中有个模态框用的是它自定义的指令v-loading，想要同样的效果可以用Vue核心组件中的自定义指令模块。

看代码：

<template>
    <div>
        <div v-test:user.isman.ischinese = "123"><input type="text" value="1234"></div>
    </div>
</template>

<script>
    // @ is an alias to /src
    export default {
        directives: {
            test: {
                bind(el, binding, vnode, oldVnode) {
                    el.innerHTML = '<h1>指令内容</h1>' + binding.expression
                    console.log(el)
                    console.log(binding)
                    console.log(vnode)
                    console.log(oldVnode)
                },
                inserted() {
                    console.log('inserted')
                },
                update() {
                    console.log('update')
                },
                componentUpdated() {
                    console.log('componentUpdated')
                },
                unbind() {
                    console.log('unbind')
                }
            }
        }
    }
</script>

关键字：directives
directives是一个对象，里面包含了各个指令，每个指令也是个对象，可以在里面自定义配置（比如上面代码中的test{...}，test在模板里面的表现就是v-test）。

每个指令的解析

生命周期（钩子，Hook）

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

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

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

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

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

重点解析下bind

接受4个参数，分别是el, binding, vnode, oldnode。
el：指令所绑定的元素，可以用来直接操作 DOM 。
binding: 一个对象。包含了下面7个属性。

• arg: 接受的参数，上面代码中指的就是user。
• def: 包含所有钩子函数。
• modifiers: 修饰符，上面的代码里指的就是{ischinese: true, isman: true}//修饰符的含义还不是很清楚，待补充。
• name: 指令的名字，“v-”后面接着的部分。
• rawName: 整个指令不包括值的部分，上面的代码指v-test:user.isman.ischinese。
• value: 指令的值，上面的代码指“123”。

vnode: Vue 编译生成的虚拟节点.(可以看官方文档，还没仔细了解)。
oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

注意：除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

若有表达不清楚或者其他意见欢迎留言。

【完】