vue常用特性之自定义指令

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/poppy995/article/details/98176125

自定义指令

---

自定义指令的语法规则

使用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({})中传入的对象中添加的这个属性