Vue.js中的自定义指令directives

103 阅读 0 评论 68 点赞

我是靠谱客的博主美丽凉面，最近开发中收集的这篇文章主要介绍Vue.js中的自定义指令directives，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。自定义指令，需要声明钩子函数。注册自定义指令也分为注册全局自定义指令和注册局部自定义指令。两者用法相同，局部指令只能在当前组件里面使用。当全局指令和局部指令同名时以局部指令为准。

1. 自定义指令中的钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：bind、inserted、update、componentUpdated和unbind。

bind => 指令被绑定到元素上时执行，只会执行一次
inserted => 被绑定的元素被插入到父节点时执行，只会执行一次
update => 当虚拟DOM被重新渲染时执行
componentUpdated => 当虚拟DOM重新渲染完成后执行
unbind => 指令与元素解绑时调用，只会执行一次

2. 钩子函数中的参数

指令钩子函数会被传入以下参数：el、binding、vnode和oldVnode。

el => 被绑定的DOM对象
binding => 是一个包含了指令的所有属性的对象，例如：name、rawName、value
vnode => Vue 编译生成的虚拟节点
oldVnode => 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

3. 动态指令参数

指令的参数可以是动态的。例如，在 v-mydirective:[argument]="value" 中，argument 参数可以根据组件实例数据进行更新！这使得自定义指令可以在应用中被灵活使用。

下面我们通过一个案例来看一下。

<body>
<div id="app">
{{i}} <button @click="i++">+</button>
<div v-red>Hello</div>
<!-- 动态指令参数：通过改变value值，可以改变参数从而进行数据更新 -->
<div v-color="'pink'">测试</div>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
i: 0
},
directives: {
red: { //自定义red指令，需要声明钩子函数
bind(){
console.log('bind...')
},
inserted(el){
console.log('inserted...', el)
// el.style.color = 'red'
// console.log(el.style)
el.style.color = 'red'
},
update(){
console.log('update....')
},
componentUpdated(){
console.log('componentUpdated...')
},
unbind(){
console.log('unbind...')
}
},
color: {
inserted(el,binding){
console.log(binding)
el.style.color = binding.value
}
}
}
})
</script>
</body>