vue自定义指令

自定义指令建议用于dom的操作或者样式的修改，例如：按钮权限隐藏、防抖节流、点击放大缩小操作、鼠标聚焦、下拉菜单、图片懒加载、集成第三方插件 。 当使用自定义指令直接修改value值时绑定v-model的值也不会同步更新，如必须修改可以在自定义指令中使用keydown事件，在vue组件中使用change事件，回调中修改vue数据。全局定义：Vue.directive("focue",{})，局部定义：directives:{focus:{}}

基本的创建自定义指令语法:

Vue.directive('focus',{
    inserted:function(el){
      //获取元素焦点
     el.focus();
		}
})

自定义指令的使用

<input type="text" v-focus>

带参数的自定义指令

Vue.directive('color',{
    inserted:function(el,binding){
        //binding表示传递过来的参数
        el.style.backgroundColor=binding.value.color;
    }
})

自定义指令的使用

<input type="text" v-color='{color:"orange"}' />

// 自定义全局指令 v-focus，为绑定的元素自动获取焦点：
Vue.directive('focus', {
      inserted: function (el) { 
       // inserted 表示被绑定元素插入父节点时调用
        el.focus();
      }
});
// 自定义局部指令 v-color 和 v-font-weight，为绑定的元素设置指定的字体颜色和字体粗细：
directives: {
  color: { 
    // 为元素设置指定的字体颜色
     bind(el, binding) {
     el.style.color = binding.value;
  }
},
    'font-weight': function (el, binding2) { 
     // 自定义指令的简写形式，等同于定义了 bind 和 update 两个钩子函数
      el.style.fontWeight = binding2.value;
  }
}
//自定义指令使用
<input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900">