自定义指令有5个生命周期(也叫作钩子函数)分别是bind ,inserted,update,componentUpdate,unbind
bind 只调用一次，指令第一次绑定到元素时候调用，用这个钩子可以定义一个绑定时执行一次的初始化动作。inserted:被绑定的元素插入父节点的时候调用(父节点存在即可调用，不必存在document中)update: 被绑定于元素所在模板更新时调用，而且无论绑定值是否有变化，通过比较更新前后的绑定值，忽略不必要的模板更新componentUpdate :被绑定的元素所在模板完成一次更新更新周期的时候调用unbind: 只调用一次，指令与元素解绑的时候调用
例子如下（需引入vue.js）
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0"><title>Title</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><span v-hello="color3">{
{message}}</span><button @click="add"> 点击开始加1</button><button onclick="jiebang()">解绑</button></div>
</body>
<script>//解绑vuefunction jiebang(){app.$destroy();}Vue.directive("hello",{bind:function(el,bingind,vnode){//只调用一次，指令第一次绑定到元素时候调用， //用这个钩子可以定义一个绑定时执行一次的初始化动作。el.style["color"] = bingind.value;console.log("1-bind");},inserted:function(){//被绑定的元素插入父节点的时候调用(父节点存在即可调用，不必存在document中)console.log("2-inserted");},update:function(){//被绑定于元素所在模板更新时调用，而且无论绑定值是否有变化//通过比较更新前后的绑定值，忽略不必要的模板更新console.log("3-update");},componentUpdated:function(){//被绑定元素所在模板完成一次更新周期时调用console.log('4 - componentUpdated');},unbind:function(){//只调用一次，指令与元素解绑时调用。console.log('5 - unbind');}})var app = new Vue({el:"#app",data:{message:10,color3:"red"},methods:{add:function(){this.message++;}}})
</script>
</html>