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

VUE——自定义指令

news 来源：原创 2025/8/11 5:44:46

Vue自定义指令概述

Vue自定义指令可以封装一些 dom 操作，扩展额外功能。它们允许开发者直接对DOM元素进行低层次操作，自定义指令可以响应Vue的响应式系统，从而在数据变化时触发相应的DOM更新。

自定义指令语法

自定义指令的常用钩子函数：

inserted 被绑定元素插入父节点时调用的钩子函数
update 指令值修改时调用的钩子函数

自定义指令的参数：

el 表示被绑定了指令的那个 dom 元素，这个el 参数，是一个原生的 JS 对象，所以 Vue 自定义指令可以用来直接和 DOM 打交道
binding 是一个对象，它包含以下属性：name、value、oldValue、expression、arg、modifiers

注意：在使用指令的时候，一定要先注册，再使用，否则会报错使用指令语法： v-指令名。

如：<input type="text" v-focus/>

注册指令时不用加v-前缀，但使用时一定要加v-前缀

全局注册

//在main.js中
Vue.directive('指令名', {"inserted" (el) {// 可以对 el 标签，扩展额外功能el.focus()}
})

局部注册

//在Vue组件的配置项中
directives: {"指令名": {inserted () {// 可以对 el 标签，扩展额外功能el.focus()}}
}

自定义指令实例

color 指令

实现一个 color 指令 - 传入不同的颜色, 给标签设置文字颜色

1.在绑定指令时，可以通过“等号”的形式为指令绑定具体的参数值

<div v-color="color">我是内容</div>

2.通过 binding.value 可以拿到指令值，指令值修改会触发 update 函数

directives: {color: {inserted (el, binding) {el.style.color = binding.value},update (el, binding) {el.style.color = binding.value}}
}

v-loading指令

封装一个 v-loading 指令，实现加载中的效果

1.准备一个 loading类，通过伪元素定位，设置宽高，实现蒙层

2.开启关闭 loading状态（添加移除蒙层），本质只需要添加移除类即可

3.结合自定义指令的语法进行封装复用

<template><div class="main"><div class="box"><ul><li v-for="item in list" :key="item.id" class="news"><div class="left"><div class="title">{{ item.title }}</div><div class="info"><span>{{ item.source }}</span><span>{{ item.time }}</span></div></div><div class="right"><img :src="item.img" alt=""></div></li></ul></div> </div>
</template><script>
// 安装axios =>  yarn add axios || npm i axios
import axios from 'axios'// 接口地址：http://hmajax.itheima.net/api/news
// 请求方式：get
export default {data () {return {list: [],isLoading: false,isLoading2: false}},async created () {// 1. 发送请求获取数据const res = await axios.get('http://hmajax.itheima.net/api/news')setTimeout(() => {// 2. 更新到 list 中，用于页面渲染 v-forthis.list = res.data.data}, 2000)}
}
</script><style>
.loading:before {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: #fff url('./loading.gif') no-repeat center;
}.box2 {width: 400px;height: 400px;border: 2px solid #000;position: relative;
}.box {width: 800px;min-height: 500px;border: 3px solid orange;border-radius: 5px;position: relative;
}
.news {display: flex;height: 120px;width: 600px;margin: 0 auto;padding: 20px 0;cursor: pointer;
}
.news .left {flex: 1;display: flex;flex-direction: column;justify-content: space-between;padding-right: 10px;
}
.news .left .title {font-size: 20px;
}
.news .left .info {color: #999999;
}
.news .left .info span {margin-right: 20px;
}
.news .right {width: 160px;height: 120px;
}
.news .right img {width: 100%;height: 100%;object-fit: cover;
}
</style>

VUE——自定义指令

Vue自定义指令概述 Vue自定义指令可以封装一些 dom 操作，扩展额外功能。它们允许开发者直接对DOM元素进行低层次操作，自定义指令可以响应Vue的响应式系统，从而在数据变化时触发相应的DOM更新。自定义指令语法自定义指令的常用钩子函数&am…...

编程日记 2025/8/11 5:44:46

Redis协议与异步方式

1.redis pipeline 通过一次发送多次请求命令，为了减少网络传输时间。注意：pipeline 不具备事务性。 2.redis 事务事务：用户定义一系列数据库操作，这些操作视为一个完整的逻辑处理工作单元，要么全部执行，…...

编程日记 2025/8/10 21:34:23

systemd vs crontab：Linux 自动化运行系统的全面对比

在 Linux 系统运维和开发中，任务调度与服务管理是不可或缺的一环。无论是定期备份、日志轮转，还是启动后台服务，自动化机制都能极大地提高系统的可靠性与效率。两种最常用的自动化工具是： crontab：传统的基于时间的任…...

编程日记 2025/8/11 11:30:59

Centos离线安装mysql、redis、nginx等工具缺乏层层依赖的解决方案

Centos离线安装mysql、redis、nginx等工具缺乏层层依赖的解决方案引困境yum-utils破局引前段时间，有个项目有边缘部署的需求，一台没有的外网的Centos系统服务器，需要先安装jdk，node，mysql，reids&#xf…...

编程日记 2025/8/11 11:34:03

观测云：安全、可信赖的监控观测云服务

引言近日，“TikTok 遭欧盟隐私监管机构调查并处以 5.3 亿欧元”一案，再次引发行业内对数据合规等话题的热议。据了解，仅 2023 年一年就产生了超过 20 亿美元的 GDPR 罚单。这凸显了在全球化背景下，企业在数据隐私保护方面所面临…...

编程日记 2025/8/11 11:34:04

el-table计算表头列宽，不换行显示

1、在utils.js中封装renderHeader方法 2、在el-table-column中引入： 3、页面展示：...

编程日记 2025/8/11 11:33:26

多智能体学习CAMEL-调用api

可选模型范围在ModelScope中的模型库中选择推理 API-Inference ，里面的模型都可以选择，我们可以体验到最新的使用DeepSeek-R1数据蒸馏出的Llama-70B模型。 1.2.2 使用API调用模型这里我们使用CAMEL中的ChatAgent模块来简单调用一下模型，…...

编程日记 2025/8/11 11:31:26

奥威BI：AI+BI深度融合，重塑智能AI数据分析新标杆

在数字化浪潮席卷全球的今天，企业正面临着前所未有的数据挑战与机遇。如何高效、精准地挖掘数据价值，已成为推动业务增长、提升竞争力的核心议题。奥威BI，作为智能AI数据分析领域的领军者，凭借其创新的AIBI融合模式，正…...

编程日记 2025/8/11 11:33:28

SM2Utils NoSuchMethodError: org.bouncycastle.math.ec.ECFieldElement$Fp.＜init

1，报错图示 2，报错原因： NoSuchMethodError 表示运行时找不到某个方法，通常是编译时依赖的库版本与运行时使用的库版本不一致。错误中的 ECFieldElement$Fp. 构造函数参数为 (BigInteger, BigInteger)，说明代码期望使…...

编程日记 2025/8/11 11:32:43

Spring Boot 中 MongoDB @DBRef注解适用什么场景？

在 Spring Boot 中使用 MongoDB 时，DBRef 注解提供了一种在不同集合（collections）的文档之间建立引用关系（类似于关系型数据库中的外键）的方式。它允许你将一个文档的引用存储在另一个文档中，并在查询时自动…...

编程日记 2025/8/11 11:31:27

PDF生成模块开发经验分享

在日常的项目开发中，PDF文档的生成是一个常见的需求。无论是用于申报单、审批结果通知书还是其他业务相关的文档输出，一个高效且灵活的PDF生成功能都是不可或缺的。本文将基于我使用Java（Spring Boot）和iText库开发PDF生成模块的经…...

编程日记 2025/8/11 11:32:42

Music AI Sandbox：打开你的创作新世界

AI 和音乐人的碰撞其实，Google 早在 2016 年就启动了一个叫 Magenta 的项目，目标是探索 AI 在音乐和艺术创作上的可能性。一路走来，他们和各种音乐人合作，终于在 2023 年整出了这个 Music AI Sandbox，并且通过 YouTub…...

编程日记 2025/8/8 20:19:10

RISC-V入门资料

以下是获取 RISC-V 相关资料的权威渠道和推荐资源，涵盖技术文档、开发工具、社区支持等： 1. 官方资料 RISC-V 国际基金会官网 https://riscv.org 核心文档：ISA 规范（包括基础指令集（RV32I/RV64I）、扩展指令…...

编程日记 2025/8/11 11:31:25

私服与外挂：刑事法律风险的深度剖析

首席数据官高鹏律师团队编著在当今数字化时代，网络游戏产业蓬勃发展，然而与之相伴的私服与外挂现象却屡禁不止，且其背后隐藏着严重的刑事法律风险。作为一名律师，有必要在此对私服与外挂相关的刑事问题进行深入解读，以…...

编程日记 2025/8/11 11:34:44

sherpa-ncnn：Endpointing（断句规则）

更多内容：XiaoJ的知识星球目录 1. Endpointing (端点)1.1 规则11.2 规则21.3 规则3 1. Endpointing (端点) 我们有三条端点检测规则。如果激活了其中任何一个，我们假设检测到终端节点。 . 1.1 规则1 规则 1 计算尾随静默的持续时间。如果大于用户指…...

编程日记 2025/8/10 18:35:20

谷云科技iPaaS技术实践：集成平台如何解决库存不准等问题

在当今竞争激烈的商业环境中，电商平台、仓库系统以及门店系统之间的数据不同步问题，如同一颗隐形的 “定时炸弹”，严重威胁着企业的生存与发展。尤其是在库存管理方面，订单系统显示商品已售出，但仓库却无货可发&#x…...

编程日记 2025/8/11 11:31:00

负载均衡算法解析（一）NGINX

文章目录 1. 核心数据结构：算法的基石1.1 负载均衡节点结构：定义服务器实体1.2 关键概念阐述：权重 (Weight) 2. NGINX加权轮询算法旨在解决的具体问题深度分析2.1 应对后端服务器间的负载不均衡问题2.2 后端服务健康状态的动态感知与自适应调…...

编程日记 2025/8/11 11:32:19

计算机网络笔记(十六)——3.3使用广播信道的数据链路层

3.3.1局域网的数据链路层一、核心逻辑架构（拓扑结构演变） 二、MAC层核心机制 MAC地址结构以太网帧格式 CSMA/CD工作机制流程三、关键功能对比表功能集线器(Hub)交换机(Switch)网桥(Bridge)工作层级物理层数据链路层数据链路层冲突域处理全广播&…...

编程日记 2025/8/11 11:32:19

STM32-模电

目录一、MOS管二、二极管三、IGBT 四、运算放大器五、推挽、开漏、上拉电阻一、MOS管 1. MOS简介这里以nmos管为例，注意箭头方向。G门极/栅极，D漏极，S源极。当给G通高电平时，灯泡点亮，给G通低电平时&a…...

编程日记 2025/8/11 11:32:18

单片机 + 图像处理芯片 + TFT彩屏指示灯控件

指示灯控件使用说明简介这是一个基于单片机 RA8889/RA6809图形处理芯片的指示灯的控件库，用于在TFT显示屏上显示各种状态的指示灯。该控件支持多种状态显示，包括正常、警告、错误和停止等状态，并支持自定义标签显示。功能特点支持多…...

编程日记 2025/8/11 11:32:46

73页最佳实践PPT《DeepSeek自学手册-从理论模型训练到实践模型应用》

这份文档是一份关于 DeepSeek 自学手册的详细指南，涵盖了 DeepSeek V3 和 R1 模型的架构、训练方法、性能表现以及使用技巧等内容。它介绍了 DeepSeek V3 作为强大的 MoE 语言模型在数学、代码等任务上的出色表现以及其训练过程中的创新架构如多头潜在注意力和多 To…...

编程日记 2025/8/11 11:30:59

Python自动化-python基础(上)

一.魔法方法在 Python 中，魔法方法（Magic Methods）是一类特殊的方法，以双下划线 __ 开头和结尾 ，它们在特定的场景下会被 Python 解释器自动调用，用于实现一些内置的操作行为。 1. 初始化与构造相关 __…...

编程日记 2025/8/11 11:32:45

mysql数据库体验

目录数据库简介使用数据库数据库的基本概念数据数据库和数据库表数据库管理系统和数据库系统数据库系统发展史经典数据库网状模型层次模型关系模型当今主流数据库介绍关系数据库非关系型库的基本概念关系数据库的基本结构主键与外键主键外…...

编程日记 2025/8/11 11:31:25

Python开发系统

以下是一个基于Python和OpenCV的简单图像检测系统开发示例，包含目标检测、颜色检测和边缘检测功能： 一、环境搭建 1. 安装依赖 pip install opencv-python numpy matplotlib 2. 准备测试图片下载示例图片或使用本地图片（如 test.jpg &…...

编程日记 2025/8/11 11:31:02

架空输电线巡检机器人轨迹优化设计

架空输电线巡检机器人轨迹优化摘要本论文针对架空输电线巡检机器人的轨迹优化问题展开研究，综合考虑输电线复杂环境、机器人运动特性及巡检任务需求，结合路径规划算法、智能优化算法与机器人动力学约束，构建了多目标轨迹优化模型。通过改进遗传算法与模拟退火算法，有效…...

编程日记 2025/8/11 11:32:18

针对共享内存和上述windows消息机制在C++ 和qt之间的案例进行详细举例说明

针对共享内存和上述windows消息机制在C++ 和qt之间的案例进行详细举例说明以下是关于在 C++ 和 Qt 中使用共享内存（QSharedMemory）和 Windows 消息机制（SendMessage / PostMessage）进行跨线程或跨进程通信的详细示例。 🧩 使用 QSharedMemory 进行进程间通信（Qt 示例…...

编程日记 2025/8/11 11:34:03

cursor平替，试试 vscode+cline+openrouter 的方案，还能自定义 mcp-server 教程大纲

一、引言 cursor 工具使用成本高的现状编程agent好用，解放劳动力，但费用贵 vscodeclineopenrouter Cline 是一款可集成在 IDE 中的 AI 编程助手，支持 OpenAI 和 Ollama 等多种模型，能在 IDE 里自主完成复杂编程任务，…...

编程日记 2025/8/5 7:21:32

Qt实现车载多媒体项目，包含天气、音乐、视频、地图、五子棋功能模块，免费下载源文件！

本文主要介绍项目，项目的结构，项目如何配置，项目如何打包。这篇文章如果对你有帮助请点赞和收藏，谢谢！源代码仅供学习使用，如果转载文章请标明出处！（免费下载源代码）&…...

编程日记 2025/8/5 9:31:19

C++ set替换vector进行优化

文章目录 demo代码解释： 底层原理1. 二叉搜索树基础2. 红黑树的特性3. std::set 基于红黑树的实现优势4. 插入操作5. 删除操作6. 查找操作 demo #include <iostream> #include <set>int main() {// 创建一个存储整数的std::setstd::set<int> myS…...

编程日记 2025/8/5 7:21:30

路径总和 import java.util.ArrayList; import java.util.List;// 定义二叉树节点类 class TreeNode {int val;TreeNode left;TreeNode right;// 构造函数，用于初始化节点值TreeNode(int x) {val x;} }public class PathSumProblems {// 路径总和 I：判…...

编程日记 2025/8/5 7:21:28

正点原子IMX6U开发板移植Qt时出现乱码

移植Qt时出现乱码 1、前言2、问题3、总结 1、前言记录一下正点原子IMX6U开发板移植Qt时出现乱码的解决方法，方便自己日后回顾，也可以给有需要的人提供帮助。 2、问题用正点原子IMX6U开发板移植Qt时移植Qt后，sd卡里已经存储了Qt的各种库&…...

编程日记 2025/8/5 7:21:26

算法解密：轮转数组问题全解析

算法解密：轮转数组问题全解析一、引言在算法的世界里，数组的操作问题常常考验着我们对数据结构和算法技巧的掌握程度。“轮转数组”问题就是其中一个经典且有趣的题目。它看似简单，却蕴含着多种巧妙的解法。通过深入研究这个问题，我们能更好地理解数组的特性，提升算法思…...

编程日记 2025/8/5 7:21:25

正则化和L1/L2范式

1. 背景与引入历史与位置正则化（Regularization）是机器学习中控制模型复杂度、提升泛化能力的核心手段之一。 L2范式（Ridge正则化）最早可追溯至20世纪70年代的Tikhonov正则化，用于解决病态线性方程组问题&#xf…...

编程日记 2025/8/5 7:21:22

day05_java中常见的运算符

对字面量或者变量进行操作的符号就是运算符。用运算符把常量或者变量连接起来符合java语法的式子就可以称为表达式。 java中常用的运算符有下面几种算术运算符代码示例 public class Demo01Operator {public static void main(String[] args) {int a 3;int b 4;System.o…...

编程日记 2025/8/5 7:21:21

Linux_进程退出与进程等待

一、进程退出 ‌退出场景‌ ‌正常终止‌：代码执行完毕且结果符合预期（退出码为 0）。‌异常终止‌：运行结果错误（退出码非 0）或进程被信号强制终止。（如 SIGINT 或 SIGSEGV）。 ‌退…...

编程日记 2025/8/5 7:21:19

SSM框架（Spring + Spring MVC + MyBatis）整合配置的详细步骤

以下是 SSM框架（Spring Spring MVC MyBatis）整合配置的详细步骤，适用于 Maven 项目。 （一）、pom.xml中添加相关依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"ht…...

编程日记 2025/8/5 7:21:17

B. Zero Array（思维）

Problem - 1201B - Codeforces 思路：每次给任意两个不同下表的数减-1，相当于在这个数组总和S上减2，S为奇数则不可能变为0，S为偶数时，一定存在两个序列组成两个S/2，这样每次都是在两个S/2上各减1&#xff0c…...

编程日记 2025/8/6 17:19:27

FPGA_Verilog实现QSPI驱动，完成FLASH程序固化

FPGA_Verilog实现QSPI驱动，完成FLASH程序固化操作提要使用此操作模式实现远程升级的原因是当前的FLASH的管脚直接与FPGA相连接，SPI总线并未直接与CPU相连接，那么则需要CPU下发升级指令与将要升级的文件给FPGA，然后在FPGA内部产…...

编程日记 2025/8/5 9:31:16

前端取经路——框架修行：React与Vue的双修之路

大家好，我是老十三，一名前端开发工程师。在前端的江湖中，React与Vue如同两大武林门派，各有千秋。今天，我将带你进入这两大框架的奥秘世界，共同探索组件生命周期、状态管理、性能优化等核心难题的解决之道。无论你是哪派弟子，掌握双修之术，才能在前端之路上游刃有余。准…...

编程日记 2025/8/5 6:29:08

【DBMS学习系列】一、DBMS（数据库管理系统）的存储模型

一、前置知识 1.1 什么是OLAP 和 OLTP？ On-Line Analytical Processing，简称OLAP（联机分析处理），是一种用于处理大规模数据的技术，它提供了一种灵活的分析和查询方式，能够帮助用户从不同维度来分析和理解业务数据。 On-Line Transaction Processing，简称OLTP（联机事…...

编程日记 2025/8/5 6:29:06

Matlab 镍氢电池模型

1、内容简介 Matlab216-镍氢电池模型可以交流、咨询、答疑 2、内容说明略 3、仿真分析略 4、参考论文略...

编程日记 2025/8/5 6:29:04

39、.NET GC是什么? 为什么需要GC?

.NET GC是什么？ .NET GC（Garbage Collector，垃圾回收器）是.NET运行时（CLR）的核心组件，负责自动管理托管堆（Managed Heap）中的内存分配与释放。其核心工作机制包括&#…...

编程日记 2025/8/7 0:20:56

前端缓存踩坑指南：如何优雅地解决浏览器缓存问题？

浏览器缓存，配置得当，它能让页面飞起来；配置错了，一次小小的上线，就能把你扔进线上 bug 的坑里。你可能遇到过这些情况： 部署上线了，结果用户还在加载旧的 JS；接口数据改了&#xf…...

编程日记 2025/8/1 23:04:54

XML语言

XML语言在开始介绍Mybatis之前，先介绍一下XML语言，XML语言发明最初是用于数据的存储和传输，它是由一个一个的标签嵌套而成 <?xml version"1.0" encoding"UTF-8" ?> <outer> <name>阿伟</name&…...

编程日记 2025/8/8 0:03:52

垃圾回收的三色标记算法

目录 1、介绍 1.1、发展 1.2、基本原理 2、执行过程 2.1、初始标记 (Initial Marking) 2.2、并发标记 (Concurrent Marking) 2.3、重新标记 (Remark) 2.4、垃圾清理阶段 3、并发标记 3.1、浮动垃圾 3.2、漏标前言三色标记（Tri-color Marking&#xff0…...

编程日记 2025/8/5 6:28:58

紫禁城多语言海外投资理财返利源码带前端uniapp纯工程文件

测试环境：Linux系统CentOS7.6、宝塔、PHP7.2、MySQL5.6，根目录public，伪静态thinkphp，开启ssl证书语言：中文简体、英文、越南语、马来语、日语、巴西语、印尼语、泰语前端是uniapp的源码，我已经把nmp给你…...

编程日记 2025/8/5 6:28:56

深入剖析 I/O 复用之 select 机制

深入剖析 I/O 复用之 select 机制在网络编程中，I/O 复用是一项关键技术，它允许程序同时监控多个文件描述符的状态变化，从而高效地处理多个 I/O 操作。select 作为 I/O 复用的经典实现方式，在众多网络应用中扮演着重要角色。本文…...

编程日记 2025/8/5 6:28:54

Android开发报错解决

Android开发报错解决组件相关文件相关权限相关代码相关程序报错IDE相关版本对应框架okhttp请求失败 Roomno such table cocos2d 组件相关使用gravity属性让文字居中是，需把该属性放在text属性上面ScrollView只能容纳一个子视图文件相关放在drawble下的图片资源…...

编程日记 2025/8/5 6:28:52

Linux 网络命名空间：从内核资源管理到容器网络隔离

1. 网络命名空间是什么？网络命名空间（Network Namespace）是 Linux 内核提供的一种网络资源隔离机制，用于为进程或容器创建完全独立的网络环境。它并非物理或虚拟的网络接口（如网卡、veth pair 等），而是一个虚拟容器，包含以下资源的独立实例：网络接口（物理或虚拟）…...

编程日记 2025/8/5 6:28:50

VNC windows连接ubuntu桌面

✅ 步骤 1：安装 VNC 服务器首先，我们需要在 Winux 系统上安装一个 VNC 服务器。这里我们使用 tigervnc 作为例子，它是一个常用的 VNC 服务器软件。打开终端并更新你的软件包： sudo apt update安装 tigervnc 服务器：…...

编程日记 2025/8/5 6:28:48

Vue自定义指令概述

自定义指令语法

自定义指令实例

color 指令

v-loading指令

相关文章：