Vue自定义指令详解

可以使用Vue.directive( dir_name , {} ) 来定义全局自定义指令

也可以使用 directives{ dir_name : {} } 来定义局部自定义指令

 

钩子函数 : 

    bind 

        只调用一次, 当指令第一次绑定在元素上时.

        用来做一次性初始化操作.

 

    inserted

        当绑定元素已插入到父节点时调用.

        也就是说 必定存在父节点.

        但是 它 及它的父节点 未必存在文档中.

 

    update

        在包含该组件的VNode更新后调用该函数.

        可能在其子级更新前调用.

        指令的值可能已更改,可能未更改.最好通过判断新旧值来过滤掉不必要的操作.

 

    componentUpdated

        在包含该组件的VNode 以及 其子节点的VNodes已更新之后 调用.

 

    unbind

        指定从元素上解绑时,调用一次.

 

钩子函数参数 :

• el

            绑定了该指令的元素.

            可以直接操作DOM元素.

 

• binding ( 包含以下属性 )

name 

                        刨除’v-'前缀的指令名 

value 

                        传递给指令的值. e.g. v-s="1+1", value就是2 

oldValue 

                        旧值 , 只在 钩子函数 update 以及 componentUpdated 中可用. 

                        无论值是否改变都可用

expression 

                        表达式的字符串形式.

arg 

                        传递给指令的参数 . e.g. v-s:foo , arg就是 foo 

modifiers 

                        包含修饰符的对象.e.g. v-s.a.b 意味着 modifiers 为 {a : true , b:true}

 

vnode

            vue编译器提供的虚拟节点对象. 详见 VNode API

 

 oldVnode

            之前的虚拟节点对象. 只在钩子函数 update 和 componentUpdated 中可用.

      注意 :  

            这些参数中, 除了 el 以外 , 其他参数都看做是只读参数.即不要修改它们. 

            如果 需要跨钩子 使用它们, 建议使用 dataset 来实现.

指令的参数的值 可以是动态的:

                    <p v-track:left="[dyLeft]"> some text </p>

                    data(){
                        return {
                            dyLeft : 500
                        }
                    }

函数简写:

       由于我们多数情况下 只关注 bind 以及 update , 因此可以这样简写 : 

       Vue.directive('xxx-xxx' , function( el , binding ) {
            el.style.backgroundColor = binding.value ;
        })

对象字面量:

        当指令需要多个值的时候 , 可以传入一个 javascript 对象字面量 .

        当然 , 指令可以接受任何合法的 javascript 表达式.
 

            <div v-demo="{color:’white’ , text : 'hello!'}"

            Vue.directive('demo' , function (el , binding){
                console.log(binding.value.color , binding.value.text);
            })

自定义私有指令

自定义私有指令跟自定义过滤器的套路是一样的，在构造函数里定义

var vm = new Vue({
    el: '#app',
    directives: {
        'color': { //指令名要加上引号
            bind: function (el, binding) {
                el.style.color = binding.value
            }
        }
    }
})