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)
        }
    }
})

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

四、总结

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

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

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

相关推荐
码蜂窝编程官方10 分钟前
【含开题报告+文档+PPT+源码】基于SpringBoot+Vue的虎鲸旅游攻略网的设计与实现
java·vue.js·spring boot·后端·spring·旅游
gqkmiss10 分钟前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃16 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰20 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye26 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm28 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x1 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You1 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js