vue中有很多指令，在vue中，我们也可以自己定义一些指令，来方便开发，自定义指令到底有什么用？使用自定义指令我们可以在自定义指令里面放一些样式，这样当使用一些公共的样式时，就可以直接使用自定义指令来方便开发，实现一次开发，多次使用的目的。
下面我们就看一下如何自定义指令
[javascript] view plain copy
<script>
Vue.directive("自定义指令的名称",function(el,binding){
el.style.color = "red";
el.onclick = function(){
binding.value++;
el.innerHTML = binding.value;
}
});
new Vue({
el:"#app",
data:{
num:1
}
})
</script>
[html] view plain copy
<p id="app">uuuu
<p v-自定义指令名称="num"> {{num}} </p>
</p>
其中，directive的第一个参数是自定义指令的名称，第二个参数是一个函数，函数中有两个参数，第一个参数是自定义指令所加的元素,在这里指的是
[html] view plain copy
<p v-自定义指令名称="num"> {{num}} </p>,第二个参数上有vue实例中的data数据，也有自定义指令的名称,也有生命周期中的update和bind。经过以上步骤，基本上自定义指令的代码已经写完。
[html] view plain copy
这里要注意的是，<span style="color:#ff0000;">在directive中添加点击事件，是没有办法更改vue实例中的data属性的值，要想使页面内容在点击时发生变化，只能操作dom元素</span>
[html] view plain copy
<span style="color:#ff0000;">
</span>
自定义指令的声明周期
[html] view plain copy
Vue.directive("my",{
bind:function(){
console.log("bind");
},
insert:function(){
console.log("insert");
},
update:function(){
console.log("update");
},
conponentUpdated:function(){
console.log("conponentUpadte");
},
unbind:function(){
console.log("unbind");
}
})
new Vue({
el:"#app",
data:{
num:0
}
})
bind，是将自定义指令绑定到dom元素上
insert，是将虚拟的dom元素和指令添加到要绑定的元素上
update，是在数据更新的时候触发
conponentUpdated，数据更新后执行
unbind，解绑自定义指令，会销毁vue实例
upadte一般用放一些外部执行函数
bind中一般用来对属性或者样式来进行操作
