自定义指令

一.自定义指令的使用

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

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

二.构造函数

1） bind 

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

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

  2）  inserted

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

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

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

  3）  update

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

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

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

  4）  componentUpdated

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

5）    unbind

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

局部的自定义指令，只能在当前组件的模板中去用

三.钩子函数的参数

1）el

            绑定了该指令的元素.

            可以直接操作DOM元素.

2）binding ( 包含以下属性 )

                name 

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

3）value 

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

4）oldValue 

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

                无论值是否改变都可用

5）expression 

                 表达式的字符串形式.

6）arg 

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

 

7）modifiers 

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

8）vnode

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

9）oldVnode

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

四.实例

// 这些参数中, 除了 el 以外 , 其他参数都看做是只读参数.即不要修改它们. 
// 如果 需要跨钩子 使用它们, 建议使用 dataset 来实现.
// 指令的参数的值 可以是动态的:
<p v-track:left="[dyLeft]"> some text </p>
 
      data(){
             return {
                  dyLeft : 500
              }
      }

Vue.direction('aabb',{
    inserted(el.obj){
        console.log(obj.value)
        el,style.color=obj.value
    },
    update(el.obj){
        console.log(a)    
    }   
})
var VM = new Vue({
    el:'#box',
    data:{
        color1:'yellow'
    }
})