自定义指令directive

一、全局注册 （用的比较多）

使用方法：在main.js中写入自定义指令 在所需使用的元素上加上v-(属性名)

1、给input框绑定自动聚焦事件

main.js注册

Vue.directive('focus',{
  inserted(el){
    // console.log(el);
    el.focus()
  }
})

指令的钩子函数

inserted：指令绑定所在的标签，只在指令所在标签插入到网页时执行一次

使用

<input type="text" v-focus>

2、给input改变字体样式

main.js注册

Vue.directive('color',{
  inserted(el,binding){
    // console.log(el);
    // console.log(binding);
    el.style.color=binding.value
  }
})

binding：指令信息

使用

<input type="text" v-focus v-color='cName'>

data () {
  return {
    cName:'yellow'
  }
}