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

vue修饰符

news 来源：原创 2025/5/9 3:57:10

在 Vue 中，修饰符是一种特殊的后缀，用于改变指令的默认行为

stop

<template><div><h2>vue修饰符</h2><div class="box" @click="boxClikc"><button @click="btnClick">按钮</button></div></div>
</template><script setup>const boxClikc=()=>{console.log('box被点击');
}
const btnClick=()=>{console.log('btn被点击');
}</script><style>
.box{padding: 20px;border: 1px solid red;width: 100px;
}
</style>

当点击按钮外的空白区域，box的事件触发，点击按钮的时候，box和btn的事件都触发了。(事件冒泡是一种事件传播的方式，当一个元素上触发了某个事件时，该事件会从这个元素开始，逐级向上传播到它的父元素，再到父元素的父元素，以此类推，直到传播到文档对象)。为了避免事件冒泡可以使用.stop修饰符

   <div class="box" @click="boxClikc"><button @click.stop="btnClick">按钮</button></div>

在点击按钮的时候就会阻止冒泡了，在点击按钮就不会在触发box的事件了

prevent

阻止默认行为修饰符

<template><div><h2>vue修饰符</h2><form @submit="submitForm.prevent"><input type="text" v-model="message"><button type="submit">提交</button>
</form></div>
</template><script setup>
import { ref } from 'vue';const  message=ref('qqq');
const submitForm=()=>{console.log('表单提交默认行为被阻止了');}</script><style>
.box{padding: 20px;border: 1px solid red;width: 100px;
}
</style>

不加.prevent 点击提交后会刷新页面

capture

使用事件捕获模式，即事件从外层元素开始触发，而不是默认的从内层元素开始

<template><div><h2>vue修饰符</h2><div @click.capture="clickParent"><div @click="clickSon">capture</div></div></div>
</template><script setup>
import { ref } from "vue";
const clickParent = () => {console.log("点击了外层盒子");
};
const clickSon = () => {console.log("点击内层盒子");
};</script>

不加capture修饰符的话会默认先打印内层盒子，在打印外层盒子

self

只当事件是从绑定元素本身触发时才触发回调，也就是说如果事件是从子元素冒泡上来的，不会触发该事件处理函数。

<template><div><h2>vue修饰符</h2><div class="box" @click.self="clickParent"><div class="innerbox" @click="clickSon">capture</div></div></div>
</template><script setup>
import { ref } from "vue";
const clickParent = () => {console.log("点击了外层盒子");
};
const clickSon = () => {console.log("点击内层盒子");
};
</script><style>
.box {padding: 20px;border: 1px solid red;width: 100px;
}
.innerbox{width: 50px; border: 1px solid blueviolet;}
</style>

当点击内层盒子的时候，不会在触发外层盒子的事件，只有自己外层盒子本身才会触发事件

once

当点击按钮的时候，只会执行一次。

  <button @click.once="textOnce">once</button>const textOnce=()=>{console.log('事件触发');  
}

passive

在 Vue 里,passive修饰符主要和 DOM 事件监听器相关，它本质上是基于原生 JavaScript 的addEventListener方法的passive选项。这个修饰符主要用于优化滚动性能，尤其是在处理像 scroll,touchmove这类滚动相关事件时。

在默认情况下，浏览器在触发滚动事件时，会先等待事件监听器执行完毕，以判断是否调用 event.preventDefault()来阻止默认行为。但在滚动场景中，这样做可能会导致滚动不流畅，出现卡顿现象。

而使用passive修饰符后，就相当于告诉浏览器：“我不会调用event.preventDefault() 来阻止默认行为，你可以直接执行滚动操作，不用等待我的事件监听器执行完毕”。这样浏览器就能立即响应滚动事件，从而提升滚动的流畅度

<template><div><h2>vue修饰符</h2><!-- 不加 passive 修饰符 --><div class="scroll"  @scroll="onScroll"><h2>不加 passive 修饰符</h2><!-- 大量文本用于测试滚动 --><p v-for="i in 1000" :key="i">这是一段文字用来测试 passive 的 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p></div><!-- 加 passive 修饰符 --><div class="scroll" @scroll.passive="onScroll"><h2>加 passive 修饰符</h2><p v-for="i in 1000" :key="i + 1000">这是一段文字用来测试 passive 的 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p></div></div>
</template><script setup>
import { ref } from "vue";
const onScroll = () => {console.log("滚动事件触发");};</script><style>
.scroll {width: 150px;padding: 50px;height: 30px;/* 出现y轴上的滚动条 */overflow-y: auto;/* 文字超出宽度的时候 换行 */word-wrap: break-word;border: 1px solid rgb(235, 214, 32);}
</style>

