vue自定义指令

全局指令

main.js文件中定义

Vue.config.productionTip = false


Vue.directive('colorTwo', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function(el, binding) {
    el.style.color = binding.value;
  }
});

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

在.vue文件中使用

<p v-color-two="'red'">你好</p>

局部自定义指令

在这个需要自定义指令的.vue文件中

<div v-test='name'></div><br>
<input type="text" v-focus>

export default{
  data(){
    return{
      name:'我是名字',
    }
  },
  directives:{
  	test:{
	    inserted: function (el,binding) {// 指令的定义
	       // el为绑定元素，可以对其进行dom操作
	       console.log(binding) //一个对象，包含很多属性属性
	    },
	    bind: function (el, binding, vnode) {
		    el.innerHTML =binding.value
		  }
    },
    // 输入框自动聚焦
    focus:{
      inserted: function(el) {
        el.focus()
      }
    }
  },
}