vue2.0自定义指令(2)

1.自定义指令

html:代码

<div id="app">
        <div v-test="color" id="demo">
            {{num}}
        </div>
        <div>
            <button @click="add">添加</button>
        </div>
    </div>

js:代码

var app=new Vue({
    el:'#app',
     data:{
         num:10,
         color:'green'
         },
        methods:{
          add:function(){
             this.num++;
          }
      }
  })
//自定义指令   v-directive

   
   

    
    Vue
    
    .
    
    directive
    
    (
    
    'test'
    
    ,
    
    function
    
    (
    
    el
    
    ,
    
    binding
    
    ,
    
    vnode
    
    )
    
    {
   
   
   
   

    
            
    
    el
    
    .
    
    style
    
    =
    
    'color:'
    
    +
    
    binding
    
    .
    
    value
    
    ;
   
   
   
   

    
    }
    
    )
    
    ;
   
   
   
   

    
    

   
   
   
   

    
    其中el:指令绑定的元素，可以直接用来操作DOM，binding:一个对象，包含name等等的属性；vnode:虚拟节点
   
   
   
   

    
    

   
   
   
   

    
    2.自定义指令的生命周期
   
   
   
   

    
    
    
    
bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
unbind:只调用一次，指令与元素解绑时调用。