当快速滚动这两个区域时，可能会感觉到加了passive修饰符的滚动区域更加流畅，因为浏览器不需要等待事件监听器执行完毕就可以继续滚动。

按键修饰符

按键修饰符用于监听特定的按键事件

<template><div><div><input type="text" @keyup.enter="onEnter"><br><button @keyup.delete="onDelete">删除</button><button @keyup.esc="onEsc">Esc</button><button @keyup.space="onSpace">空格</button><button  @keyup.right="onRight">右键</button><!-- div默认没有聚焦的 需要加上tabindex 让div可以聚焦  --><div @keyup.down="onDown" tabindex="0">down</div></div></div>
</template><script setup>
const onEnter=()=>{console.log('用户按下了回车键');
}
const onDelete=()=>{console.log('用户按下了删除键');
}
const onEsc=()=>{console.log('用户按下了esc键');
}
const onSpace=()=>{console.log('用户按下了空格键');
}
const onRight=()=>{console.log('用户按下了右键');
}
const onDown=()=>{console.log('用户按下了下键');
}
</script>

当元素聚焦且按下当对应的按键的时候，就会执行相对应的方法

除了以上列举的修饰符外，还有left,up修饰符分别是左键和上键，使用方式一样的。

表单修饰符

lazy修饰符，input失去焦点或者回车后在更新，等于说是把input事件改为了change

number修饰符，绑定的是字符串的话会转成number类型

trim修饰符，去掉前后空格

<template><div><h2>表单修饰符</h2><div><input type="text" v-model.lazy="message"  placeholder="lazy修饰符">  <input type="number" v-model.number="num" @blur="getNum" placeholder="num修饰符"><input type="text" v-model.trim="message2"  placeholder="trim修饰符"><div>message：{{ message }} <br>  message2：{{ message2 }} <br> num：{{ num }}</div></div></div>
</template><script setup>
import { ref } from 'vue';const message=ref('');const message2=ref('');const num=ref('15');const getNum=()=>{console.log('num',num);}
</script><style></style>

不绑定lazy，message会和输入框输入的内容同步更新，绑定后失去焦点才更新

当输入框失去焦点打印了num的值，可以看到已经被转为数字类型的了。

trim 去掉了空格

end

vue修饰符

在 Vue 中，修饰符是一种特殊的后缀，用于改变指令的默认行为 stop <template><div><h2>vue修饰符</h2><div class"box" click"boxClikc"><button click"btnClick">按钮</button&…...

编程日记 2025/5/9 3:57:10

Redis-06.Redis常用命令-列表操作命令

一.列表操作命令 LPUSH key value1 [value2]： LPUSH mylist a b c d: LRANGE key start stop： LRANGE mylist 0 -1： lrange mylist 0 2： d c b RPOP KEY：移除并返回最后一个元素 RPOP list a LLEN key…...

编程日记 2025/5/9 3:39:03

LTSPICE仿真电路：（二十四）MOS管推挽驱动电路简单仿真

1.Mos管驱动电路基本的拓扑前面在十一篇的时候学习了MOS管的简单的应用， 这一篇继续补充MOS管的驱动电路。这个电路应该是最基本的电路仿真，先看电路以及仿真结果，以下仿真结果的电压皆为信号发生器提供的波形图。看仿真结果比较明了&a…...

编程日记 2025/5/8 7:05:46

GFS论文阅读笔记

文章目录摘要一、引言二、设计总览2.1、假设2.2、接口2.3、架构2.4 单Master2.5 Chunk大小2.6 元数据2.7 一致性模型 3 系统交互3.1 租约和变更顺序3.2 数据流3.3 原子性的操作：Record append3.4 快照-SNAPSHOT 4. master操作4.1 namespace的管理与锁定4.2 副本的分…...

编程日记 2025/5/5 6:49:41

6. 王道_网络协议

1 网络协议和网络模型 2 TCP/IP协议族概览 2.1 四层模型的各层实体 2.2 协议数据单元的转换 2.3 常见协议以及分层 2.4 ifconfig 2.5 本地环回设备 3 以太网 3.1 以太网和交换机 3.2 以太网帧 MAC地址大小 48位 6字节 IP地址 32位 4字节 port 16位 2字节 3.3 ARP协议 4 IP协…...

编程日记 2025/5/5 7:05:14

