大家好,我是
勇宝
,一名前端小学生,最近勇宝
在开发一个自己的网站
,但是不知道猴年马月才能上线呢。大家先期待一波吧!今天呢想来和大家分享一下Vue3
中的自定义指令
这一小块知识点。我会分享一些我工作中经常用到的知识点,内容相对简单,还请大佬们手下留情。
一、自定义指令directive
1. 概述
先来给大家解释一下自定义指令是什么:首先是
自定义
,是说自由定义,那么指令
当前就是一些逻辑
啦,就比如计算机发出一系列指令
大家就可以友好的使用我们的电脑等。它其实和我们Vue中使用的v-model
、v-if
、v-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
实例,我们要用到app
的directive
属性。
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)
}
}
})
对于按钮权限问题,勇宝觉得这种有点不妥,或者说是不优雅,因为我们是通过元素挂载后再去判断是否存留,最好的方案还是使用函数式组件,直接在渲染之前判断元素是否挂载
四、总结
对于
自定义指令
,在我们的工作中使用频率
还是很大的。当然了,我写的文章可能很浅显。好多重要的知识点可能没有写到,或者说我自己实在是资浅
没用到过。也欢迎各位小伙伴们分享
自己的技术点。我一直认为我们
分享知识
,其实也是在提升自己
。因为一个人
确实走的很慢
,如果是一群人一定会走的很稳
。我是
爱勇宝
,一个喜欢分享知识
的前端小学生
,感谢大家的关注
、点赞
与支持
!!!