<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<div id="app">
<div v-zlt="color">
{{num}}
</div>
<button @click="jia">加</button>
<button onclick="unbind()">解绑</button>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
function unbind() {
vm.$destroy()
}
Vue.directive("zlt", {
bind: function(el, binding, vnode) {
console.log("1 - bind-绑定")
el.style = "color:" + binding.value
},
inserted: function() {
console.log("2 - inserted-被插入")
},
update: function(el) {
console.log("3 - update-更新")
el.style = "color:green"
},
componentUpdated: function() {
console.log("4 - componentUpdated-更新完成")
},
unbind: function() {
console.log("5 - unbind-解绑")
}
})
var vm = new Vue({
el: "#app",
data: {
num: 0,
color: "red"
},
watch: {
},
mounted: function() {
},
methods: {
jia: function() {
this.num++
}
}
});
</script>
</body>
</html>