《K230 从熟悉到...》颜色识别

《K230 从熟悉到...》颜色识别颜色识别的基本原理《庐山派 K230 从熟悉到...》颜色识别颜色识别是计算机视觉中的重要组件，它允许算法在图像中检测、识别和分类不同颜色。颜色识别的基本原理颜色识别的核心是通过分析图像中像素点的颜色信息，从…...

编程日记 2025/5/4 17:18:01

实时内核稳定性 - scheduling while atomic

scheduling while atomic问题根因：未成对使用获取cpu_id的函数[ 291.881071][ 0] [XW]: type=0x00000003 cpuid=4 time=1725877230 subj...

编程日记 2025/4/20 9:00:31

数据编排与Dagster：解锁现代数据管理的核心工具

在数据驱动的时代，如何高效管理复杂的数据管道、确保数据质量并实现团队协作？本文深入探讨数据编排的核心概念，解析其与传统编排器的差异，并聚焦开源工具Dagster如何以“资产为中心”的理念革新数据开发流程，助力企业构…...

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

stc8g1k08a定时读取内部1.2v电压值发送到串口1

1189mv #include "stc8g.h"void t0_timer_init(){EA 1;//总中断控制位,启用中断//启用定时器0中断ET0 1;//允许t0中断AUXR | 0x80; //定时器时钟1T模式 t0不频 t1 12分频TMOD & 0xF0; //设置定时器模式TL0 0xCD; //设置定时初始值 205TH0 0xD4; …...

编程日记 2025/5/6 4:13:00

前端开发时的内存泄漏问题

目录 🔍 什么是内存泄漏（Memory Leak）？🚨 常见的内存泄漏场景1️⃣ 未清除的定时器（setInterval / setTimeout）2️⃣ 全局变量（变量未正确释放）3️⃣ 事件监听未清除4️⃣…...

编程日记 2025/5/3 17:14:08

「青牛科技」GC4931P/4938/4939 12-24V三相有感电机驱动芯片对标Allegro A4931/瑞盟MS4931

芯片描述： • 芯片工作电压 4.7-36V （ GC4931P ） • 芯片工作电压 7.5-36V （ GC4938/4939 ） • 外置 mos 驱动， NN 结构，内置升压预驱 • QFN5X5-28 封装，带 ePAD 散热&#…...

编程日记 2025/5/3 1:26:47

2025 年山东危化品经营单位考试攻略分享

山东的考试在全省统一标准。理论考试深入考查危化品相关标准规范，如《危险化学品重大危险源辨识》等。对于危化品储存设施的设计与维护知识要求较高。实际操作考核注重在山东化工园区常见的作业场景，如大型储罐区的操作。报名准备材料与其他省份类似…...

编程日记 2025/5/6 20:24:31

RustDesk 开源远程桌面软件 (支持多端) + 中继服务器伺服器搭建 ( docker版本 ) 安装教程

在需要控制和被控制的电脑上安装软件 github开源仓库地址 https://github.com/rustdesk/rustdesk/releases 蓝奏云盘备份 ( exe ) https://geek7.lanzouw.com/iPf592sadqrc 密码:4esi 中继服务器设置使用docker安装 sudo docker image pull rustdesk/rustdesk-server sudo…...

编程日记 2025/5/6 20:00:38

CMake 中的置变量

在 CMake 中，变量是存储和传递信息的重要方式。以下是一些常用的 CMake 变量，以表格形式列出，包括它们的名称、含义和常见用途： 变量名称含义常见用途CMAKE_CURRENT_SOURCE_DIR当前处理的 CMakeLists.txt 文件所在的源代码目录的…...

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

前后端数据序列化：从数组到字符串的旅程（附优化指南）

🌐 前后端数据序列化：从数组到字符串的旅程（附优化指南） 📜 背景：为何需要序列化？ 在前后端分离架构中，复杂数据类型（如数组、对象）的传输常需序列化为字符…...

编程日记 2025/5/7 20:55:37

为什么你涨不了粉？赚不到技术圈的钱？

“你的代码如果能打造市值百亿的产品，为什么不能为你的未来加冕？” 这不仅是一句口号，而是一段激励人心的故事的起点。想象一下，一个普通的程序员，在无数个深夜独自敲击代码中，他的每一行代码都承载着对未…...

编程日记 2025/5/8 14:57:37

MATLAB之数据分析图系列三

