vue自定义指令directive

自定义指令作用：为了操作底层dom
vue设计理念就是数据驱动dom，不会针对dom进行操作。自定义指令是作者给预留的方案
实际应用-- 可以通过指令知道什么时候dom创建完成， 从而进行 依赖dom的库的初始化工作

指令注册

自定义指令类似于组件，他也有相应的生命周期，注册方式。指令注册分为两种：局部注册和全局注册
全局注册

// 使用Vue.directive 进行全局指令注册。跟组件component类似
// 这里hello是指令名
Vue.directive("hello",{
  inserted(el,binding){
    el.style.background=binding.value
  }
})

局部注册

//在组件中使用directives 进行局部指令注册。跟定义局部组件components类似
directives: {
	// 这里hello是指令名
	"hello": {
		inserted(el,binding){
			el.style.background=binding.value
		}
	}
}

指令用法

首先定义一个指令，其次在页面上引用该指令即可。
html上 使用 v-指令名 引用指定的自定义指令。
定义指令时通常需要配合使用指令生命周期，常用的有inserted，update

<div v-hello=" 'red' " >1111111111111111</div>
<div v-hello=" 'yellow' " >222222222222222</div>
<div v-hello=" mycolor " >333333333333333</div>

Vue.directive("hello",{
  inserted(el,binding){
    console.log("当前指令绑定的节点插入到页面中,就回被执行--指令的生命周期--类似mounted")
    // console.log(el) 这里el得到的是使用该指令的dom元素，即“div”
    // console.log(binding.value) 这里的binding是页面传递过来的值，即“red”
    el.style.background=binding.value
  },
  //指令更新生命周期
  update(el,binding){
    el.style.background=binding.value
  }
})