💂 个人网站:【紫陌】【笔记分享网】
💅 想寻找共同学习交流、共同成长的伙伴,请点击【前端学习交流群】
1.认识自定义指令
在Vue的模板语法中我们学习过各种各样的指令:v-show、v-for、v-model等等,除了使用这些指令之外,Vue 也允许我们来自定义自己的指令。
这篇文章主要讲Vue3指令,想看Vue2指令看我另一篇文章,Vue2自定义指令。文章最后有对比vue2和Vue3的指令区别
2.自定义指令使用场景
- 自定义指令可用于定义复杂的行为或公用的行为。当你想要在多个组件中重用某个复杂的行为或逻辑时,就可以考虑使用自定义指令。
3.自定义指令分为两种
自定义局部指令:组件中通过 directives 选项,只能在当前组件中使用;
自定义全局指令:app的 directive 方法,可以在任意组件中被使用;
4.自定义指令基本使用
需求:当某个元素挂载完成后可以自定获取焦点
- 局部指令
setup语法
选项式写法:
- 全局指令
首先在scr目录下创建direactives
文件夹,每一个指令独自一个文件,并且导出函数。还有一个index.js
文件统一导入所有指令,最后全部导出在main.js
统一注册
这种操作方便管理自定义指令,main.js代码也不会臃肿。
5.指令的生命周期
created
:在绑定元素的 attribute 或事件监听器被应用之前调用;beforeMount
:当指令第一次绑定到元素并且在挂载父组件之前调用;mounted
:在绑定元素的父组件被挂载后调用;beforeUpdate
:在更新包含组件的 VNode 之前调用;updated
:在包含组件的 VNode 及其子组件的 VNode 更新后调用;beforeUnmount
:在卸载绑定元素的父组件之前调用;unmounted
:当指令与元素解除绑定且父组件已卸载时,只调用一次;
mounted
钩子用的多
6.指令的参数和修饰符
指令可以接受一些参数或者修饰符
我们的生命周期中,我们可以通过 bindings
获取到对应的内容:binding是一个一个对象
7.封装日期自定义指令
在开发中,大多数情况下从服务器获取到的都是时间戳;我们需要将时间戳转换成具体格式化的时间来展示,现在封装一个日期的只定义指令,可以综合练习上面的概念。一般在项目中封装的指令基本都是全局指令。所有我就封装一个全局自定义指令
。
效果:
这个指令百搭的,可以直接拿到项目中使用,也有面试中说自己封装的。使用的时候可以根据自己喜欢的格式传不同的指令参数。
核心代码给大家: `JavaScript
import dayjs from 'dayjs'
export default function directiveFormatTime(app) {
app.directive("formatTime", {
mounted(el, bindings) {
// 1.获取时间, 并且转化成毫秒
let timestamp = el.textContent
if (timestamp.length === 10) {
timestamp = timestamp * 1000
}
timestamp = Number(timestamp)
// 2.获取传入的参数
let value = bindings.value
if (!value) {
value = "YYYY-MM-DD HH:mm:ss"
}
// 3.对时间进行格式化
const formatTime = dayjs(timestamp).format(value)
el.textContent = formatTime
}
})
}
`
使用的时候: `HTML
<template>
<div class="app">
<h2 v-formatTime="'YYYY/MM/DD'">{{ timestamp }}</h2>
<h2 v-formatTime:YYYY-MM-DD>{{ 1551111166666 }}</h2>
</div>
</template>
<script setup>
const timestamp = 1231355453
</script>
`
8.Vue2和Vue3的区别
- 注册方式不同
- 在 Vue 2 中,可以通过
Vue.directive()
方法或者在组件的directives
选项中注册自定义指令。 - 在 Vue 3 中,只能通过
app.directive()
方法或者在组件的directives
选项中注册自定义指令。其中,app
是创建 Vue 应用时返回的应用实例。
- 钩子函数名称不同
bind
:只会调用一次,指令 第一次 绑定到元素时会调用inserted
:被绑定元素插入父节点时调用 。update
:元素第一次绑定不会触发,绑定的值发生更新触发,可能发生在其子节点更新之前。componentUpdated
:指令所在组件的 VNode 及其子 VNode 全部更新后调用。unbind
:只调用一次,指令与元素解绑时调用。
- 在 Vue 3 中,自定义指令可以定义以下几个钩子函数:
created
:在绑定元素的 attribute 或事件监听器被应用之前调用;beforeMount
:当指令第一次绑定到元素并且在挂载父组件之前调用;mounted
:在绑定元素的父组件被挂载后调用;beforeUpdate
:在更新包含组件的 VNode 之前调用;updated
:在包含组件的 VNode 及其子组件的 VNode 更新后调用;beforeUnmount
:在卸载绑定元素的父组件之前调用;unmounted
:当指令与元素解除绑定且父组件已卸载时,只调用一次;
- 钩子函数参数不同
-
在 Vue 2 中,钩子函数的参数有以下几个:
el
binding
vnode
oldVnode
-
在 Vue 3 中,钩子函数的参数有以下几个:
el
binding
vnode
prevVNode
nextVNode
其中,prevVNode
和 nextVNode
分别代表前一个和后一个虚拟节点。
- 指令函数返回值不同
在 Vue 2 中,自定义指令的钩子函数可以返回以下几种值:
undefined
Object
Function
在 Vue 3 中,自定义指令的钩子函数可以返回以下几种值:
void
Object
Function
Promise
最后
如果觉得对你有帮助就点点赞呗~~~