vue指令包括 v-model v-if v-for v-show 等Vue自带的指令 ,但是实际开发中有一些需求这些指令不能满足,换一种方式又能实现,但是会比较频繁的使用该方法,我们就可以使用自定义指令来方便快捷的实现。
Vue2自定义指令
vue2的自定义指令有如下几个生命周期
-
bind
:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 -
inserted
:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。 -
update
:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
生命周期钩子接受一下几个参数
el
:指令所绑定的元素,可以用来直接操作 DOM。binding
:一个对象,包含一些信息vnode
:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。oldVnode
:上一个虚拟节点,仅在update
和componentUpdated
钩子中可用。
全局注册(全局注册是直接在man.js文件中挂在到Vue实例上,全局都可以使用)
直接描述对象注册
Vue.directive('test3',{
inserted(el,binding){
console.log(binding.value) //打印出指令传递的参数
el.innerText = '我绑定了test3 全局指令' //修改标签内容
},
})
文件引入形式注册
export default {
inserted(el,binding){
console.log(binding.value)
el.innerText = '我绑定了test4 指令' //修改标签内容
},
}
import test4 from "./directive/test4";
Vue.directive('test4',test4)
局部注册 (在组建内注册,仅限该组建内使用)
export default {
name: 'Home',
directives:{
test2:{
// 指令的所在元素被插入页面时 执行该钩子
inserted(el,binding){
console.log(binding.value)
el.innerText = '我绑定了test2 指令' //修改标签内容
},
},
// 获取输入框焦点
focus:{
inserted(el,binding){
console.log(binding.value)
el.focus() //初始化获取输入框焦点
},
update(el){
el.focus()
}
}
},
}
使用
<!-- 传递一个字符串-->
<button v-test2="'HAHAH'">789</button>
<!-- 传递一个对象-->
<button v-test3="{aa:'132'}">546</button>
<!-- 传递一个对象的属性-->
<button v-test4="man.age">546</button>
效果
Vue3自定义指令
钩子函数 : 同组建生命周期一样 差不多那几个
钩子参数:同vue2一样还是那几个
局部注册
<script setup>
// 在模板中启用 v-focus
const vFocus = {
// 或事件监听器应用前调用
created(el, binding, vnode, prevVnode) {},
// 在元素被插入到 DOM 前调用
beforeMount(el, binding, vnode, prevVnode) {},
// 在绑定元素的父组件 // 及他自己的所有子节点都挂载完成后调用
mounted(el, binding, vnode, prevVnode) {
el.focus() //是输入框获得焦点
},
// 绑定元素的父组件更新前调用
beforeUpdate(el, binding, vnode, prevVnode) {},
// 在绑定元素的父组件 // 及他自己的所有子节点都更新后调用
updated(el, binding, vnode, prevVnode) {},
// 绑定元素的父组件卸载前调用
beforeUnmount(el, binding, vnode, prevVnode) {},
// 绑定元素的父组件卸载后调用
unmounted(el, binding, vnode, prevVnode) {}
}
</script>
<template>
<input v-focus />
</template>
在 <script setup>
中,任何以 v
开头的驼峰式命名的变量都可以被用作一个自定义指令。在上面的例子中,vFocus
即可以在模板中以 v-focus
的形式使用。
全局注册
// 使 v-focus 在所有组件中都可用
createApp(App).directive('test1',{
mounted(el){
el.focus()
}
}).use(router).mount('#app')
使用方式也是同Vue2相同