Vue 中局部指令(directives)的用法详解
在 Vue.js 中,指令是一种特殊的属性,用于在 DOM 元素上绑定特殊行为。除了 Vue 内置的指令(如v-model
、v-if
),还可以自定义指令来封装可复用的功能。
什么是局部指令?
局部指令是在单个组件中定义和使用的指令,它们只在当前组件中有效。与全局指令不同,局部指令不需要在整个应用中注册,而是在组件内部直接定义。
这使得局部指令非常适合封装特定组件的功能,提高代码的复用性和可维护性。
局部指令的基本语法
在组件中定义局部指令的基本语法如下:
export default {directives: {// 指令名称: 指令定义对象focus: {// 指令生命周期钩子mounted(el) {// 元素挂载后执行el.focus()}}}
}
在模板中使用局部指令:
<template><input v-focus />
</template>
指令的生命周期钩子
局部指令可以定义多个生命周期钩子函数,这些函数会在不同的阶段被调用:
beforeMount
: 指令第一次绑定到元素并且在父组件挂载之前调用mounted
: 元素已经挂载到 DOM 后调用beforeUpdate
: 组件更新之前调用updated
: 组件更新完成后调用beforeUnmount
: 元素卸载之前调用unmounted
: 元素卸载之后调用
局部指令示例
下面通过几个具体的示例来演示局部指令的用法。
示例 1:自动聚焦指令
这是一个最简单的局部指令示例,实现输入框自动聚焦功能:
<template><div><input v-focus /></div>
</template><script>
export default {directives: {focus: {// 当绑定元素插入到DOM中时...mounted(el) {// 聚焦元素el.focus()}}}
}
</script>
示例 2:权限控制指令
这个示例展示如何使用局部指令实现权限控制:
<template><div><button v-permission="['admin']">删除用户</button></div>
</template><script>
export default {data() {return {userRole: 'editor'}},directives: {permission: {mounted(el, binding) {const { value } = bindingconst { userRole } = this.$data// 如果用户角色不在允许的角色列表中,则隐藏元素if (!value.includes(userRole)) {el.style.display = 'none'}}}}
}
</script>
示例 3:拖拽指令
这个示例展示如何创建一个拖拽指令:
<template><div><div v-draggable class="draggable-box">拖拽我</div></div>
</template><script>
export default {directives: {draggable: {mounted(el) {let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;// 按下鼠标时记录初始位置el.onmousedown = dragStart;function dragStart(e) {e.preventDefault();// 获取鼠标位置pos3 = e.clientX;pos4 = e.clientY;// 鼠标移动时更新元素位置document.onmousemove = elementDrag;// 鼠标释放时停止拖拽document.onmouseup = closeDragElement;}function elementDrag(e) {e.preventDefault();// 计算新位置pos1 = pos3 - e.clientX;pos2 = pos4 - e.clientY;pos3 = e.clientX;pos4 = e.clientY;// 设置元素新位置el.style.top = (el.offsetTop - pos2) + "px";el.style.left = (el.offsetLeft - pos1) + "px";}function closeDragElement() {// 停止移动和拖拽document.onmouseup = null;document.onmousemove = null;}}}}
}
</script><style scoped>
.draggable-box {position: absolute;width: 150px;height: 150px;background-color: #f1f1f1;border: 1px solid #d3d3d3;text-align: center;cursor: move;
}
</style>
示例 4:自定义滚动指令
这个示例展示如何创建一个自定义滚动指令:
<template><div><div v-scroll-to-bottom class="scroll-container"><div v-for="item in messages" :key="item.id">{{ item.text }}</div></div><button @click="addMessage">添加消息</button></div>
</template><script>
export default {data() {return {messages: [{ id: 1, text: '消息 1' },{ id: 2, text: '消息 2' },{ id: 3, text: '消息 3' }]}},methods: {addMessage() {this.messages.push({id: this.messages.length + 1,text: `新消息 ${this.messages.length + 1}`})}},directives: {'scroll-to-bottom': {updated(el) {// 当DOM更新后滚动到底部el.scrollTop = el.scrollHeight}}}
}
</script><style scoped>
.scroll-container {height: 200px;overflow-y: auto;border: 1px solid #ccc;padding: 10px;
}
</style>
指令钩子函数参数
指令钩子函数会传递几个参数,这些参数提供了指令使用的上下文信息:
el
: 指令绑定的元素,可以用来直接操作 DOMbinding
: 一个对象,包含以下属性:value
: 指令的绑定值,例如:v-my-directive="1 + 1"
中,绑定值为2
oldValue
: 指令绑定的前一个值,仅在updated
和beforeUpdate
钩子中可用arg
: 传递给指令的参数,例如:v-my-directive:foo
中,参数为foo
modifiers
: 一个包含修饰符的对象,例如:v-my-directive.foo.bar
中,修饰符对象为{ foo: true, bar: true }
vnode
: Vue 编译生成的虚拟节点prevNode
: 上一个虚拟节点,仅在updated
和beforeUpdate
钩子中可用
下面是一个使用这些参数的示例:
<template><div><div v-color="'red'" v-color:border="'blue'" v-color.round>带颜色的盒子</div></div>
</template><script>
export default {directives: {color: {mounted(el, binding) {// 设置文本颜色el.style.color = binding.value// 如果有参数,设置边框颜色if (binding.arg === 'border') {el.style.border = `2px solid ${binding.value}`}// 如果有修饰符,设置圆角if (binding.modifiers.round) {el.style.borderRadius = '8px'}}}}
}
</script><style scoped>
div {padding: 10px;margin: 10px;
}
</style>
函数简写
在很多情况下,你可能只需要在 mounted
和 updated
时执行相同的操作,这时可以使用函数简写:
export default {directives: {// 函数简写color: function(el, binding) {// 这个函数会在 mounted 和 updated 时被调用el.style.color = binding.value}}
}
动态指令参数
从 Vue 3 开始,指令可以接受动态参数,这意味着参数可以是一个表达式:
<template><div><div v-pin:[direction]="200">固定元素</div><button @click="toggleDirection">切换方向</button></div>
</template><script>
export default {data() {return {direction: 'top'}},methods: {toggleDirection() {this.direction = this.direction === 'top' ? 'left' : 'top'}},directives: {pin: {mounted(el, binding, vnode) {el.style.position = 'fixed'const s = binding.arg || 'top'el.style[s] = binding.value + 'px'}}}
}
</script>
总结
局部指令是 Vue 中非常有用的功能,它允许你封装可复用的 DOM 操作逻辑,提高代码的复用性和可维护性。
在实际开发中,可以根据项目需求创建各种局部指令,比如处理表单验证、图片懒加载、滚动监听等功能。
记住,局部指令适合封装特定组件的功能,而全局指令则更适合应用于整个应用的通用功能。
相关文章:
Vue 中局部指令(directives)的用法详解
在 Vue.js 中,指令是一种特殊的属性,用于在 DOM 元素上绑定特殊行为。除了 Vue 内置的指令(如v-model、v-if),还可以自定义指令来封装可复用的功能。 什么是局部指令? 局部指令是在单个组件中定义和使用的…...
mac 基于Docker安装minio服务器
在 macOS 上基于 Docker 安装 MinIO 是一个高效且灵活的方案,尤其适合本地开发或测试环境。以下是详细的安装与配置步骤,结合了最佳实践和常见问题的解决方案: 一、安装 Docker Desktop 下载安装包 访问 Docker 官网,下载适用于 …...
Redis常用数据结构解析:从原理到实战应用
作为一名开发者,我深知Redis在缓存、队列等场景中的重要性。但要用好Redis,必须对其核心数据结构有透彻理解。本文将结合我的实践经验,详细讲解Redis五种最常用的数据结构及其典型应用场景,帮助你在开发中游刃有余。 一、String&…...
Druid监控sql导致的内存溢出
问题 druid监控sql在网页端显示,我的服务插入sql比较大,druid把执行过的sql保存在DruidDataSource类的成员变量JdbcDataSourceStat dataSourceStat; JdbcDataSourceStat类中的LinkedHashMap<String, JdbcSqlStat> sqlStatMap中&#…...
基于Python镜像创建docker镜像时pip install一直出现NewConnectionError的一种解决办法
用dockerfile创建docker镜像,在pip的时候一直是出现错误: 13.21 WARNING: Retrying (Retry(total4, connectNone, readNone, redirectNone, statusNone)) after connection broken by NewConnectionError(<pip._vendor.urllib3.connection.HTTPSConn…...
【机器学习】朴素贝叶斯
目录 一、朴素贝叶斯的算法原理 1.1 定义 1.2 贝叶斯定理 1.3 条件独立性假设 二、朴素贝叶斯算法的几种常见类型 2.1 高斯朴素贝叶斯 (Gaussian Naive Bayes) 【训练阶段】 - 从数据中学习模型参数 【预测阶段】 - 对新样本 Xnew 进行分类 2. 2 多项式朴素贝叶斯 (…...
服务器硬件老化导致性能下降的排查与优化
随着企业数字化转型的深入,服务器作为IT基础设施的核心载体,其稳定性与性能直接影响业务连续性。然而,硬件老化导致的性能衰减问题普遍存在且易被忽视。本报告通过系统性分析服务器硬件老化现象,提出多维度排查方法与优化方案&…...
学习记录:DAY19
Docker 部署与项目需求分析 前言 人总是本能地恐惧未知,令生活陷入到经验主义的循环之中。但我们终将面对。今天的目标是把 Docker 部署学完,然后对项目进行需求分析。 日程 下午 4:30:Docker 部署项目部分学完了,做下笔记。晚…...
机器学习中的数据转换:关键步骤与最佳实践
机器学习中的数据转换:关键步骤与最佳实践 摘要 :在机器学习领域,数据是模型的核心,而数据的转换是构建高效、准确模型的关键步骤之一。本文深入探讨了机器学习中数据转换的重要性、常见的数据类型及其转换方法,以及在…...
【C++教程】三目运算符
C的三目运算符(条件运算符)是一种简洁的条件表达式工具,其形式为 条件 ? 表达式1 : 表达式2。以下是对其用法的详细总结: 1. 基本用法 条件判断:若条件为真,返回表达式1的值;否则返回表达式2…...
鼠标获取坐标 vs 相机获取坐标
Cesium鼠标点击获取坐标 vs 相机视角获取坐标 鼠标点击获取坐标流程图 #mermaid-svg-WwyCUbcFQekWG97C {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-WwyCUbcFQekWG97C .error-icon{fill:#552222;}#mermaid-svg-W…...
HarmonyOS SDK助力鸿蒙版今日水印相机,真实地址防护再升级
今日水印相机是一款真实记录"工作"和"生活"的水印拍照APP。作为专业的可信影像服务平台,今日水印相机依托时间、地点、身份三重数字水印技术,为企业和个人提供考勤打卡、外勤巡检、生活美好时刻记录等场景的可信存证服务。 面对虚拟…...
数组滑动窗口单调栈单调队列trick集【leetcode hot100 c++速查!!!】
文章目录 栈经典模版题-括号最小栈字符串解码每日温度柱状图的最大矩形 堆数组中的第k个最大元素前k个高频元素数据流中的中位数 数组最大子数组和合并区间轮转数组除自身以外数组的乘积 我们尝试将这三类问题放在一个专题中进行讨论,是因为它们有很多公共的部分。 …...
半监督学习与强化学习的结合:新兴的智能训练模式
📌 友情提示: 本文内容由银河易创AI(https://ai.eaigx.com)创作平台的gpt-4o-mini模型生成,旨在提供技术参考与灵感启发。文中观点或代码示例需结合实际情况验证,建议读者通过官方文档或实践进一步确认其准…...
C++ 可调用实体 (详解 一站式)
目录 可调用实体 函数对象 函数指针 成员函数指针 空指针的使用(了解) 可调用实体 讲到调用这个词,我们首先能够想到普通函数和函数指针,在学习了类与对象的基础知识后,还增加了成员函数,那么它们都被…...
架构师与高级工程师:职业差异与进阶之路
“学而不思则罔,思而不学则殆。”——孔子 解释:该名言强调了学习和思考的结合,对应文章中工程师若想晋升为架构师,不能仅满足于对工具的学习,还要深入探究事物本质,培养深度思考能力,体现了思…...
声纹监测技术在新能源汽车的应用场景解析
新能源汽车声纹监测技术可应用于多个场景,以下是详细解析: 故障诊断 电机系统故障检测:新能源汽车的电机在运行过程中会发出特定的声音。通过声纹监测技术,采集电机运行时的声音信号并进行分析,能够及时发现电机轴承磨…...
About why docker application mode taskmanager not down in time
Tips: docker flink application mode 当任务完成或者jobmanager cancel,则taskmanager会因为flink集群机制继续保留监听等待jobmanager发送任务命令,当超过大约6 mins,taskmanager便会自动exited退出。...
2025-4-27-C++ 学习 数组(2)
数组 2025-4-27-C 学习 数组(2)P2550 [AHOI2001] 彩票摇奖题目描述输入格式输出格式输入输出样例 #1输入 #1输出 #1 说明/提示题解代码 P2615 [NOIP 2015 提高组] 神奇的幻方题目背景题目描述输入格式输出格式输入输出样例 #1输入 #1输出 #1 输入输出样例…...
timerfd定时器时间轮定时器
目录 一、timerfd定时器 二、timerfd定时器代码演示 三、时间轮定时器 一、timerfd定时器 timerfd是一种通过文件描述符管理定时器的机制 #include <sys/timerfd.h> int timerfd_create(int clockid, int flags); 作用:创建定时器的文件描述符 返回值&…...
什么是数据中心代理IP?有哪些用途?
在海外代理IP的选择中,数据中心代理IP是一个热门选项。这些代理服务器为用户分配了非ISP(互联网服务提供商)提供的IP地址,而是由第三方云服务提供商所提供的,通常位于数据中心内的服务器上,由托管和云公司所…...
机器学习分类模型性能评估:应对类别不平衡的策略与指标
在机器学习的世界里,模型们就像一群努力破案的侦探,而数据就是它们的“犯罪现场”。今天,咱们的主角——一个自命不凡的分类模型,接到了一个看似简单的任务:揪出那些患有罕见疾病的患者。这听起来是不是很容易…...
论文导读 - 基于边缘计算、集成学习与传感器集群的便携式电子鼻系统
基于边缘计算、集成学习与传感器集群的便携式电子鼻系统 原论文地址:https://www.sciencedirect.com/science/article/abs/pii/S0925400522015684 引用此论文(GB/T 7714-2015): WANG T, WU Y, ZHANG Y, et al. Portable electr…...
Molex莫仕连接器:增强高级驾驶辅助系统,打造更安全的汽车
随着对先进、高耗电量的系统的需求日益增长,电气化进程不断加速,汽车行业正处于一个十字路口。现代汽车面临着关键挑战,即满足不断增长的电力需求,特别是高级驾驶辅助系统(ADAS)等关键技术的需求。 由于现今的汽车比以往需要更多的…...
[密码学实战]SDF之密钥管理类函数(二)
[密码学实战]SDF之密钥管理类函数(二) 一、标准解读:GM/T 0018-2023核心要求 1.1 SDF接口定位 安全边界:硬件密码设备与应用系统间的标准交互层 功能范畴: #mermaid-svg-af5D1B1iHx3K8vSU {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16…...
多实例情况下,实例名较长dbca失败
dbca创建数据库,但是失败,提示ORA-01158 看来千锤百炼的dbca脚本还是菜,直觉上讲不应该mount上,看一下Action 本地已存在多个实例且名称前缀类似,下一步应该分析dbca日志和实例的alert.log 改为 一个简短的实例名就…...
模电——PN结
一、铺垫 这篇文章将会吊打一切、只会从电子、电场力的角度来阐述PN结为啥会形成、和变薄、变厚;不再考虑空穴这种东西;——提出空穴的人,真不是东西 我敢打赌,全网,我的说法不一定对,但是绝对是唯一可以…...
c++11 : 特殊类设计
目录 一 设计一个类:只能在堆上创建对象 二 设计一个类:只能在栈上创建对象 三 设计一个类:不能被拷贝 四 设计一个类:不能被继承 五 设计一个类: 只能创建一个对象(单例模式) 六 饿汉和懒汉模式的对比 一 设计一个类…...
算法笔记.kruskal算法求最小生成树
题目:(来源:AcWing) 给定一个 n 个点 m 条边的无向图,图中可能存在重边和自环,边权可能为负数。 求最小生成树的树边权重之和,如果最小生成树不存在则输出 impossible。 给定一张边带权的无向…...
量子算法调试:Grover算法搜索空间压缩过程可视化方案
一、Grover算法核心原理回顾 Grover算法通过以下两步迭代实现搜索空间压缩: Oracle操作(相位翻转) 标记目标状态: Uω∣x⟩={−∣x⟩x=ω∣x⟩x≠ωUω∣x⟩={−∣x⟩∣x⟩x=ωx=ω 扩散操作(振幅放大) 执行反转平均操作: D=2∣s⟩⟨s∣−ID=2∣s⟩⟨s∣−I 其…...
零基础搭建AI作曲工具:基于Magenta/TensorFlow的交互式音乐生成系统
引言:当AI遇见莫扎特 “音乐是流动的建筑”,当人工智能开始理解音符间的数学规律,音乐创作正经历着前所未有的范式变革。本文将手把手教你构建一套智能作曲系统,不仅能够生成古典钢琴小品,还能实现巴洛克与爵士风格的…...
springboot项目文件上传到服务器本机,返回访问地址
文件上传到服务器本机,然后给出访问地址: 具体如下: 1、添加必要的工具类依赖 <!-- 文件上传工具类 --><dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId>…...
mysql community 8.0.23升级到8.0.42再到8.4.5
近日生产服务器准备正式试运行,数据进入客户的专有网络,于是甲方派了人过来测漏洞,结果扫出一大堆。其间关于mysql的漏洞300多个,吓死人。给出的补丁地址,打开来看,全部是英文,可能是一些什么测…...
ubuntu安装docker,conda,tmux,btop,nvitop
在 Ubuntu 上安装 Docker Engine (使用华为云源) 1. 更新系统软件包 sudo apt update sudo apt upgrade -y2. 安装必要的依赖包 sudo apt install -y \ca-certificates \curl \gnupg \lsb-release \git \vim \wget3. 添加 Docker 的 GPG 密钥 (来自华为云镜像) # 创建用于存…...
大模型在肝硬化腹水风险预测及临床方案制定中的应用研究
目录 一、引言 1.1 研究背景与意义 1.2 研究目的与创新点 1.3 研究方法与数据来源 二、肝硬化及大模型相关理论基础 2.1 肝硬化概述 2.2 大模型技术原理 2.3 大模型在医疗领域的应用现状 三、大模型预测肝硬化腹水术前风险 3.1 术前风险因素分析 3.2 大模型预测术前…...
孙宇晨将出席迪拜Token2049 与特朗普次子共话加密未来
据官方消息,波场TRON创始人孙宇晨将出席5月1日在迪拜举办的Token2049峰会上,并与特朗普次子埃里克特朗普(Eric Trump)进行一场备受瞩目的炉边对话,出席对话的人士还包括特朗普家族支持的去中心化金融项目WLFI(World Liberty Financial)的联合创始人Zach Witkoff。这场对话不仅彰…...
深入理解同源策略与跨域资源共享(CORS)
深入理解同源策略与跨域资源共享(CORS) 前言 在当今的 Web 开发中,跨域资源请求已成为常见需求。然而,浏览器的同源策略(Same-Origin Policy)作为最基础的安全机制,限制了不同源之间的资源交互…...
Vue 生命周期钩子总结
Vue 生命周期钩子总结 Vue 组件的生命周期钩子允许在组件不同阶段执行自定义逻辑。以下是各阶段的钩子函数及其用途、触发时机和注意事项: 1. 生命周期阶段概览 Vue 组件的生命周期分为四个主要阶段: 创建(Creation)࿱…...
【解决方案】Linux解决CUDA安装过程中GCC版本不兼容
Linux解决CUDA安装过程中GCC版本不兼容 目录 问题描述 解决方法 安装后配置 问题描述 Linux环境下安装 CUDA 时,运行sudo sh cuda_10.2.89_440.33.01_linux.run命令出现 “Failed to verify gcc version.” 的报错,提示 GCC 版本不兼容,查…...
网络准入控制系统推荐:2025年构建企业网络安全的第一道防线
随着信息技术的飞速发展,企业网络环境日益复杂,阳途网络准入控制系统作为一种先进的网络安全解决方案,其核心是确保网络接入的安全性。 一、网络准入控制系统的基本原理与功能 网络准入控制以“只有合法的用户、安全的终端才可以接入网络”为…...
AI Agent
李宏毅:从零开始搞懂 AI Agent - 知乎台大李宏毅2025 AI Agent新课来了! - 知乎读懂AI Agent:基于大模型的人工智能代理 - 知乎 1.什么是AI Agent 一个基于大模型的 AI Agent 系统可以拆分为大模型、规划、记忆与工具使用四个组 件部分。AI A…...
大模型如何应对内容安全:原理、挑战与技术路径探讨
随着大语言模型(LLM)技术的广泛应用,从AI写作助手到智能客服、再到生成式内容平台(AIGC),AI 正以前所未有的速度深入人类社会的各个角落。然而,随之而来的内容安全问题也日益凸显:模…...
Flinkcdc 实现 MySQL 写入 Doris
Flinkcdc 实现 MySQL 写入 Doris Flinkcdc 实现 MySQL 写入 Doris 一、环境配置 Doris:3.0.4 JDK 17 MySQL (业务数据库):5.7 MySQL(本地数据库):5.7 Flink:flink-1.19.1 flinkc…...
vim粘贴代码格式错乱 排版错乱 缩进错乱 解决方案
从IDE复制代码, 粘贴到vim打开的文件 出现以下格式错乱解决方案 在使用 Vim 编辑器粘贴代码时,出现格式错乱的问题,通常是因为 Vim 的自动缩进功能与粘贴的代码发生了冲突。Vim 默认会尝试对输入的内容进行自动缩进,这会导致粘贴的代码被错误…...
发那科机器人(基本操作、坐标系、I/O通信)
发那科机器人(基本操作、坐标系、I/O通信) 一,机器人基本操作1,坐标系种类2,机器人手动操作一关节运动3,机器人手动操作一直角运动二,坐标系建立1,工具坐标系建立原理及验证方法2,工具坐标系建立步骤3,用户坐标系建立原理及验证方法4,用户坐标系建立步骤三,I/O通信…...
GPU 架构入门笔记
引文位置:https://www.trainy.ai/blog/gpu-utilization-misleading 相关概念是通过 ChatGPT 迅速学习总结而成。 概念: GPU H100 GPU, with 144 SMs 每个 SM(streaming multiprocessors) 的架构: GPU Utilizati…...
centos7使用yum快速安装Docker环境
一、基础环境设置 1:关闭防火墙和内核安全机制 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 02:配置网络yum源 [rootlocalhost ~]# curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Cento…...
解密面试高频题:加权轮询负载均衡算法 (Java 实现)
在分布式系统设计和面试中,负载均衡是一个绕不开的话题。而加权轮询(Weighted Round Robin, WRR)作为一种经典且实用的负载均衡策略,经常出现在笔试题和面试环节中。本文将带你深入理解 WRR 算法的原理,并探讨几种常见…...
Linux中的系统延时任务和定时任务与时间同步服务和构建时间同步服务器
延时任务 在系统中我们的维护工作大多数时在服务器行对闲置时进行 我们需要用延迟任务来解决自动进行的一次性的维护 延迟任务时一次性的,不会重复执行 当延迟任务产生输出后,这些输出会以邮件的形式发送给延迟任务发起者 在RHEL9中默认系统中的所有普通…...
高效运维,智慧监测:COMEM光纤温度测量系统在电力行业中的应用
在电力行业中,变压器的稳定运行对于整个电网的安全很重要。为了确保变压器的健康状态,实时、精确的温度监测成为了不可或缺的一环。COMEM光纤温度测量系统应运而生,为变压器的温度监测提供了创新的解决方案。 变压器温度监测的重要性 变压器在…...