<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue2.2.js"></script>
</head>
<body>
<div id="app">
<div v-lang="color">{{num}}</div>
<p><button @click="add">add</button></p>
</div>
</body>
<script type="text/javascript">
Vue.directive('lang',function(el,binding){
console.log(el)//標(biāo)簽<div v-lang="color">{{num}}</div>
console.log(binding)//輸出的是一個(gè)對(duì)象obj
el.style='color:'+binding.value//binding.value就是color顏色red。
})
var vm = new Vue({
el:"#app",
data:{
num:10,
color:'red'
},
methods:{
add:function(){
this.num++;
}
}
})
//@程程程
</script>
</html>
el: 指令所綁定的元素究西，可以用來(lái)直接操作DOM卤材。
binding: 一個(gè)對(duì)象遮斥，包含指令的很多信息。
vnode: Vue編譯生成的虛擬節(jié)點(diǎn)扇丛。
利用鉤子函數(shù)：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue2.2.js"></script>
</head>
<body>
<div id="app">
<div v-lang="color">{{num}}</div>
<p><button @click="add">add</button></p>
</div>
<p>
<button onclick='unbind()'>解綁</button>
</p>
</body>
<script type="text/javascript">
function unbind() {
vm.$destroy();//另外起一個(gè)方法解綁
}
Vue.directive('lang', { //五個(gè)注冊(cè)指令的鉤子函數(shù)
bind: function() { //被綁定
console.log('1 - bind');
},
inserted: function() { //綁定到節(jié)點(diǎn)
console.log('2 - inserted');
},
update: function() { //組件更新
console.log('3 - update');
},
componentUpdated: function() { //組件更新完成
console.log('4 - componentUpdated');
},
unbind: function() { //解綁
console.log('5 - bind');
}
})
var vm = new Vue({
el: "#app",
data: {
num: 10,
color: 'red'
},
methods: {
add: function() {
this.num++;
}
}
})
//@程程程
</script>
</html>
1术吗、bind:只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用帆精，用這個(gè)鉤子函數(shù)可以定義一個(gè)綁定時(shí)執(zhí)行一次的初始化動(dòng)作较屿。
2隧魄、inserted:被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（父節(jié)點(diǎn)存在即可調(diào)用，不必存在于document中）隘蝎。
3购啄、update:被綁定于元素所在的模板更新時(shí)調(diào)用，而無(wú)論綁定值是否變化狮含。通過(guò)比較更新前后的綁定值，可以忽略不必要的模板更新曼振。
4几迄、componentUpdated:被綁定元素所在模板完成一次更新周期時(shí)調(diào)用。
5冰评、unbind:只調(diào)用一次映胁，指令與元素解綁時(shí)調(diào)用。