三维堆叠柱状图 Bar3StackPlot.m文件 clc; clear; close all; %三维堆叠柱状图 %% 数据准备 % 读取数据 load data.mat % 初始化 dataset X; s 0.4; % 柱子宽度 n size(dataset,3); % 堆叠组数%% 图片尺寸设置（单位：厘米） figureUnits c…...

编程日记 2025/5/7 20:23:29

【nvidia】Windows 双 A6000 显卡双显示器驱动更新问题修复

问题描述：windows自动更新nvidia驱动会导致只检测得到一个A6000显卡。解决方法下载 A6000 驱动 572.83-quadro-rtx-desktop-notebook-win10-win11-64bit-international-dch-whql.exehttps://download.csdn.net/download/qq_18846849/90554276 不要直接安装。如…...

编程日记 2025/5/8 23:42:36

使用Docker快速部署Dify

使用Docker快速部署Dify：一站式AI应用开发平台 Dify 是一款开源的AI应用开发平台，支持快速构建基于大模型的AI应用。通过Docker部署Dify，可以简化环境配置流程，实现高效部署和扩展。本教程将详细介绍如何通过Docker快速部署Dify。前置条件服务器/本地环境：Linux/Wind…...

编程日记 2025/4/8 7:24:46

Uniapp 实现微信小程序滑动面板功能详解

文章目录前言一、功能概述二、实现思路三、代码实现总结前言 Uniapp 实现微信小程序滑动面板功能详解一、功能概述滑动面板是移动端常见的交互组件，通常用于在页面底部展开内容面板。本文将介绍如何使用 Uniapp 开发一个支持手势滑动的底部面板组件&#xff0…...

编程日记 2025/4/28 14:00:02

PyQt5和OpenCV车牌识别系统

有需要请加文章底部Q哦可远程调试 PyQt5和OpenCV车牌识别系统一介绍此车牌识别系统基于PyQt5和OpenCV开发，蓝牌，新能源(绿牌)，黄牌，白牌均可以准确识别，支持中文识别，可以导出识别结果(Excel格式)。此…...

编程日记 2025/5/7 7:48:55

Redis如何在windows中简单安装？

Redis 在官网上有详细的介绍如何安装，但是看着也乱和麻烦。所以教大家直接用大佬整理好的。 Redis安装 ✨进入安装包地址✨安装Redis✨测试下 ✨进入安装包地址安装包地址： https://github.com/tporadowski/redis/releases Redis安装包是在github上&am…...

编程日记 2025/5/4 8:40:51

在centos7上安装ragflow

在centos7上安装ragflow 前置条件，安装centos7，换yum源，安装docker，安装git 参考文章：利用vmware快速安装一个可以使用的centos7系统-CSDN博客 ragflow的部署参考文章： https://mp.weixin.qq.com/s/Hor…...

编程日记 2025/5/6 15:15:57

LabVIEW多线程

在 LabVIEW 中，多线程编程是提升程序执行效率的关键手段，尤其是在需要并行处理数据采集、控制执行和用户界面交互的场景下。LabVIEW 本身是基于数据流（Dataflow）的编程语言，天然支持多线程，但要高效利用多线…...

编程日记 2025/4/30 4:59:48

MySQL 错误报错：Table ‘performance_schema.session_variables’ Doesn’t Exist

