当前位置: 首页 > news >正文

Vue.js 自定义指令:从零开始创建自己的指令

vue使用directive

  • 前言
  • vue2使用
  • vue3使用

前言

关于使用自定义指令在官网中是这样描述的

vue2:对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。

vue3:自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。

在 Vue.js 中使用自定义指令(directive)可以带来许多好处,包括但不限于这些:

  • 代码复用:自定义指令可以封装一些常用的 DOM 操作,使得这些操作可以在多个组件中复用,减少代码冗余。
  • 简化模板:通过自定义指令,可以将一些复杂的 DOM 操作从模板中移除,使模板更加简洁和易读。
  • 增强功能:自定义指令可以提供一些 Vue 框架本身不直接支持的功能,比如自动聚焦、拖拽、动画等。
  • 更好的封装性:自定义指令可以将 DOM 操作的逻辑封装在指令内部,使得组件的代码更加清晰和模块化。
  • 更细粒度的控制:自定义指令可以绑定到特定的 DOM 元素或属性,提供更细粒度的控制,比如只对某个元素应用某些效果。
  • 生命周期钩子:自定义指令提供了生命周期钩子函数,可以在不同的阶段执行特定的逻辑。

vue2使用

在vue2使用使用directive根据官网介绍可以这样使用

// 注册一个全局自定义指令 `v-focus`
import Vue from 'vue'
Vue.directive('focus', {// 当被绑定的元素插入到 DOM 中时……inserted: function (el) {// 聚焦元素el.focus()}
})

然后在页面中绑定

<input v-focus>

这样就能 聚焦元素 的效果
在这里插入图片描述

当然在项目中可以更加优化
在这里插入图片描述
这里单独创建一个文件夹来存放自定义指令的js文件并使用index导出引入的文件, 这里拿两个实例来举例子 ,一个是复制文本的copy.js文件,一个控制权限的role.js文件。

main.js 文件这样集中引入指令文件

import Vue from 'vue'
import App from './App.vue'
import directives from './directives';Vue.config.productionTip = falseObject.keys(directives).forEach(name => {Vue.directive(name, directives[name]);
});new Vue({render: h => h(App),
}).$mount('#app')

index.js 文件导出引入的指令

import copy from './copy';
import role from './role';export default {copy,role
};

copy.js文件

import { Message } from 'element-ui';
let timer = null;
const copy = {bind(el, binding) {if (binding.value) {el.addEventListener('click', () => copyClick(el, binding));}},
};
const copyClick = (el, binding) => { if (timer) clearTimeout(timer);timer = setTimeout(async () => { await navigator.clipboard.writeText(binding.value);Message.success('复制成功!');timer = null;}, 200);
};
export default copy;

role.js文件

