<!DOCTYPE html>
<html>
<head>
<title>Vue.directive自定义指令</title>
</head>
<body>
<div id="app">
<div v-getcolor="color" id="demo">
{{num}}
</div>
<div>
<button @click="add">Add</button>
</div>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
// 自定义指令中传递的三个参数
// el: 指令所绑定的元素，可以用来直接操作DOM。
// binding: 一个对象，包含指令的很多信息。
// vnode: Vue编译生成的虚拟节点。
//定义一个getcolor全局属性，不可以写成getColor
Vue.directive('getcolor',function(el,binding,vnode){
el.style='color:'+binding.value
console.log(binding)
})
var app=new Vue({
el:'#app',
data:{
num:10,
color:'red'
},
methods:{
add:function(){
this.num++
}
}
})
</script>
</body>
</html>
binding信息
image.png
自定义指令的生命周期
自定义指令有五个生命周期（也叫钩子函数），分别是 bind,inserted,update,componentUpdated,unbind
bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
unbind:只调用一次，指令与元素解绑时调用。
