- practice_5.html
<!--
第8章
第一節 自定義指令
類似於Vue的定義，分全局和局部，局部爲directives 別漏了s
指令定義函數提供了幾個鉤子函數（可選）：
bind：只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數可以定義一個在綁定時執行一次的初始化動作。
inserted：被綁定元素插入父節點時調用（父節點存在即可調用，不必存在於 document 中）。
update：第一次是緊跟在 bind 之後調用，獲得的參數是綁定的初始值，之後被綁定元素所在的模板更新時調用，而不論綁定值是否變化。通過比較更新前後的綁定值，可以忽略不必要的模板更新（詳細的鉤子函數參數見下）。
componentUpdated：被綁定元素所在模板完成一次更新週期時調用。
unbind：只調用一次， 指令與元素解綁時調用。
鉤子函數的參數：(el, binding, vnode, oldVnode)
el：指令所綁定的元素，可以用來直接操作 DOM 。
binding：一個對象，包含以下屬性：
name：指令名，不包含v-的前綴；
value：指令的綁定值；例如：v-my-directive="1+1"，value的值是2；
oldValue：指令綁定的前一個值，僅在update和componentUpdated鉤子函數中可用，無論值是否改變都可用；
expression：綁定值的字符串形式；例如：v-my-directive="1+1"，expression的值是'1+1'；
arg：傳給指令的參數；例如：v-my-directive:foo，arg的值爲 'foo'；
modifiers：一個包含修飾符的對象；例如：v-my-directive.a.b，modifiers的值爲{'a':true,'b':true}
vnode：Vue編譯的生成虛擬節點；
oldVnode：上一次的虛擬節點，僅在update和componentUpdated鉤子函數中可用。
-->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="style_4.css" />
<script src="Vue.js"></script>
</head>
<body>
<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
</body>
<script>
Vue.directive('demo', {
bind: function (el, binding, vnode) {
var s = JSON.stringify
el.innerHTML =
'name: ' + s(binding.name) + '<br>' +
'value: ' + s(binding.value) + '<br>' +
'expression: ' + s(binding.expression) + '<br>' +
'argument: ' + s(binding.arg) + '<br>' +
'modifiers: ' + s(binding.modifiers) + '<br>' +
'vnode keys: ' + Object.keys(vnode).join(', ')
}
})
new Vue({
el: '#hook-arguments-example',
data: {
message: 'hello!'
}
})
</script>
</html>