vue.js中的一些事件修饰符【前端】
不要一直责怪过去的自己，他独自站在雾里也很迷茫。
目录
- .stop：
- .prevent：
- .self：
- .once：
- .capture：
- .native：
- 何时使用 .native？
.stop：
作用：调用 event.stopPropagation()，阻止事件冒泡。
示例：
<template><div @click="parentClick"><button @click.stop="childClick">Click me</button></div>
</template><script>
export default {methods: {parentClick() {alert('Parent clicked!');},childClick() {alert('Child clicked!');}}
};
</script>
在这个例子中，点击按钮只会触发 childClick 方法，而不会触发 parentClick 方法。
.prevent：
作用：调用 event.preventDefault()，阻止默认事件的发生。
示例：
<template><form @submit.prevent="handleSubmit"><button type="submit">Submit</button></form>
</template><script>
export default {methods: {handleSubmit() {alert('Form submitted!');}}
};
</script>
在这个例子中，表单的提交事件被阻止，handleSubmit 方法会被调用，而不会实际提交表单。也就是表单的提交事件被阻止，这意味着当用户点击“Submit”按钮时，浏览器不会执行默认的表单提交行为。【因为默认情况下，表单提交会导致页面重新加载。】
.self：
作用：只有当事件目标是事件绑定的元素本身时，才触发事件处理程序。
示例：
<template><div @click.self="handleClick">Click me (only this div)</div>
</template><script>
export default {methods: {handleClick() {alert('Div clicked!');}}
};
</script>
在这个例子中，只有点击 div 本身时，才会触发 handleClick 方法，点击 div 内部的其他元素不会触发。
.once：
作用：只触发一次事件处理程序，之后自动移除。
示例：
<template><button @click.once="handleClick">Click me (once)</button>
</template><script>
export default {methods: {handleClick() {alert('Button clicked once!');}}
};
</script>
在这个例子中，点击一次按钮后会弹出提示框，但之后再点击按钮不会有任何反应。
.capture：
作用：使用事件捕获模式而不是冒泡模式。
示例：
<template><div @click.capture="handleClick">Click me (capture)</div>
</template><script>
export default {methods: {handleClick() {alert('Div clicked during capture phase!');}}
};
</script>
在这个例子中，事件处理程序会在事件捕获阶段被调用。
.native：
作用：用于在自定义组件上监听原生事件。
示例：
<template><custom-component @click.native="handleClick"></custom-component>
</template><script>
export default {methods: {handleClick() {alert('Native click event!');}}
};
</script>
在这个例子中，handleClick 方法会在 custom-component 的原生点击事件上被触发。
示例2:
有一个自定义的按钮组件 my-button，它内部有一个 元素。我们希望在点击这个按钮时触发一个事件：
<template><button @click="handleInnerClick">Inner Button</button>
</template><script>
export default {methods: {handleInnerClick() {// 处理内部按钮的点击事件console.log('Button clicked!');}}
}
</script>
如果在父组件中使用这个 my-button：
<my-button @click="handleClick">Click Me</my-button>
这里的 @click 监听的是 my-button 组件的自定义事件，而不是内部 <button> 的点击事件。
所以如果我们想监听内部 <button> 的点击事件，可以这样写：
<my-button @click.native="handleClick">Click Me</my-button>
何时使用 .native？
- 使用自定义组件时：当您需要直接监听组件内部的原生事件，而不是组件发出的自定义事件时，使用 .native 修饰符。
- 性能考虑：在某些情况下，使用 .native 可以减少事件的传播，因为您直接监听的是原生事件。
相关文章：
vue.js中的一些事件修饰符【前端】
不要一直责怪过去的自己，他独自站在雾里也很迷茫。 目录 .stop：.prevent：.self：.once：.capture：.native：何时使用 .native？ .stop： 作用：调用 event.stopPro…...
WEBSTORM前端 —— 第2章：CSS —— 第4节：盒子模型
目录 1.画盒子 2.Pxcook软件 3.盒子模型——组成 4.盒子模型 ——边框线 5.盒子模型——内外边距 6.盒子模型——尺寸计算 7.清除默认样式 8.盒子模型——元素溢出 9.外边距问题 ①合并现象 ②塌陷问题 10.行内元素——内外边距问题 11.盒子模型——圆角 12.盒子…...
Cursor —— AI编辑器 使用详解
Cursor - The AI Code Editor 一、Cursor 是什么？ Cursor 是一款优秀的AI代码编辑器，它内置了 Deepseek-R1、GPT-4、Claude等 AI 模型。 简单说，就是：Cursor VS Code 编辑器 AI 大模型 Cursor 功能特性（代码补全、…...
故障诊断——复现github代码ClassBD-CNN（BDCNN）
刚好看到这篇文献有github代码，而且也比较新，感觉可以当作自己论文中的对比方法。 https://www.sciencedirect.com/science/article/pii/S0888327024006484 （论文地址） （看到4090，有点想劝退自己......&…...
局部和整体的关系
Prompt：为什么要研究局部和整体的关系呢？是因为很多情况下，局部就能表达出整体？ 这是一个非常本质的问题，其实你已经接近数学和物理中“几何本质”的核心了。我们研究局部和整体的关系，是因为：…...
1.5 点云数据获取方式——双目立体相机
图1-5-1 双目立体相机 双目相机通过模拟人眼立体视觉，利用两个摄像头的视差信息计算物体深度，进而生成 3D 点云，具有成本低、体积小、信息丰富等优势，成为中...
Flume启动报错
报错1： 报错2： File Channel transaction capacity cannot be greater than the capacity of the channel capacit... 解决方案：删除配置...
)
leetcode 21. 合并两个有序链表(c++解法+相关知识点复习)
目录 题目 所需知识点复习 1.链表 1.1单链表 1.2哑结点（Dummy Node） 解答过程 1.循环双指针解法 2.递归解法 2025.4.29想到其他知识点会后续再继续补充。 题目 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表…...
链表反转_leedcodeP206
P206反转链表 原题 反转思路 将链表反转的过程分为两个区域： 🟦 未反转区（待处理） 原链表中还没有处理（还没有反转指针方向）的部分，从 current 开始一直到链表尾部。 🟩 已反转…...
Laravel+API 接口
LaravelAPI 接口 网课连接：BIlibili. 中文文档. 1.RestFul Api编码风格 一、API设计 修改hosts，C:\Windows\System32\drivers\etc\hosts，增加127.0.0.1 api.lv8.com # Laravel 框架 用这个域名来测试（推荐规范） 在…...
在 Ubuntu 上离线安装 ClickHouse
在 Ubuntu 上离线安装 ClickHouse 的步骤如下： 一.安装验证 # 检查服务状态 sudo systemctl status clickhouse-server #删除默认文件 sudo rm /etc/clickhouse-server/users.d/default-password.xml # 使用客户端连接 clickhouse-client --password...
【AI微信小程序开发】掷骰子小程序项目代码：自设骰子数量和动画（含完整前端代码）
系列文章目录 【AI微信小程序开发】AI减脂菜谱小程序项目代码：根据用户身高/体重等信息定制菜谱（含完整前端+后端代码）【AI微信小程序开发】AI菜谱推荐小程序项目代码：根据剩余食材智能生成菜谱（含完整前端+后端代码）【AI微信小程序开发】图片工具小程序项目代码：图片压…...
Linux-02-VIM和VI编辑器
第一节:什么是VI和VIM编辑器: VI是Unix和类Unix操作系统中出现的通用的文本编辑器。VIM是从VI发展出来的一个性能更强大的文本编辑器可以主动的以字体颜色辨别语法的正确性,方便程序设计,VIM和VI编辑器完全兼容。使用:vi xxx文件 或者vim xxx文件,简单来说就是用来编辑文件的一…...
同为科技 智能PDU产品选型介绍-EN10/G801FR
随着各行业对数据中心机房重视程度的不断提高， 加强机柜微环境及电源计量、监控和管理则十分必要。在新型微模块化数据中心供配电系统建设中，UPS电源、智能PDU、监控管理系统、资产管理等产品早已成为IDC机房不可或缺的部分。其中，智能PDU通过…...
NS-SWIFT微调Qwen3
目录 一、NS-SWIFT简介 二、Qwen3简介 三、微调Qwen3 1、安装NS-SWIFT环境 2、准备训练数据 3、Lora微调 4、GROP训练 5、Megatron并行训练 一、NS-SWIFT简介 SWIFT（Scalable lightWeight Infrastructure for Fine-Tuning）是魔搭ModelScope开源社…...
借 AI 热潮，深挖 [风车 AI ] 为跨境电商打造的图片翻译黑科技
家人们，这几年 AI 技术简直像坐了火箭一样飞速发展，生活里、工作中到处都能看到它的身影。对咱们跨境行业来说，语言翻译一直是个让人头疼的大问题。今天咱就借着这股 AI 热潮，好好深挖一下风车 AI 为跨境打造的那些超厉害的翻译黑…...
uni-app 中封装全局音频播放器
在开发移动应用时，音频播放功能是一个常见的需求。无论是背景音乐、音效还是语音消息，音频播放都需要一个稳定且易于管理的解决方案。在 uni-app 中，虽然原生提供了 uni.createInnerAudioContext 方法用于音频播放，但直接使用它可…...
Uniapp：设置TabBar
目录 一、setTabBarBadge：增加文本二、removeTabBarBadge：移除文本三、showTabBarRedDot：显示红点四、hideTabBarRedDot：隐藏红点一、setTabBarBadge：增加文本 为 tabBar 某一项的右上角添加文本。 uni.setTabBarBadge({index: 0,text: 1 })参数类型必填说明indexNumber…...
如何查看k8s获取系统是否清理过docker镜像
k8s集群某个节点down掉后，pod就会漂移到其他节点，但是在该节点却又执行了拉取镜像操作，明明该节点之前部署过该容器的，不知为什么又拉取了一次镜像（镜像拉取配置的优先使用本地），所以怀疑是触发…...
【Linux网络】深入解析I/O多路转接 - Select
📢博客主页：https://blog.csdn.net/2301_779549673 📢博客仓库：https://gitee.com/JohnKingW/linux_test/tree/master/lesson 📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正！ &…...
如何解决 Xcode 签名证书和 Provisioning Profile 过期问题
在 iOS 应用开发过程中，签名证书和 Provisioning Profile 是确保应用安全性和合法性的关键组件。然而，当这些证书或配置文件过期时，开发者可能会遇到编译或归档失败的问题。本文将详细介绍如何解决 Xcode 中“iOS Distribution”证书未找到和…...
[C++]C++20协程的原理
文章目录 协程的状态机Promise 对象挂起和恢复机制协程的执行流程示例代码分析 C 协程是 C20 引入的一项重要特性，它提供了一种更简洁、高效的异步编程方式。下面从协程的状态机、Promise 对象、挂起和恢复机制等方面介绍其底层实现原理。 协程的状态机 从底层角度…...
Oracle OCP证书有效期是三年？
这一段时间，网上经常传出消息Oracle OCM认证证书有效期为三年，其实这个假消息，通过博睿谷与Oracle官方人员确认，OCP认证证书有效期是永久的。 OCP证书本身永久有效，但老版本的OCP证书代表着更多的项目经验，…...
2025.4.29_STM32_看门狗WDG
1.WDG简介 大概意思就是给看门狗设置一个时间范围，在这个范围内必须喂狗(重置定时器)，这个操作必须一直执行，比如看门狗的的时间范围是1-2秒，我们就必须间隔1-2秒就喂一次狗，否则它自减到0时就会重置电路，相…...
基于Java，SpringBoot，HTML水文水质监测预警系统设计
摘要 随着水资源管理需求的日益增长，构建高效、精准的水文监测预警系统至关重要。本文设计并实现了一套基于 Java、SpringBoot 和 HTML 技术的水文监测预警系统。系统采用 Java 语言与 SpringBoot 框架搭建后端服务，利用其强大的业务逻辑处理能力与高效…...
Qt开发：JSON字符串的序列化和反序列化
文章目录 一、构建和解析单个JSON对象二、JSON对象中嵌套多个JSON对象三、JSON对象中组建多个数组对象四、构建和解析数组对象 一、构建和解析单个JSON对象 1.1 JSON对象的构建 使用key-value形式生成JSON对象 #include <QJsonObject> #include <QJsonDocument> …...
第10次：电商项目配置开发环境
本次内容主要为给整个电商项目配置好开发环境，包括如下环节： 创建电商项目xiaoyu_mall，Django版本默认是最新的大版本5.2配置应用目录，因项目会涉及到多个应用，为保证项目结构清晰，将在项目下建立apps目录…...
【强化学习系列】Q-learning——从贝尔曼最优方程谈起
引言 上一篇贝尔曼最优方程中我们已经推导出动作价值形式的贝尔曼最优方程： q π ∗ ( s , a ) ∑ s ′ ∈ S ∑ r ∈ R p ( s ′ , r ∣ s , a ) [ r γ max a ′ q π ∗ ( s ′ , a ′ ) ] \begin{equation}q_{\pi^*}(s,a)\sum_{s\in S}\sum_{r\in R}p(s,…...
Java 基础--运算符全解析
【Java 基础】Java 运算符全解析：程序世界的“加减乘除”与“是非对错” 作者：IvanCodes 发布时间：2025年4月29日🐣 专栏：Java教程 嗨，各位 Java 探险家们！👋 掌握了变量、数据类…...
【神经网络与深度学习】改变随机种子可以提升模型性能？
引言 随机种子在机器学习和数据处理领域中至关重要，它决定了模型训练、数据划分以及参数初始化的随机性。虽然固定随机种子能确保实验的可重复性，但改变随机种子有时会意外提升模型性能。本文将探讨这一现象的潜在原因，并揭示随机性如何影响…...
一页概览：统一数据保护方案
2010年左右手绘，用的是公司的信纸，签字笔，马克笔。方案为统一数据保护。其实解释备份软件加备份硬件（支持重复数据删除）的联合解决方案。...
Python中的itertools模块常见函数用法示例
itertools ，迭代工具模块，提供了用于高效处理迭代器和组合问题的工具。 1. itertools.permutations(iterable, rNone) 功能：生成输入迭代器的所有可能排列。 参数： iterable：输入的可迭代对象。r：可选参数…...
微服务学习笔记
1 微服务 微服务：基于业务领域建模的、可独立发布的服务，把业务内聚的功能封装起来，并通过网络供其他服务访问。 好处： 技术异构性，不同服务可以使用不同的技术弹性，可以更好的处理服务不可用的问题扩展…...
实验七：基于89C51和DS18B20的温度采集与显示
一、实验目的 学习使用DS18B20数字温度传感器采集温度数据。使用4位共阳极数码管显示温度数据，显示精度到小数点后两位。熟悉89C51单片机的I/O口操作和位选控制。二、实验器材 89C51单片机开发板DS18B20数字温度传感器4位共阳极数码管三极管8550（用于位选驱动）电阻、电容等辅…...
cmake:基础
本文主要探讨cmake语法相关知识。 cmake(GUI)安装 apt install cmake-curses-gui cmake -y cmake语法 cmake_minimum_required(VERSION 版本号) 设置cmake最低版本 project(工程名) <> PROGECT_NAME/CMAKE_PROJECT_NAME 设置工程名字 add_library(库名 SHARED/STAT…...
1.8 点云数据获取方式——小结
点云，作为三维空间信息的直观载体，在各行各业都得到了广泛应用。而能够获得三维点云数据手段，也是极为丰富。本章节主要介绍了主动式手段（包括激光雷达、ToF相机、结构光相机）和被动式手段（双目立体相机、单…...
超越单体：进入微服务世界与Spring Cloud概述
大家好！欢迎来到我的新系列文章——《微服务架构：Spring Cloud实战指南》。在之前的《Java服务端核心技术》系列中，我们一起深入学习了如何使用Spring Boot构建功能强大、安全可靠的单体应用程序。我们掌握了Spring的核心原理、Web开发、数据…...
深度学习篇---模型权重变化与维度分析
文章目录 前言1. 权重的作用2. 权重的维度全连接层卷积层3. 权重的变化4.实例代码（PyTorch 框架）场景代码解释模型定义数据生成优化设置初始权重设置训练循环前向传播反向传播更新权重结果输出维度与变化总结维度匹配梯度跟新5. 增加网络深度：多层感知机（MLP）代码解释6. 权…...
)
AtCoder Beginner Contest 403(题解ABCDEF)
A - Odd Position Sum #1.奇数数位和 #include<iostream> #include<vector> #include<stdio.h> #include<map> #include<string> #include<algorithm> #include<queue> #include<cstring> #include<stack> #include&l…...
计算机视觉与深度学习 ｜ 双目立体匹配算法理论+Opencv实践+matlab实践
双目立体匹配 一、双目立体匹配算法理论与OpenCV、matlab实践一、双目立体匹配理论二、OpenCV实践三、优化建议四、算法对比与适用场景二、双目立体匹配算法理论及Matlab实践指南一、双目立体匹配理论二、Matlab实践步骤三、算法对比与优化建议四、完整流程示例五、常见问题与解…...
深挖Java基础之：认识Java（创立空间/先导：Java认识）
今天我要介绍的是在Java中对Java的一些基本语法的认识与他们的运用，以及拟举例子说明和运用场景，优势和劣势， 注：本篇文章是对Java的一些基本的，简单的代码块的一些内容，后续会讲解在Java中的变量类型&…...
springmvc从请求到响应的流程分析
一、创建springmvc项目 通过网盘分享的文件：hello-springmvc.zip 链接: https://pan.baidu.com/s/1VmUHurgph661ND9LWqKhaw 提取码: b36a 二、从请求到响应流程 我们先画一下流程图，如下图所示。 三、源码解析 3.1 HttpServlet接收请求 用户发送htt…...
RabbitMQ 启动报错 “crypto.app“ 的解决方法
RabbitMQ 启动报错 “crypto.app” 的解决方法 在使用 RabbitMQ 时，有时会遇到启动报错的问题，其中一种常见的报错是： {"init terminating in do_boot",{error,{crypto,{"no such file or directory","crypto.app…...
idm 禁止自动更新提示（修改注册表）
目前版本：v 6.42 Bulid 35 运行-regedit- 计算机\HKEY_CURRENT_USER\SOFTWARE\DownloadManager 计算机\HKEY_CURRENT_USER\SOFTWARE\DownloadManagerLstCheck -> 0 重启...
LeetCode - 02.02.返回倒数第 k 个节点
目录 题目 解法一 双指针算法 原理 详细过程 为什么它有效？ 时间复杂度与空间复杂度 代码 解法二 递归算法 核心思想 执行流程详解 具体例子 代码 题目 面试题 02.02. 返回倒数第 k 个节点 - 力扣（LeetCode） 解法一 双指针算…...
＜c++＞使用detectMultiScale的时候出现opencv.dll冲突
最近在试着弄一下opencv，看网上很多人都是的用的python，但是python跑起来没有c快，生成的qt工程也大一些，想着试试c看能不能生成opencv。然后就用到这个函数，detectMultiScale。 出现一个问题，就是我的程序在…...
从实列中学习linux shell脚本2: shell 的变量 方法 命名和使用规则之类 比如拿：获取cpu 负载，以及负载超过2.0 以后就发生邮件为例子
以下是对 Linux Shell 中变量、方法（函数）、命名规则的详细说明，并结合 获取CPU负载并在负载超过2.0时发送邮件 的示例进行演示： 1. Shell 变量 命名规则 命名格式：变量名由字母、数字、下划线组成，不能以…...
Centos Ubuntu RedOS系统类型下查看系统信息
文章目录 一、项目背景二、页面三、说明四、代码1.SysInfo2.EmsSysConfig3.HostInformationController4.HostInfo 一、项目背景 公司项目想展示当前部署系统的：操作系统，软件版本、IP、主机名。 二、页面 三、说明 说明点1：查询系统类型及…...
【Hive入门】Hive高级特性：视图与物化视图
在大数据分析中，Hive作为Hadoop生态系统中的重要组件，提供了强大的数据查询和管理能力。除了基本表的操作，Hive还支持 视图和 物化视图，这两种特性在数据管理和查询优化中扮演着重要角色。本文将深入探讨视图的创建与性能影响&…...
特征工程四-2：使用GridSearchCV 进行超参数网格搜索（Hyperparameter Tuning）的用途
1. GridSearchCV 的作用 GridSearchCV（网格搜索交叉验证）用于： 自动搜索 给定参数范围内的最佳超参数组合。交叉验证评估 每个参数组合的性能，避免过拟合。返回最佳模型，可直接用于预测或分析。 2. 代码逐行解析 (1…...