vue的自定义指令

1.定义
除了vue官方提供的v-text、v-for、v-model、v-if等常用指令，vue还允许开发者自定义指令。
2.自定义指令主要分为私有自定义指令和全局自定义指令
私有自定义指令

<template>
  <div>
   <div v-color="color">测试自定义指令</div>
   <div v-color="'pink'">测试</div>
  </div>
</template>

<script>

export default {
  data() {
	  return {
		color:'red'
	  }
  },
  directives:{
  	// 定义名为color的指令，指向一个配置对象
  	color:{
  		// 当指令第一次被绑定到元素上的时候，会立即触发bind函数
  		// 形参中的el表示当前指令所绑定到的那个DOM对象
  		bind(el,binding) {
			el.style.color = binding.value
			console.log(el,binding)
  			console.log("触发了")
  		},
		// bind函数只调用一次，当dom更新时bind函数不会触发。
		// update函数会在每次dom更新时调用
		update(el,binding) {
			el.style.color = binding.value
		}
  	}
	// 函数简写：如果bind和update函数中的逻辑完全相同，则对象格式的自定义指令可以简写成韩式格式
	// color(el,binding) {
	// 	el.style.color = binding.value
	// }
  }
}
</script>

<style>
</style>

全局自定义指令

// 全局自定义指令
// 参数1：表示全局自定义指令名字
// 参数2：对象，用来接收指令参数值
Vue.directive('color',function(el,binding){
	el.style.color = binding.value
})