Vue 自定义指令(directive)

气温骤降，南京又开始了降温 速冻模式，这谁受得了。

进入主题：
vue自带了很多的指令，v-once、v-model、v-for等，这些指令对我们的代码带来了很多的帮助，也让他们的编写简单了不少，但是不可能什么问题都帮我们解决，那有些我们想要方便又没有vue自带指令的时候，我们就可以去自己写一个。
vue：无中生有
我：顺手牵羊
directive也是分全局指令和局部指令，我们先看全局指令：
直接用Vue.directive注册了一个叫v-red的全局指令，后面括号中的第一个值就是使用了这个指令的标签，后面的值暂时用不到。

Vue.directive('red',(el,data)=>{
	el.style.color = 'red'
})

我们在页面标签的开头去写上我们刚刚注册的指令

<p v-red>自定义指令</p>

这个时候我们再去看页面效果

他的字体变成了红色。
局部指令的写法和全局写法没什么区别

new Vue({
	el:"#app",
	directives:{
		red:(el,data)=>{
			el.style.color = "red"
		}
	}
})

大家仔细看会发现，局部指令比全局指令少了个s，当我们想定义多个全局指令的时候，我们就需要写多个Vue.directive，而局部指令则是在directive对象内继续写函数，比如

new Vue({
	el:"#app",
	directives:{
		red:(el,data)=>{
			el.style.color = "red"
		},
		blue:(el,data)=>{
			el.style.color = "blue"
		}，
	}
})

那我们要是想有传值该怎么办，就像这样

<p v-color="red">自定义指令</p>

这时候我们就可以用到data值了，但是！！！
v-color后的red并不是字符串，而是一个传过去的变量名，就像我们写**v-model=‘str’**一样，
我们需要在data里写一个red，才能正常获取，这边那局部指令举例

new Vue({
	el:"#app",
	data(){
		return {
			red:'red'
		}
	},
	directives:{
		color:(el,data)=>{
			el.style.color = data.value
		}
	}
})

data对象里有个value，它的值就是v-color='red’传过来的data中red相应的值。
那我们不想传这个变量怎么办

<p v-color="'red'">自定义指令</p>

在拿一个引号包裹住，表示传一个字符串过去。

结束，拜拜