使用Vue3自定义指令,让你的应用更具交互性

406 阅读5分钟

💂 个人网站:【紫陌】【笔记分享网】
💅 想寻找共同学习交流、共同成长的伙伴,请点击【前端学习交流群】

1.认识自定义指令

在Vue的模板语法中我们学习过各种各样的指令:v-show、v-for、v-model等等,除了使用这些指令之外,Vue 也允许我们来自定义自己的指令。

这篇文章主要讲Vue3指令,想看Vue2指令看我另一篇文章,Vue2自定义指令文章最后有对比vue2和Vue3的指令区别

2.自定义指令使用场景

  1. 自定义指令可用于定义复杂的行为或公用的行为。当你想要在多个组件中重用某个复杂的行为或逻辑时,就可以考虑使用自定义指令。

3.自定义指令分为两种

自定义局部指令组件中通过 directives 选项,只能在当前组件中使用;

自定义全局指令app的 directive 方法,可以在任意组件中被使用;

4.自定义指令基本使用

需求:当某个元素挂载完成后可以自定获取焦点

  1. 局部指令

setup语法 image.png

选项式写法:

image.png

  1. 全局指令

首先在scr目录下创建direactives文件夹,每一个指令独自一个文件,并且导出函数。还有一个index.js文件统一导入所有指令,最后全部导出在main.js统一注册

image.png

这种操作方便管理自定义指令,main.js代码也不会臃肿。

5.指令的生命周期

  • created:在绑定元素的 attribute 或事件监听器被应用之前调用;
  • beforeMount:当指令第一次绑定到元素并且在挂载父组件之前调用;
  • mounted:在绑定元素的父组件被挂载后调用;
  • beforeUpdate:在更新包含组件的 VNode 之前调用;
  • updated:在包含组件的 VNode 及其子组件的 VNode 更新后调用;
  • beforeUnmount:在卸载绑定元素的父组件之前调用;
  • unmounted:当指令与元素解除绑定且父组件已卸载时,只调用一次;

mounted钩子用的多

6.指令的参数和修饰符

指令可以接受一些参数或者修饰符

image.png

我们的生命周期中,我们可以通过 bindings 获取到对应的内容:binding是一个一个对象

image.png

7.封装日期自定义指令

在开发中,大多数情况下从服务器获取到的都是时间戳;我们需要将时间戳转换成具体格式化的时间来展示,现在封装一个日期的只定义指令,可以综合练习上面的概念。一般在项目中封装的指令基本都是全局指令。所有我就封装一个全局自定义指令

image.png 效果:

image.png

这个指令百搭的,可以直接拿到项目中使用,也有面试中说自己封装的。使用的时候可以根据自己喜欢的格式传不同的指令参数。

核心代码给大家: `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的区别

  1. 注册方式不同
  • 在 Vue 2 中,可以通过 Vue.directive() 方法或者在组件的 directives 选项中注册自定义指令。
  • 在 Vue 3 中,只能通过 app.directive() 方法或者在组件的 directives 选项中注册自定义指令。其中,app 是创建 Vue 应用时返回的应用实例。
  1. 钩子函数名称不同
    • bind:只会调用一次,指令 第一次 绑定到元素时会调用
    • inserted:被绑定元素插入父节点时调用 。
    • update:元素第一次绑定不会触发,绑定的值发生更新触发,可能发生在其子节点更新之前。
    • componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
    • unbind:只调用一次,指令与元素解绑时调用。
  • 在 Vue 3 中,自定义指令可以定义以下几个钩子函数:
    • created:在绑定元素的 attribute 或事件监听器被应用之前调用;
    • beforeMount:当指令第一次绑定到元素并且在挂载父组件之前调用;
    • mounted:在绑定元素的父组件被挂载后调用;
    • beforeUpdate:在更新包含组件的 VNode 之前调用;
    • updated:在包含组件的 VNode 及其子组件的 VNode 更新后调用;
    • beforeUnmount:在卸载绑定元素的父组件之前调用;
    • unmounted:当指令与元素解除绑定且父组件已卸载时,只调用一次;
  1. 钩子函数参数不同
  • 在 Vue 2 中,钩子函数的参数有以下几个:

    • el
    • binding
    • vnode
    • oldVnode
  • 在 Vue 3 中,钩子函数的参数有以下几个:

    • el
    • binding
    • vnode
    • prevVNode
    • nextVNode

其中,prevVNodenextVNode 分别代表前一个和后一个虚拟节点。

  1. 指令函数返回值不同

在 Vue 2 中,自定义指令的钩子函数可以返回以下几种值:

  • undefined
  • Object
  • Function

在 Vue 3 中,自定义指令的钩子函数可以返回以下几种值:

  • void
  • Object
  • Function
  • Promise

最后

如果觉得对你有帮助就点点赞呗~~~