自定义指令
自定义指令分为全局注册，和局部注册 参考官网api：https://cn.vuejs.org/v2/guide/custom-directive.html
//全局注册
Vue.directive('focus',{
//指令选项
})
//局部注册
var app= new Vue({
el:'#app',
directives:{
focus:{
//指令选项
}
}
})
钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用
钩子函数参数
<!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 src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
function jiebang() {
app.$destroy();
}
Vue.directive("hello", {
bind: function(el, bingind, vnode) {
console.log(bingind.value+"============")
el.style["color"] = bingind.value;
console.log("1-bind");
},
inserted: function() {
console.log("2-insert");zi
},
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: "balck"
},
methods: {
add: function() {
this.message++;
}
}
})
</script>
</html>
运行截图
