注冊局部指令

vue directive 在注冊局部指令時，是通過在組件 options 選項中設(shè)置 directives 屬性。如下：

directives: {focus: {// 指令的定義inserted: function (el) {el.focus()}}
}

在模板中的任何元素上都可以使用新的 v-focus property，如下：

<input v-focus>

自定義鉤子函數(shù)

自定義鉤子函數(shù)有兩種寫法：函數(shù)形式（簡寫）和對象形式（完整形式）。

示例：

<template><div class="content"><div id="hook-arguments-example" v-demo:foo.a.b="message"></div></div>
</template><script>
export default {name: 'Content',data () {return {message: 'hello!'}},directives: {demo: {bind: function (el, binding, vnode) {var s = JSON.stringifyel.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(', ')}}}
}
</script>

頁面效果：

有時候不需要其他鉤子函數(shù)時，可以簡寫函數(shù)。

指令函數(shù)可接受所有合法的 JavaScript 表達(dá)式，以下實例傳入了 JavaScript 對象：

<template><div class="demo-content"><p v-demo='msg'></p></div>
</template><script>
export default {name: 'Content',data () {return {msg: { color: 'green', text: 'hello,world!' }}},directives: {demo: {bind: function (el, binding) {// 簡寫方式設(shè)置文本及背景顏色el.innerHTML = binding.value.textel.style.backgroundColor = binding.value.color}}}
}
</script>
<style lang='less'>
.demo-content {width: 600px;p {margin-top: 30px;}
}
</style>

簡寫形式只在兩個時機觸發(fā)：

1、指令與元素成功綁定時（元素沒有被插入頁面）；

2、指令所在的模板被重新解析時。

頁面效果：

直接向創(chuàng)建的 Vue 實例的 directives 字典屬性添加鍵值對，鍵值對即需要添加的自定義指令及對應(yīng)鉤子函數(shù)字典對象。鍵值對可以有多個，對應(yīng)多個自定義指令。如下：

<template><div class="demo-content"><div id="hook-arguments-example" v-demo:foo.a.b="message"></div><p v-bgcolor='backgroundColor'>click me,it will change background color</p></div>
</template><script>
export default {name: 'Content',data () {return {message: 'hello!',backgroundColor: 'blue'}},directives: {demo: {bind: function (el, binding, vnode) {var s = JSON.stringifyel.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(', ')}},bgcolor: {bind: function (el, binding) {el.addEventListener('click', function () {el.style.backgroundColor = binding.value})}}}
}
</script>
<style lang='less'>
.demo-content {width: 600px;p {margin-top: 30px;}
}
</style>

頁面效果：

自定義指令使用注意點：

• 指令名稱不可以使用 camelCase 命名，多個單詞的指令名稱使用 kebab-case （定義時需要加引號）
• 指令的回調(diào)函數(shù)中 this 不指向 vue
• 自定義指令使用時加 v- ，定義時不需要加 v-