vue常用特性之自定义指令

自定义指令

---

自定义指令的语法规则

使用vue的directive这个api进行添加

---

获取元素焦点

Vue.directive('focus', {
     
  inserted: function(el) {
     
    //el表示指令所绑定的元素
    //获取元素焦点
    el.focus();
  }
})

函数被称为指令钩子函数

---

自定义指令的用法

<input type="text" v-focus>

---

带参数的自定义指令

改变元素背景色

Vue.directive('color', {
     
  inserted: function(el,binding) {
     
    //el表示指令所绑定的元素
    //获取元素焦点
    //binding是一个对象里的value值就是vm示例对象中的data的值
    el.style.backgroundColor = binding.value.color;
  }
})
var vm = new Vue({
     
  el:'#app',
  data:{
     
    msg:{
     
      color:'blue'
    }
  },
  methods:{
     
    hamdle:function(){
     

    }
  }
})

---

指令的用法

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

---

局部指令

directives:{
     
  focus:{
     
    //指令的定义
    inserted：function(el){
     
      el.focus()
    }
  }
}

代码示例
改变元素背景色

var vm = new Vue({
     
  el:'#app',
  data:{
     
    msg:{
     
      color:'blue'
    }
  },
  methods:{
     
    hamdle:function(){
     

    }
  },
  directives:{
     
    'color', {
     
       bind: function(el,binding) {
     
        //el表示指令所绑定的元素
        //获取元素焦点
        //binding是一个对象
        el.style.backgroundColor = binding.value.color;
       }
      }
    }
  })

是在Vue({})中传入的对象中添加的这个属性