Vue学习笔记 —— 自定义指令（directive）

1、使用情况
      有的情况下，仍然需要对普通的DOM元素进行底层操作，此时会使用自定义指令。

    例子：
        当需要在页面加载，输入框自动获取焦点时。

        //注册一个全局自定义指定 'v-focus'
        Vue.directive('focus', {
            //当被绑定的元素插入到DOM中时...
            inserted: function (el) {
                //聚焦元素
                el.focus()
            }
        })
        new Vue({
            el: "#app"
        })

        自定义指令注册完成后，只需在模板中添加自定义属性即可！
        

        //注册局部指令，在组件中接收一个directives的选项即可。
        directives: {
            focus: {
                // 指令的定义
                inserted: function (el) {
                el.focus()
                }
            }
        }

2、钩子函数

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

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

    · inserted: 被绑定元素插入父节点时调用。

    · update: 所在组件的 VNode更新时调用，但是可能发生在其子 VNode更新之前。

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

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

3、钩子函数参数

    指令钩子参数会被传入以下参数：

    · 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 钩子中可用。

 

    例子：
    //注册一个全局自定义指定 'v-focus'
    Vue.directive('demo', {
        bind: function (el, binding, vnode) {
            var s = JSON.stringify
            el.innerHTML =
                'name:' + s(binding.name) + '
' +
                'value:' + s(binding.value) + '
' +
                'expression:' + s(binding.expression) + '
' +
                'argument:' + s(binding.argument) + '
' +
                'modifiers:' + s(binding.modifiers) + '
' +
                'vnode keys:' + Object.keys(vnode).join(', ')
        }
    })

    new Vue({
        el: "#app",
        data() {
            return {
                message: "Hello"

            }
        }
    })

    模块结构为：
    

        

        
    

4、函数简写
     很多时候，bind 和 update 时触发相同行为，而不关心其他钩子。

    比如：
    Vue.directive('color-watch',function(el,binding){
        el.style.backgroundColor = binding.value
    })

5、对象字面量

     如果指令需要传多个值，可以传入一个JavaScript对象字面量。
     ！！指令函数可以接受所有合法的JavaScript表达式。

    例如：
    //注册一个全局自定义指令
    Vue.directive('demo', function (el, binding) {
        console.log(binding.value.color)
        console.log(binding.value.text)
    })

    new Vue({
        el: "#app",
        data() {
            return {
                test: {
                    'color': 'white',
                    'text': 'hello'
                }
            }
        }
    })

    模块中添加v-demo: