Vue中的指令 directive

  <label for="">ID:
            <input type="text" name="id" class="form-control" v-model="Id" v-focus/> 
         </label>
         <label for="">Name:
          <input type="text" name="name" class="form-control" v-model="Name" @keyup.enter="add" v-color="'red'"/> 
       </label>
       <input type="button" value="添加" @click="add" class=" btn btn-primary"/>
       <label for="">KeyWords:
        <input type="text" name="KeyWords" class="form-control" v-model="KeyWords" v-cor:dc="''"/> 
     </label>

// 指令分为全局，私有指令
//bind:每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次，一般用来做一些准备初始化工作
//inserted:表示元素插入到DOM完成之后，会立即调用，执行一次
//update:当Vnode更新的时候，会执行update,可能会触发多次，也就是绑定了Vue指令的dom元素发生改变时，这个改变包括很多，比如:样式，值，位置的等等，只要这个元素和vue进行了数据绑定
//componentUpdated:同update一样，当VNode更新时，但在它的回调里面el是改变后的dom
//unbind:元素从DOM删除时触发（仅仅是删除）

//自定义指令v-focus   全局的
Vue.directive("focus",{
bind:function(el){
  //bind 函数里调用focus是无效的，这个钩子函数表示指令被绑到元素上，但是还没有被插入到dom树中去，任何元素，之后再插入到dom之后，才能获得聚焦点
  //在实际运用中，通常我们用到最多的钩子函数只有bind 和inserted,一个是样式操作bind， 一个是js操作insert，
  // 结论：不需要dom,不需要等待dom完成插入，所以和样式相关的操作放在bind内，要操作dom元素，必须dom完成插入后，所以和js相关的操作放在inserted 内


},
inserted:function(el){
  //el 是原生的js dom 元素
  el.focus();  //聚焦
},
update:function(el){

},
componentUpdated:function(el){

},
unbind:function(el){

}

});

//带参数自定义指令

Vue.directive("color",{
  bind:function(el,binding){
    //binding.value 表示传递的值
    el.style.color=binding.value;

  }
});



Vue.directive("cor",{
  bind:function(el,binding){
    //binding.value 表示传递的值
    el.style.color=binding.value;
    var dc=binding.arg;
    console.log(dc);
    if(binding.value==""){
      el.style.color='red';
    }
    else{
      el.style.color=binding.value;
    }
    

  }
});

私有指令


var vm=new Vue({

  el:"#app",
  data:{

    Id:"",
    Name:"",
    KeyWords:"",
    brandlist:[{id:1,name:"奔驰",ctime:new Date()},{id:2,name:"宝马",ctime:new Date()}]
    
  }
    directive:{
      'fontweight':{
        //自定义私有指令
        bind:function(el,binding){
       el.style.fontweight=binding.value;
        }
      },
      'fontsize':{
        bind:function(el,binding){
          el.style.fontSize=parseInt(binding.value)+'px'
        }
      }
    }
    
}
})