mysqldump -uroot -p ca>ca.sql Enter password: mysqldump: Couldnt execute SHOW VARIABLES LIKE gtid\_mode: Table performance_schema.session_variables doesnt exist 解决： USE performance_schema; CREATE TABLE session_variables (VARIABLE_NAME VAR…...

编程日记 2025/4/21 4:42:23

4月2号.

正则表达式的作用: 作用一: 示例: [1-9]表示0不在开头,\\d表示数字,{5,19}表示位数. 拓展: 正则表达式: System.out.println("a".matches(regex:"[a-z&[def]]")); //trueSystem.out.println("&".matches(regex:"[a-z&[def]]&…...

编程日记 2025/5/7 7:15:22

分析sys高问题的方法总结

一、背景 sys高的问题往往属于底层同学更需要关注的问题，sys高的问题往往表现为几种情况，一种是瞬间的彪高，一种是持续的彪高。这篇博客里，我们总结一下常用的分析方法和分析工具的使用来排查这类sys高的问题。二、通过mpstat配…...

编程日记 2025/5/8 23:42:47

使用Leaflet对的SpringBoot天地图路径规划可视化实践-以黄花机场到橘子洲景区为例

目录前言一、路径规划需求 1、需求背景 2、技术选型 3、功能简述二、Leaflet前端可视化 1、内容布局 2、路线展示 3、转折路线展示三、总结前言在当今数字化与智能化快速发展的时代，路径规划技术已经成为现代交通管理、旅游服务以及城市规划等领域的…...

编程日记 2025/4/28 10:53:40

操作系统(中断异常陷阱) ─── linux第28课

目录 1.硬件中断 2. 时钟中断 3. OS本质 4. 软件中断缺页中断？内存碎片处理？除零野指针错误？ 操作系统本质总结操作系统是对软件硬件资源管理的软件 1.硬件中断中断向量表(IDT)就是操作系统的⼀部分，启动就加载到内存中了…...

编程日记 2025/5/6 5:17:46

数据接口以及ORM查询

一，Model数据关系： （1）种类： 一对一关系（例如身份证和钥匙，账号密码等，各自一一对应。），一对多关系 （例如一个作者可以有很多作品，…...

编程日记 2025/5/6 15:51:58

clickhouse集群版本部署文档

集群版本介绍 clickhouse是表级别的集群，一个clickhouse实例可以有分布式表，也可以有本地表。本文介绍4个节点的clickhouse情况下部署配置。分布式表数据分成2个分片，2个副本，总共4份数据： 节点1数据：分…...

编程日记 2025/5/7 11:59:43

《全栈+双客户端Turnkey方案》架构设计图

今天分享一些全栈双客户端Turnkey方案的架构与结构图。 1：三种分布式部署方案:网关方案，超级服务器单服方案，直连逻辑服方案 2: 单服多线程核心架构: 系统服务逻辑服服务 3: 系统服务的多线程池调度设计 4:LogicServer Update与ECS架构&…...

编程日记 2025/4/29 6:56:04

2025年2月一区SCI-壮丽细尾鹩莺算法Superb Fairy-wren Optimization-附Matlab免费代码

引言本期介绍一种新的元启发式算法——壮丽细尾鹩莺优化算法Superb Fairy-wren Optimization algorithm，SFOA。该算法结合了壮丽细尾鹩莺群体中幼鸟的发育，繁殖后喂养幼鸟的行为，以及它们躲避捕食者的策略，于2025年2月最新发表在…...

编程日记 2025/5/6 17:33:09

Mac下小智AI本地环境部署

可以进行聊天、编写程序、播放歌曲等等的小智语音聊天小助手，在Mac环境下修改源代码，值得拥有。本篇内容主要讲解Mac下环境的搭建，WebSocket的修改。注：环境python3.12.0、ESP-IDF5.4.0、开发板ESP32S3。目录 1.Git安装2.Python…...

编程日记 2025/5/4 12:08:32

小程序30-wxml语法-声明和绑定数据

小程序页面中使用的数据均需要在Page() 方法的 data对象中进行声明定义在将数据声明好以后，在 WXML 使用 Mustache 语法 ( 双大括号{{ }} ) 将变量包起来，从而将数据绑定在 {{ }} 内部可以做一些简单的运算，支持如下几种方式: 算数运算三…...

编程日记 2025/5/6 12:29:27

Go 语言语法精讲：从 Java 开发者的视角全面掌握

《Go 语言语法精讲：从 Java 开发者的视角全面掌握》一、引言1.1 为什么选择 Go？1.2 适合 Java 开发者的原因1.3 本文目标二、Go 语言环境搭建2.1 安装 Go2.2 推荐 IDE2.3 第一个 Go 程序三、Go 语言基础语法3.1 变量与常量3.1.1 声明变量3.1.2 常量定…...

编程日记 2025/5/3 17:16:40

【Python】Python 环境 + Pycharm 编译器官网免费下载安装（图文教程，新手安装，Windows 10 系统）

目录 Python 环境的下载安装第一步进入官网第二步找到匹配 windows 系统的 python 下载页面第三步根据电脑 cpu 架构选择 python 版本第四步安装 python 环境第五步验证 python 环境变量 Pycharm 的下载安装第一步进入官网第二步安装 Pycharm Community Edition第三步第…...

编程日记 2025/5/5 23:58:26

mapbox_gl The requested URL returned error: 401

pod install 安装报错问题 [!] Error installing Mapbox-iOS-SDK [!] /usr/bin/curl -f -L -o /var/folders/63/x3r49j_x1vld56p1sxdvnlj00000gn/T/d20250402-17703-52p5j/file.zip https://api.mapbox.com/downloads/v2/mobile-maps/releases/ios/packages/6.4.1/mapbox-ios-…...

编程日记 2025/5/7 12:15:35