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

Vue 中自定义指令的探索与实践

文章目录

  • 一、Vue 自定义指令简介
  • 二、基本语法
  • 三、指令的值
  • 四、封装`v-loading`指令
  • 五、总结

在 Vue 开发中,自定义指令为我们提供了一种强大的方式来操作 DOM 元素,实现特定的交互效果和功能增强。本文将深入探讨 Vue 中自定义指令的基本语法、指令的值的使用以及封装一个实用的v-loading指令。

一、Vue 自定义指令简介

Vue 允许开发者自定义指令,以实现对 DOM 元素的底层操作。自定义指令可以在普通的 HTML 标签上使用,就像内置指令(如v-ifv-for等)一样。它们可以在特定的场景下提供更加灵活的交互和视觉效果。

二、基本语法

在 Vue 中,自定义指令可以通过Vue.directive()方法或者在组件的directives选项中进行定义。

  1. 使用Vue.directive()方法:
   Vue.directive('my-directive', {bind(el, binding, vnode) {// 指令绑定到元素时调用},inserted(el, binding, vnode) {// 被绑定元素插入父节点时调用},update(el, binding, vnode, oldVnode) {// 所在组件的 VNode 更新时调用},componentUpdated(el, binding, vnode, oldVnode) {// 所在组件的 VNode 及其子 VNode 全部更新后调用},unbind(el, binding, vnode) {// 指令与元素解绑时调用}});
  • el:指令所绑定的元素。
  • binding:一个对象,包含以下属性:
    • value:指令的绑定值。
    • oldValue:旧的绑定值。
    • expression:指令的表达式。
    • arg:指令的参数。
    • modifiers:一个包含指令修饰符的对象。
  • vnode:Vue 编译生成的虚拟节点。
  • oldVnode:上一个虚拟节点,仅在updatecomponentUpdated钩子中可用。
  1. 在组件中定义:
   export default {directives: {'my-directive': {// 与上面相同的钩子函数}}}

三、指令的值

指令的值可以通过binding.value获取。这个值可以是任何数据类型,包括字符串、数字、对象、数组等。

例如,我们可以定义一个指令,根据传入的值来设置元素的颜色:

Vue.directive('color', {bind(el, binding) {el.style.color = binding.value;}
});

在模板中使用:

<div v-color="'red'">这是红色文本</div>
<div v-color="{ color: 'blue' }">这是蓝色文本</div>

四、封装v-loading指令

在实际开发中,经常会遇到需要显示加载状态的场景。我们可以封装一个v-loading指令来实现这个功能。

  1. 首先,定义指令:
   Vue.directive('loading', {bind(el, binding) {if (binding.value) {// 创建一个加载遮罩元素const loadingElement = document.createElement('div');loadingElement.classList.add('loading-mask');el.appendChild(loadingElement);}},update(el, binding) {if (binding.value!== binding.oldValue) {if (binding.value) {const loadingElement = document.createElement('div');loadingElement.classList.add('loading-mask');el.appendChild(loadingElement);} else {const loadingElement = el.querySelector('.loading-mask');if (loadingElement) {loadingElement.remove();}}}},unbind(el) {const loadingElement = el.querySelector('.loading-mask');if (loadingElement) {loadingElement.remove();}}});
  1. 然后,在 CSS 中定义加载遮罩的样式:
  .loading-mask {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(255, 255, 255, 0.5);display: flex;justify-content: center;align-items: center;}
  1. 在模板中使用:
   <div v-loading="isLoading">加载中...</div>

在组件的data中定义isLoading变量,并在需要显示加载状态的时候将其设置为true,加载完成后设置为false

五、总结

Vue 的自定义指令为我们提供了强大的 DOM 操作能力,可以根据具体的需求实现各种交互效果和功能增强。通过掌握自定义指令的基本语法、指令的值的使用以及封装实用的指令,我们可以更加高效地开发 Vue 应用程序。

在实际开发中,我们可以根据项目的需求封装更多的自定义指令,以提高开发效率和代码的可维护性。同时,也要注意指令的性能和可扩展性,避免过度复杂的指令导致性能问题。

相关文章:

Vue 中自定义指令的探索与实践

文章目录 一、Vue 自定义指令简介二、基本语法三、指令的值四、封装v-loading指令五、总结 在 Vue 开发中&#xff0c;自定义指令为我们提供了一种强大的方式来操作 DOM 元素&#xff0c;实现特定的交互效果和功能增强。本文将深入探讨 Vue 中自定义指令的基本语法、指令的值的…...

Vue3通过$emit实现子向父传递数据

引言 子组件通过$emit触发事件&#xff0c;并传递数据&#xff0c;父组件在使用子组件时就可以绑定子组件事件&#xff0c;在事件处理函数中拿到子组件传来的数据 子组件传递数据 函数声明&#xff1a;$emit(事件名, 传递的数据 . . .) 子组件传递的数据会依次传递给父组件的…...

代码随想录算法训练营第十四天|递归 226.翻转二叉树 101. 对称二叉树 104.二叉树的最大深度 111.二叉树的最小深度

226.翻转二叉树 翻转一棵二叉树。 思路&#xff1a; 在这里需要注意的是&#xff0c;在递归的时候唯独中序遍历是不可用的&#xff0c;这是因为先对左子树进行了反转&#xff0c;又对自身进行了反转&#xff0c;对自身反转后原本的左子树变成了右子树&#xff0c;如果此时又轮…...

Spark 任务与 Spark Streaming 任务的差异详解

Spark 任务与 Spark Streaming 任务的主要差异源自于两者的应用场景不同&#xff1a;Spark 主要处理静态的大数据集&#xff0c;而 Spark Streaming 处理的是实时流数据。这些差异体现在任务的调度、执行、容错、数据处理模式等方面。 接下来&#xff0c;我们将从底层原理和源…...

Git提示信息 Pulling is not possible because you have unmerged files.

git [fatal] hint: Pulling is not possible because you have unmerged files.hint: Fix them up in the … error: Pulling is not possible because you have unmerged files. 错误:无法提取&#xff0c;因为您有未合并的文件。 hint: Fix them up in the work tree, and t…...

python编程开发“人机猜拳”游戏

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…...

丹摩智算平台部署 Llama 3.1:实践与体验

文章目录 前言部署前的准备创建实例 部署与配置 Llama 3.1使用心得总结 前言 在最近的开发工作中&#xff0c;我有机会体验了丹摩智算平台&#xff0c;部署并使用了 Llama 3.1 模型。在人工智能和大模型领域&#xff0c;Meta 推出的 Llama 3.1 已经成为了目前最受瞩目的开源模…...

SpringCloud 2023各依赖版本选择、核心功能与组件、创建项目(注意事项、依赖)

目录 1. 各依赖版本选择2. 核心功能与组件3. 创建项目3.1 注意事项3.2 依赖 1. 各依赖版本选择 SpringCloud: 2023.0.1SpringBoot: 3.2.4。参考Spring Cloud Train Reference Documentation选择版本 SpringCloud Alibaba: 2023.0.1.0*: 参考Spring Cloud Alibaba选择版本。同时…...

串行化执行、并行化执行

文章目录 1、串行化执行2、并行化测试&#xff08;多线程环境&#xff09;3、任务的执行是异步的&#xff0c;但主程序的继续执行是同步的 可以将多个任务编排为并行和串行化执行。 也可以处理编排的多个任务的异常&#xff0c;也可以返回兜底数据。 1、串行化执行 顺序执行、…...

二叉搜索树(c++版)

前言 在前面我们介绍过二叉树这个数据结构&#xff0c;今天我们更进一步来介绍二叉树的一种在实现中运用的场景——二叉搜索树。二叉搜索树顾名思义其在“搜索”这个场景下有不俗的表现&#xff0c;之所以会这样是因为它在二叉树的基础上添加了一些属性。下面我们就来简单的介…...

每日1题-7

...

简单实现log记录保存到文本和数据库

简单保存记录到txt&#xff0c;sqlite数据库&#xff0c;以及console监控记录 using System; using System.Collections.Generic; using System.ComponentModel; using System.Text; using System.Data.SQLite; using System.IO;namespace NlogFrame {public enum LogType{Tr…...

敏感字段加密 - 华为OD统一考试(E卷)

2024华为OD机试(E卷+D卷+C卷)最新题库【超值优惠】Java/Python/C++合集 题目描述 【敏感字段加密】给定一个由多个命令字组成的命令字符串: 1、字符串长度小于等于127字节,只包含大小写字母,数字,下划线和偶数个双引号; 2、命令字之间以一个或多个下划线 进行分割; 3、可…...

go 安装三方库

go版本 go versiongo version go1.23.1 darwin/arm64安装 redis 库 cd $GOPATH说明&#xff1a; 这里可以改 GOPATH的值 将如下 export 语句写入 ~/.bash_profile 文件中 export GOPATH/Users/goproject然后使其生效 source ~/.bash_profile初始化生成 go.mod 文件 go mod…...

Java 中的 volatile和synchronized和 ReentrantLock区别讲解和案例示范

在 Java 的并发编程中&#xff0c;volatile、synchronized 和 ReentrantLock 是三种常用的同步机制。每种机制都有其独特的特性、优缺点和适用场景。理解它们之间的区别以及在何种情况下使用哪种机制&#xff0c;对提高程序的性能和可靠性至关重要。本文将详细探讨这三种机制的…...

从GDAL中 读取遥感影像的信息

从GDAL提供的实用程序来看&#xff0c;很多程序的后缀都是 .py &#xff0c;这充分地说明了Python语言在GDAL的开发中得到了广泛的应用。 1. 打开已有的GeoTIF文件 下面我们试着读取一个GeoTiff文件的信息。第一步就是打开一个数据集。 >>> from osgeo import gdal…...

算法闭关修炼百题计划(一)

多看优秀的代码一定没有错&#xff0c;此篇博客属于个人学习记录 1.两数之和2.前k个高频元素3.只出现一次的数字4.数组的度5.最佳观光组合6.整数反转7.缺失的第一个正数8.字符串中最多数目的子序列9.k个一组翻转链表10.反转链表II11. 公司命名12.合并区间13.快速排序14.数字中的…...

vue3实现打字机的效果,可以换行

之前看了很多文章,效果是实现了,就是没有自动换行的效果,参考了文章写了一个,先上个效果图,卡顿是因为模仿了卡顿的效果,还是很丝滑的 目录 效果图:代码如下 效果图: ![请添加图片描述](https://i-blog.csdnimg.cn/direct/d8ef33d83dd3441a87d6d033d9e7cafa.gif 代码如下 原…...

【如何学习操作系统】——学会学习的艺术

&#x1f41f;作者简介&#xff1a;一名大三在校生&#xff0c;喜欢编程&#x1fab4; &#x1f421;&#x1f419;个人主页&#x1f947;&#xff1a;Aic山鱼 &#x1f420;WeChat&#xff1a;z7010cyy &#x1f988;系列专栏&#xff1a;&#x1f3de;️ 前端-JS基础专栏✨前…...

stm32 flash无法擦除

通过bushound调试代码发现&#xff0c;当上位机发送命令到模组后flash将不能擦除&#xff0c;通过 HAL_FLASH_GetError&#xff08;&#xff09;函数查找原因是FLASH Programming Sequence error&#xff08;编程顺序错误&#xff09;&#xff0c;解决办法是在解锁后清零标志位…...

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

第7篇:中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

破解路内监管盲区:免布线低位视频桩重塑停车管理新标准

城市路内停车管理常因行道树遮挡、高位设备盲区等问题&#xff0c;导致车牌识别率低、逃费率高&#xff0c;传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法&#xff0c;正成为破局关键。该设备安装于车位侧方0.5-0.7米高度&#xff0c;直接规避树枝遮…...