Vue3自定义指令的那些事(手把手教学)

大家好,我是勇宝,一名前端小学生,最近勇宝在开发一个自己的网站,但是不知道猴年马月才能上线呢。大家先期待一波吧!今天呢想来和大家分享一下Vue3中的自定义指令这一小块知识点。我会分享一些我工作中经常用到的知识点,内容相对简单,还请大佬们手下留情。

一、自定义指令directive

1. 概述

先来给大家解释一下自定义指令是什么:首先是自定义,是说自由定义,那么指令当前就是一些逻辑啦,就比如计算机发出一系列指令大家就可以友好的使用我们的电脑等。它其实和我们Vue中使用的v-modelv-ifv-show很像,我们可以使用v-model就可以实现数据的双向绑定等等。只不过这些指令Vue开发人员指令给我们造好了'轮子'

直接可以使用的指令,我称为Vue的默认指令

2. 简单使用

先给大家写一个例子,让大家来感受一下

js 复制代码
<script setup>
// 在模板中启用 v-focus
const vFocus = {
  mounted: (el) => el.focus()
}
</script>

<template>
  <input v-focus />
</template>

大家看不懂没关系,我们接下来一点点讲。

二、局部自定义指令

我给大家举个例子,可能会有些不妥:

比如我们的老板有这么一个需求,我们的课程网站有好多的分类(Vue、React、Angular等等),我想给每个类别加一个不同的背景色用来提升用户体验。此时对于刚入行的勇宝来说是一头雾水......

后端返回的数据结构

js 复制代码
data: {
    code: 200,
    course_category: [
        { id: 1, name: 'Vue', bgColor: 'blue' },
        { id: 2, name: 'React', bgColor: 'green' },
        { id: 3, name: 'Angular', bgColor: 'orange' }
    ]
}

1. 案例示范

js 复制代码
<template>
    <div class="course-category">
        <button v-for="item in course_category" :key="item.id">{{ item.name }}</button>
    </div>
</template>
<script>
// 比如前面是一系列的请求...,这个bgColor应该前端生成,这里我偷懒就不是我们本次讲解的重点
const { course_category } = data // 解构一下

const vColor = (el, binding) => {
    const { value } = binding
    el.style.background = value
}
</script>

这个代码块高亮可以显示的不太好,大家多多担待。

这是自定义指令的一种简单写法,需要注意的一点是这个命名,开头是v,后面首字母大写

2. 标准写法

js 复制代码
const vColor = {
    mounted: (el, binding) => {
        const { value } = binding
        el.style.background = value
    }
}

这种写法类似于Vue中的钩子函数,除了上边的mounted,还有其他钩子函数

3. 自定义指令生命周期

在 Vue3 中,自定义指令的钩子函数主要有如下七种:

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

4. 生命周期参数

  • el :指令绑定的元素,我们可以直接来操作DOM
  • binding :来接收我们通过自定义指令传递过来的各种参数
    • name:指令名,不包括 v- 前缀。
    • value :指令传递参数,例如例子v-color="blue",此时value的值为blue
    • expression:字符串形式的指令表达式。例如 v-directive="1 + 1" 中,表达式为 "1 + 1"。
    • arg :传给指令的参数,可选。例如 v-hasPermission:[name]="'zhangsan'" 中,参数为 "name"。
  • vnode:Vue 编译生成的虚拟节点。
  • oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

三、全局注册

有时我们需要在多个地方使用到自定义指令,如果每个组件中都写一遍,后期的维护成本太大了,所以我们就用到了全局自定义指令,这样就方便我们使用啦,就比如按钮权限功能。

1. 案例示范

html 复制代码
<button v-hasPermission="['admin']">删除用户</button>

比如这个按钮,规定只有admin角色才可以操作。其他角色不进行显示。

2. 全局注册自定义指令

在我们的main.[ts/js]文件中,我们通过createApp生成的app实例,我们要用到appdirective属性。

js 复制代码
// main.ts
const app = createApp()
// 其他一系列操作(vue-router、vuex)......
// 注册hasPermission指令
app.directive('hasPermission', {
    mounted: (el, binding, vNode) => {
        const { value } = binding
        if (!value.includes('admin')) {
            // 如果角色不是admin就移除
            el.parentNode && el.parentNode.removeChild(el)
        }
    }
})

对于按钮权限问题,勇宝觉得这种有点不妥,或者说是不优雅,因为我们是通过元素挂载后再去判断是否存留,最好的方案还是使用函数式组件,直接在渲染之前判断元素是否挂载

四、总结

对于自定义指令,在我们的工作中使用频率还是很大的。当然了,我写的文章可能很浅显。好多重要的知识点可能没有写到,或者说我自己实在是资浅没用到过。也欢迎各位小伙伴们分享自己的技术点。

我一直认为我们分享知识,其实也是在提升自己。因为一个人确实走的很慢,如果是一群人一定会走的很稳

我是爱勇宝,一个喜欢分享知识前端小学生,感谢大家的关注点赞支持!!!

相关推荐
前端小巷子6 分钟前
CSS单位完全指南
前端·css
SunTecTec1 小时前
Flink Docker Application Mode 命令解析 - 修改命令以启用 Web UI
大数据·前端·docker·flink
涵信1 小时前
第十一节:性能优化高频题-响应式数据深度监听问题
javascript·vue.js·性能优化
拉不动的猪2 小时前
前端常见数组分析
前端·javascript·面试
小吕学编程2 小时前
ES练习册
java·前端·elasticsearch
Asthenia04122 小时前
Netty编解码器详解与实战
前端
袁煦丞2 小时前
每天省2小时!这个网盘神器让我告别云存储混乱(附内网穿透神操作)
前端·程序员·远程工作
Mr.app3 小时前
vue mixin混入与hook
vue.js
一个专注写代码的程序媛3 小时前
vue组件间通信
前端·javascript·vue.js
一笑code3 小时前
美团社招一面
前端·javascript·vue.js