1. 除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。
2. 添加一个自定义指令，有两种方式：
- 通过 Vue.directive() 函数注册一个全局的指令。
- 通过组件的 directives 属性，对该组件添加一个局部的指令。
3. 创建全局指令
需要传入指令名称以及一个包含指令钩子函数的对象，该对象的键即钩子函数的函数名，值即函数体，钩子函数可以有多个。
Vue.directive('self_defined_name',{
bind:function(el,binding){
//do someting
},
inserted: function(el,binding){
//do something
},
}4. 创建局部指令
直接向创建的 Vue 实例的 directives 字典属性添加键值对，键值对即需要添加的自定义指令及对应钩子函数字典对象。键值对可以有多个，对应多个自定义指令。
new Vue({
el:'#app',
directives:{
self_defined_name1:{
bind:function(el,binding){
//do something
}
inserted:function(el,binding){
//do something
},
}
self_defined_name2:{
bind:function(el,binding){
//do something
}
inserted:function(el,binding){
//do something
},
}
}
}) 5. 有时候我们不需要其他钩子函数，我们可以简写函数，如下格式：
Vue.directive('runoob', function (el, binding) {
// 设置指令的背景颜色
el.style.backgroundColor = binding.value.color
})6. 指令函数可接受所有合法的 JavaScript 表达式，以下实例传入了 JavaScript 对象：
<div id="app">
<div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>
</div>
<script>
Vue.directive('runoob', function (el, binding) {
// 简写方式设置文本及背景颜色
el.innerHTML = binding.value.text
el.style.backgroundColor = binding.value.color
})
new Vue({
el: '#app'
})
</script>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/73279.html