const role = {bind (el, binding) { //只有包含了2的dom元素才显示if (!binding.value.includes(2)) {el.style.display = 'none';}},
};export default role;

最后在文件中使用

<template><div class="hello"><el-button type="primary" round v-copy="text">点击我复制</el-button><li v-role="[1]">这是一号dom</li><li v-role="[1,2]">这是二号dom</li><li v-role="[1,2,3]">这是三号dom</li></div>
</template><script>
export default {name: 'HelloWorld',data () {return {text: 'hello world'}}
}
</script>

最后看实际效果
请添加图片描述
这就是基础的使用,
关于生命周期钩子函数
官网提供了像bindinsertedupdatecomponentUpdatedunbind等,可以在不同的阶段执行特定的逻辑。
更多的参考 vue2指令官网

vue3使用

在vue3中使用指令与vue2写法有点不同
官网是这样使用的

const app = createApp({})// 使 v-focus 在所有组件中都可用
app.directive('focus', {/* ... */
})// 使用的组件
<template><input v-focus />
</template>

这里的举例跟vue2的一样,不过项目是用vite+ts搭建的
在这里插入图片描述
单独创建一个文件夹来存放自定义指令的js文件并使用index导出引入的文件, 这里拿两个实例来举例子 ,复制文本的copy.ts文件和控制权限的role.ts文件。

main.ts 文件这样集中引入指令文件

import { createApp } from 'vue' 
import App from './App.vue' 
import directives from './directives';const app = createApp(App)for (const [name, directive] of Object.entries(directives)) {app.directive(name, directive);
}   app.mount('#app')

在index.ts 文件中导出

import copy from './copy';
import role from './role';export default {copy,role
};

copy.ts文件

import { DirectiveBinding } from 'vue';
import { ElMessage } from 'element-plus';
let timer: any = null;
const copy = {mounted(el: HTMLElement, binding: DirectiveBinding) {if (binding.value) {el.addEventListener('click', () => copyClick(el, binding));}},
};
const copyClick = (el: HTMLElement, binding: DirectiveBinding) => { if (timer) clearTimeout(timer);timer = setTimeout(async () => {// 复制文本await navigator.clipboard.writeText(binding.value);ElMessage.success('复制成功!');timer = null;}, 200);
};
export default copy;

role.ts文件

import { DirectiveBinding } from 'vue';
const role = {mounted(el: HTMLElement, binding: DirectiveBinding) {//包含了 2 的元素才显示if (!binding.value.includes(2)) {el.remove();}},
};
export default role;

使用的vue件

<script setup lang="ts">
import { ref } from "vue";
const text = ref("这是赋值的值12345");
</script><template><el-button type="primary" round v-copy="text">点击我复制</el-button><li v-role="[1]">这是一号dom</li><li v-role="[1,2]">这是二号dom</li><li v-role="[1,2,3]">这是三号dom</li>
</template>

最后看效果
请添加图片描述
最后关于生命周期钩子函数,官网给出了这些
在这里插入图片描述
更多的扩展使用可以参考官网
vue3指令官网

相关文章:

Vue.js 自定义指令:从零开始创建自己的指令

vue使用directive 前言vue2使用vue3使用 前言 关于使用自定义指令在官网中是这样描述的 vue2:对普通 DOM 元素进行底层操作&#xff0c;这时候就会用到自定义指令。 vue3:自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。 在 Vue.js 中使用自定义指令&#xf…...

策略模式

定义&#xff1a;即定义一系列的算法&#xff0c;算法1&#xff0c;算法2&#xff0c;...&#xff0c;算法n&#xff0c;把他们封装起来&#xff0c;使他们可以相互替换。 优点&#xff1a;使得一个类的行为或者其算法可以在运行时改变&#xff0c;而且使用Context类的人在外部…...

性能优化--CPU微架构

一 指令集架构 Intel X86, ARM v8, RISC-V 是当今广泛使用的指令架构的实例。 大多数现代架构可以归类为基于通用寄存器的加载和存储型架构&#xff0c;在这种架构下&#xff0c;操作数倍明确指定&#xff0c;只能使用夹在和存储指令访问内存。除提供基本的功能之外&#xff0c…...

在 Sanic 框架中实现高效内存缓存的多种方法

在使用 Sanic 框架开发 Web 应用时&#xff0c;我们可以通过内存缓存来提升应用的性能&#xff0c;减少对数据库或其他外部服务的频繁请求。下面提供一些在 Sanic 中实现内存缓存的基本方法。 使用 Python 内置的 functools.lru_cache 如果你的缓存需求比较简单&#xff0c;且…...

Mac 环境变量配置基础教程

MacOS 下一般配置有多个 Shell&#xff0c;如 Bash、ZSH 等&#xff0c;不同的 Shell 其创建 Terminal 时使用的环境变量配置文件也不尽相同&#xff0c;但一般都会读取并执行脚本文件 /etc/profile 来加载系统级环境变量&#xff0c;而用户级别环境变量&#xff0c;一般都会在…...

Qt如何屏蔽工具栏(QToolBar)自动折叠功能

最近发现Qt上工具栏一行放不下的时候&#xff0c;会自动折叠起来。当用户点击展开功能的小三角按钮时&#xff0c;工具栏会展开成多行。这个功能本身没什么问题&#xff0c;但是当工具栏展开的时候&#xff0c;鼠标光标一旦不小心移动到了工具栏外面&#xff0c;这时候&#xf…...

【数据分享】中国统计摘要(1978-2024)

数据介绍 《中国统计摘要&#xff08;1978 - 2024&#xff09;》犹如一部浓缩的历史巨著&#xff0c;承载着中国几十年来的发展轨迹与辉煌成就。它是由国家统计局精心编纂的重要资料&#xff0c;为我们全方位地展现了中国在经济、社会、民生等各个领域的深刻变革。 这本统计摘…...

unity运行状态下移动、旋转、缩放控制模型

demo地址&#xff1a;https://download.csdn.net/download/elineSea/90017272 unity2021以上版本用下面的插件 https://download.csdn.net/download/elineSea/90017305...

《 C++ 点滴漫谈 一 》C++ 传奇:起源、演化与发展

摘要 C 是一门兼具高效性与灵活性的编程语言&#xff0c;自上世纪 80 年代诞生以来&#xff0c;已经深刻影响了计算机科学与技术的发展。从 Bjarne Stroustrup 的初步构想到如今遍布各大领域&#xff0c;C 经历了语言规范的不断完善与功能的持续扩展。本文详细回顾了 C 的起源…...

Github客户端工具github-desktop使用教程

文章目录 1.客户端工具的介绍2.客户端工具使用感受3.仓库的创建4.初步尝试5.本地文件和仓库路径5.1原理说明5.2修改文件5.3版本号的说明5.4结合码云解释5.5版本号的查找 6.分支管理6.1分支的引入6.2分支合并6.3创建测试仓库6.4创建测试分支6.5合并分支6.6合并效果查看6.7分支冲…...

自然语言处理:第六十三章 阿里Qwen2 2.5系列

本人项目地址大全&#xff1a;Victor94-king/NLP__ManVictor: CSDN of ManVictor 项目地址: QwenLM/Qwen2.5: Qwen2.5 is the large language model series developed by Qwen team, Alibaba Cloud. 官网地址: 你好&#xff0c;Qwen2 | Qwen & Qwen2.5: 基础模型大派对&a…...

springboot中设计基于Redisson的分布式锁注解

如何使用AOP设计一个分布式锁注解&#xff1f; 1、在pom.xml中配置依赖 <dependency><groupId>org.springframework</groupId><artifactId>spring-aspects</artifactId><version>5.3.26</version></dependency><dependenc…...

C++初阶学习第十一弹——list的用法和模拟实现

目录 一、list的使用 二.list的模拟实现 三.总结 一、list的使用 list的底层是双向链表结构&#xff0c;双向链表中每个元素存储在互不相关的独立节点中&#xff0c;在节点中通过指针指向 其前一个元素和后一个元素。 常见的list的函数的使用 std::list<int> It {1,…...

共享单车管理系统项目学习实战

前言 Spring Boot Vue前后端分离 前端&#xff1a;Vue&#xff08;CDN&#xff09; Element axios(前后端交互) BaiDuMap ECharts(图表展示) 后端&#xff1a;Spring Boot Spring MVC(Web) MyBatis Plus(数据库) 数据库:MySQL 验证码请求...

详细解读TISAX汽车信息安全评估

TISAX汽车信息安全评估是一个针对汽车行业的信息安全评估和交换机制&#xff0c;以下是对其的详细解读&#xff1a; 一、背景与目的 TISAX是在德国汽车工业协会&#xff08;VDA&#xff09;的支持下开发的&#xff0c;旨在确保跨公司边界的汽车行业信息安全评估的认可度&…...

gitlab cicd搭建及使用笔记(二)

cicd之gitlab-runner使用要点 官方链接&#xff1a;https://docs.gitlab.com/runner/ 附历史文章链接 https://blog.csdn.net/qq_42936727/article/details/143624523?spm1001.2014.3001.5501 gitlab-runner常用命令及解释 gitlab-runner verify 容器内&#xff0c;检查注…...

鸿蒙实战:页面跳转传参

文章目录 1. 实战概述2. 实现步骤2.1 创建鸿蒙项目2.2 编写首页代码2.3 新建第二个页面 3. 测试效果4. 实战总结 1. 实战概述 本次实战&#xff0c;学习如何在HarmonyOS应用中实现页面间参数传递。首先创建项目&#xff0c;编写首页代码&#xff0c;实现按钮跳转至第二个页面并…...

Spring Security SecurityContextHolder(安全上下文信息)

在本篇博客中&#xff0c;我们将讨论 Spring Security 的 SecurityContextHolder 组件&#xff0c;包括其实现方式、关键特性&#xff0c;并通过实际示例进行说明。 理解 SecurityContextHolder SecurityContextHolder 是 Spring Security 存储当前安全上下文详细信息的地方。…...

蓝队技能-应急响应篇日志自动采集日志自动查看日志自动化分析Web安全内网攻防工具项目

知识点&#xff1a; 1、应急响应-系统日志收集-项目工具 2、应急响应-系统日志查看-项目工具 3、应急响应-日志自动分析-项目工具 演示案例-蓝队技能-工具项目-自动日志采集&自动日志查看&自动日志分析 系统日志自动采集-观星应急工具(Windows系统日志) SglabIr_Co…...

Python JSON 数据解析教程:从基础到高级

Python JSON 数据解析教程&#xff1a;从基础到高级 引言 在现代编程中&#xff0c;JSON&#xff08;JavaScript Object Notation&#xff09;已成为数据交换的标准格式。它以易于阅读和编写的文本格式存储和传输数据&#xff0c;广泛应用于Web API和配置文件中。Python提供了…...

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...