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

Vue｜事件处理

news 2026/2/7 18:17:34

事件处理

    • 1. 事件使用
      • 1.1 事件绑定
      • 1.2 事件参数
    • 2. 事件修饰符
      • 2.1 阻止默认事件
      • 2.2 阻止事件冒泡
      • 2.3 事件只允许触发一次
      • 2.4 事件捕获
      • 2.5 操作当前元素
      • 2.6 行为立即执行无需等待回调
    • 3. 键盘事件
    • 4. 本章小结
      • 4.1 事件使用小结
      • 4.2 事件修饰符小结
      • 4.3 键盘事件小结

1. 事件使用

1.1 事件绑定

接上章内容，在project目录创建事件处理文件夹以及3个html文件

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>事件处理</title><script src="../js/vue.js" type="text/javascript"></script>
</head>
<body><!-- 准备好一个容器 --><div id="root"><h2>{{name}}</h2></div><script type="text/javascript">//Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。// 创建vue实例const vm = new Vue({el:'#root',//函数式data:function(){return{name:'摔跤猫子',};},});</script>
</body>
</html>

需求1：点击一个弹窗显示摔跤猫子，这是一个很简单的需求，想必大家都能很快实现

在这里插入图片描述

	<!-- 需求1 点击按钮 弹窗摔跤猫子 --><button onclick="alert1()">需求1</button><script>function alert1(){alert('摔跤猫子');}</script>

但我们现在是在vue，所以上述方式不可取，得用vue的方式来实现
第一步：将button中click修改为v-on:click
第二步：在vue实例中增加一个methods并实现对应的响应函数

在这里插入图片描述

<!-- 需求1 点击按钮 弹窗摔跤猫子 -->
<button v-on:click="alert1">需求1</button><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。// 创建vue实例const vm = new Vue({el:'#root',//函数式data:function(){return{name:'摔跤猫子',};},methods:{alert1(){alert('摔跤猫子');},},});
</script>

事件简写，可以将v-on:替换成一个@符，效果也是一致的

在这里插入图片描述

<!-- 需求1 点击按钮 弹窗摔跤猫子 -->
< v-on:click="alert1">需求1</>
<!-- 需求1简写方式 -->
<button @click="alert1">需求1简写</button>

1.2 事件参数

需求2：点击按钮时传递参数；例如我们在一个数据列表中想要通过点击按钮的操作来查看某条数据时，就必须要通过单个的标识符来查询；可以看到如下图，在需求2的按钮并没有传递参数，但是直接在alert2函数中进行接收并输出也是有数据显示，因为此处的event是vue实例对象

在这里插入图片描述

那如果需要传递页面上的参数该如何操作呢？只需要在函数后增加一个括号并填写数据即可

在这里插入图片描述

<!-- 需求1 点击按钮 参数传递 -->
<button v-on:click="alert2('摔跤猫子')">需求2</button>

那么新的问题又来了，我既想要接收到vue实例，又想接收页面参数呢该如何操作呢？是不是在对应的JS函数中再加一个event就可以呢？

在这里插入图片描述

可以看到答案是否定的，第二个参数输出的是undefined，正确的方式是在html标签中输入$event关键字即可，vue会自动进行解析，同时参数顺序是一一对应的

在这里插入图片描述

<!-- 需求1 点击按钮 参数传递 -->
<button v-on:click="alert2('摔跤猫子',$event)">需求2</button>

2. 事件修饰符

在Vue中，事件修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理。

修饰符作用
prevent阻止默认事件
stop阻止事件冒泡
once事件只触发一次
capture使用事件的捕获模式
self只有event.target是当前操作的元素时才触发事件
passive事件的默认行为立即执行，无需等待事件回调执行完毕

2.1 阻止默认事件

需求1：阻止默认事件，点击a标签显示弹窗，并阻止a标签的默认行为，不让页面跳转；可以看到如下图，当点击完a标签之后，先弹出弹窗，然后页面会自动跳转，那么就需要通过prevent函数来进行阻止了

在这里插入图片描述

可以看到如下图所示，点击完a标签过后，页面并未跳走，实现方式如下

实现方式代码
通过函数阻止e.preventDefault();
写在click后面@click.prevent

在这里插入图片描述

2.2 阻止事件冒泡

需求2：阻止事件冒泡，避免操作多次；
常见场景：如下图一个商品列表，点击图片或者其他商品信息区域即跳转商品详情，而点击购物车图标时则只做加入购物车操作。

在这里插入图片描述

实现对应的页面布局以及对应的响应函数如下，这里样式简单弄一下只为达到演示效果，注意加入购物车按钮要包含在大容器盒子里。

在这里插入图片描述

这时候如果点击加入购物车按钮，那么两个函数都会响应，可以看到先是弹出的加入购物车，然后又弹出的进入详情

在这里插入图片描述

如何将他们有效的分离从而达到阻止事件冒泡的效果呢，实现方式如下

实现方式代码
通过函数阻止e.stopPropagation();
写在click后面@click.stop

在这里插入图片描述

<!-- 需求2：阻止事件冒泡，避免响应多次 -->
<div @click="alert1" class="div1">商品信息<button @click.stop="alert2">加购</button>
</div>

2.3 事件只允许触发一次

顾名思义，在页面无刷新重新加载的情况下，只允许加载一次；在未使用该修饰符前效果如下图所示，点击一次触发一次

在这里插入图片描述

<!-- 需求3：按钮只触发一次 -->
<button @click="alert1">只让触发一次</button>

如果业务上限制了用户在不刷新页面的前提下只能点击一次该如何处理呢？如下图所示，在无刷新的情况下只触发了一次函数

实现方式代码
写在click后面@click.once

在这里插入图片描述

2.4 事件捕获

可以继续使用需求2的代码来实现案例效果。

在这里插入图片描述
在这里插入图片描述

在现在这种情况下默认是先冒泡再捕获，也就是当点击加购时，是先弹出加购文本然后才是详情

在这里插入图片描述

如果需要使用事件的捕获模式，先捕获，再冒泡，就是达到点击加购时先弹出详情，再弹出加购时则需要使用到如下修饰符

实现方式代码
写在click后面@click.capture

在这里插入图片描述

2.5 操作当前元素

这个修饰符的作用是只有event.target是当前操作的元素时才触发事件，准备代码如下；

在这里插入图片描述
在这里插入图片描述

当点击button按钮时会输出什么呢？它无法定位到当前操作的元素是哪部分，界面上一个div和一个按钮只输出了按钮

在这里插入图片描述

给事件后面增加上self修饰符再试一下，现在点击按钮只会输出按钮的那部分了，只有当点击外部div的时候才会输出相对应的结果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.6 行为立即执行无需等待回调

事件的默认行为立即执行，无需等待事件回调执行完毕；准备一个div，内容高度需超出外部盒子高度，达到滚动条效果

在这里插入图片描述

<style>*{margin-top:20px;}.content{width:200px;height:200px;background:green;overflow: auto;color:white;}.content div{height: 100px;}
</style>
<div class="content"><div>摔</div><div>跤</div><div>猫</div><div>子</div>
</div>

给外部div添加一个滚动事件并监听，可以使用scroll也可以使用wheel

在这里插入图片描述

给滚动事件增加修饰符达到事件立即执行的效果

实现方式代码
写在click后面@click.passive
<div class="content" @wheel="roll"><div>摔</div><div>跤</div><div>猫</div><div>子</div>
</div>

这样看上去效果并不是很明显，先给函数增加一个十万次的for循环，来看一下使用修饰符之前以及之后的效果；如下图就能直观的看到，没有使用修饰符前需要先等结果输出完才能滚动滚动条，但使用了修饰符后，输出循环的结果以及滚动滚动条两者互不冲突

在这里插入图片描述
在这里插入图片描述

3. 键盘事件

准备一个input文本框，可以分别尝试使用不同的键盘事件；keydowm是你按下按钮,不需要松手抬起即触发，keyup需要你按下去并松手才触发，也可以通过不同的按键修饰符达到特殊的效果

<input placeholder="回车提示所输入的值" @keyup="alertValue" />

在这里插入图片描述

按键别名
回车enter
删除delete
退出esc
空space
换行tab
上up
下down
左left
右right

4. 本章小结

4.1 事件使用小结

使用v-on:click 或 通过简写@xxx 绑定事件，其中xxx是事件名称
事件的回调需要配置在methods对象中，最终会在vm上;
@click="demo”和 @click="demo($event)” 两者效果一致，但后者可以传参;

4.2 事件修饰符小结

prevent：阻止默认事件
stop：阻止事件冒泡
once：事件只触发一次
capture：使用事件的捕获模式
self：只有event.target是当前操作的元素时才触发事件
passive：事件的默认行为立即执行，无需等待事件回调执行完毕，只有当使用wheel事件时才会有这种问题,做移动端开发的时候可能会使用到passive

4.3 键盘事件小结

Vue未提供别名的按键，可以使用按健原始的key值去绑定，但注意要转为kebab-case(短横线命名)
系统修饰键 (用法特殊) : ctr1、alt、shift、meta
(1).配合keyup使用: 按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用: 正常触发事件
可以使用keyCode去指定具体的按键
Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

相关文章：

Vue｜事件处理

事件处理1. 事件使用1.1 事件绑定1.2 事件参数2. 事件修饰符2.1 阻止默认事件2.2 阻止事件冒泡2.3 事件只允许触发一次2.4 事件捕获2.5 操作当前元素2.6 行为立即执行无需等待回调3. 键盘事件4. 本章小结4.1 事件使用小结4.2 事件修饰符小结4.3 键盘事件小结1. 事件使用 1.1 事…...

编程日记 2023/2/15 7:04:04

css书写方式

目录标题一、css是什么&#xff1f;二、css的书写方式1、行内样式【不推荐使用&#xff0c;太固定】2、页面样式&#xff08;又叫内联样式&#xff09;3、外联样式【店家推荐】4、import与link标签的区别一、css是什么&#xff1f; css(cascade style sheet)是用来装饰和装扮页…...

编程日记 2023/2/15 7:03:00

Python网络爬虫 学习笔记（2）BeaufitulSoup库

文章目录BeautifulSoup库的基本介绍HTML标签的获取和相关属性HTML文档的遍历prettify()方法使用BeautifulSoup库对HTML文件进行内容查找信息的标记的相关概念&#xff08;非重点&#xff09;find_all()方法&#xff08;重点&#xff09;综合实例&#xff1a;爬取软科2022中国大…...

编程日记 2023/2/15 7:01:50

JavaScript------内建对象

一、解构赋值 1、数组的解构 1.1、解构赋值 const arr ["孙悟空", "猪八戒", "沙和尚"];let a, b, c;[a, b, c] arr; // 等同于 [a, b, c] ["孙悟空", "猪八戒", "沙和尚"] 1.2、声明同时解构 let [d, e…...

编程日记 2023/2/15 7:00:43

React + Redux 处理异步请求

redux 处理异步请求 方式一：在 componentDidmount 中直接进⾏请求，在将数据同步到 redux 创建 Store 仓库 import {createStore } from redux;const defaultState = {banners: [] }const reducer =...

编程日记 2023/2/15 6:59:37

揭秘涨薪50%经验：从功能测试到自动化测试，我是如何蜕变的？

本人在今年互联网大环境如此严峻的情况下&#xff0c;作为一个刚毕业不到一年的初级测试&#xff0c;赶在“金三银四”依然拿到了一些面试机会&#xff0c;并且成功拿下4家公司的offer&#xff0c;其中不乏互联网大厂&#xff0c;而且最高总包给到了接近double&#xff08;无炫…...

编程日记 2023/2/15 6:58:30

【论文速递】MMM2020 - 电子科技大学提出一种新颖的局部变换模块提升小样本分割泛化性能

【论文速递】MMM2020 - 电子科技大学提出一种新颖的局部变换模块提升小样本分割泛化性能 【论文原文】&#xff1a;A New Local Transformation Module for Few-shot Segmentation 【作者信息】&#xff1a;Yuwei Yang, Fanman Meng, Hongliang Li, Qingbo Wu,Xiaolong Xu an…...

编程日记 2023/2/15 6:57:20

补充前端面试题（二）

#$set数据变化视图不更新问题, 当在项目中直接设置数组的某一项的值&#xff0c;或者直接设置对象的某个属性值&#xff0c;这个时候&#xff0c;你会发现页面并没有更新。这是因为 Object.defineProperty()限制&#xff0c;监听不到变化。解决方式&#xff1a;this.$set(你要改…...

编程日记 2023/2/15 6:56:16

JavaScript原型、原型链、原型方法

文章目录原型和原型链prototype、 __ proto __ 、constructor原型链原型方法instanceOfhasOwnPropertyObject.create()、new Object()总结原型和原型链 prototype、 __ proto __ 、constructor 首先我们看下面一段代码 // 构造函数Personfunction Person(name, age) {this.na…...

编程日记 2023/2/15 6:55:12

linux篇【14】：网络https协议

目录 一.HTTPS介绍 1.HTTPS 定义 2.HTTP与HTTPS &#xff08;1&#xff09;端口不同&#xff0c;是两套服务 &#xff08;2&#xff09;HTTP效率更高&#xff0c;HTTPS更安全 3.加密&#xff0c;解密&#xff0c;密钥 概念 4.为什么要加密&#xff1f; 5.常见的加密方式…...

编程日记 2023/2/15 6:54:05

1.9实验9：配置虚链路

1.4.4实验9：配置虚链路 实验目的(1） 实现OSPF 虚链路的配置 (2） 描述虚链路的作用 实验拓扑配置虚链路实验拓扑如图1-19所示。[1] 图1-19 配置虚链路 实验步骤...

编程日记 2023/2/15 6:53:00

三次握手-升级详解-注意问题

TCP建立连接的过程就是三次握手&#xff08;Three-way Handshake&#xff09;&#xff0c;在建立连接的过程实际上就是客户端和服务端之间总共发送三个数据包。进行三次握手主要是就是为了确认双方都能接收到数据包和发送数据包&#xff0c;而客户端和服务端都会指定自己的初始…...

编程日记 2023/2/15 6:51:55

软件架构知识3-系统复杂度-高可用性、可扩展性、低成本、安全、规模

高可用性 系统无中断地执行其功能的能力&#xff0c;代表系统的可用性程度&#xff0c;是进行系统设计时的准则之一。 高可用的“冗余”解决方案&#xff0c;单纯从形式上来看&#xff0c;和之前讲的高性能是一样的&#xff0c;都是通过增加更多机 器来达到目的&#xff0c;但…...

编程日记 2023/2/15 6:50:45

SpringCloud学习笔记 - 自定义及解耦降级处理方法 - Sentinel

1. SentinelRecourse配置回顾 通过之前的学习&#xff0c;我们知道SentinelRecourse配置的资源定位可以通过两种方式实现&#xff1a;一种是URL&#xff0c;另一种是资源名称。这两种限流方式都要求资源ID唯一 RestController public class RateLimitController {GetMapping(…...

编程日记 2023/2/15 6:49:40

Redis之搭建一主多从

搭建redis一主多从的过程 1.在相应位置创建一个文件夹存放redis配置文件 mkdir myredis2.复制redis配置文件到此文件夹中 cp /opt/redis/redis/bin/redis.conf /opt/myredis/redis.conf3.新建三个配置文件 touch redis6379.conf touch redis6380.conf touch redis6381.conf4…...

编程日记 2023/2/15 6:48:34

Transformer机制学习笔记

学习自https://www.bilibili.com/video/BV1J441137V6 RNN&#xff0c;CNN网络的缺点 难以平行化处理&#xff0c;比如我们要算b4b^4b4&#xff0c;我们需要一次将a1a^1a1~a4a^4a4依次进行放入网络中进行计算。 于是有人提出用CNN代替RNN 三角形表示输入&#xff0c;b1b^1b1的…...

编程日记 2023/2/15 6:47:22

1、第一个CUDA代码：hello gpu

目录第一个CUDA代码&#xff1a;hello gpu一、__global__ void GPUFunction()二、gpu<<<1,1>>>();三、线程块、线程、网格知识四、核函数中的printf();五、cudaDeviceSynchronize();第一个CUDA代码&#xff1a;hello gpu #include <stdio.h>void cpu(…...

编程日记 2023/2/15 6:46:17

UG二次开发装配篇 添加/拖动/删除组件方法的实现

我们在UG装配的过程中&#xff0c;经常会遇到需要调整组件目录位置&#xff0c;在软件设计过程中可以通过在目录树里面拖动组件来完成。 那么&#xff0c;如果要用程序实现组件的移动/拖动&#xff0c;我们要怎么做呢&#xff1f; 本节就完成了添加/拖动/删除组件方法的实现&…...

编程日记 2023/2/15 6:45:09

【ros bag 包的设计原理、制作、用法汇总】

ros bag 包的设计原理 序列化和反序列化 首先知道Bag包就是为了录制消息，而消息的保存和读取就涉及到一个广义上的问题序列化和反序列化，它基本上无处不在，只是大部分人没有注意到，举个简单的例子，程序运行的时候，是直接操作的内存，也就是一个结构体或者一个对象，但内…...

编程日记 2023/2/15 6:44:01

Linux网络：聚合链路技术

目录 一、聚合链路技术 1、bonding作用 2、Bonding聚合链路工作模式 3、Bonding实现 一、聚合链路技术 1、bonding作用 将多块网卡绑定同一IP地址对外提供服务&#xff0c;可以实现高可用或者负载均衡。直接给两块网卡设置同一IP地址是不可以的。通过 bonding&#xff0c…...

编程日记 2023/2/15 6:42:53

uniapp 对接腾讯云IM群组成员管理（增删改查）

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

编程新知 2026/1/13 9:59:27

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

编程新知 2025/10/25 17:23:41

AI Agent与Agentic AI：原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

编程新知 2026/1/23 7:04:53

Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

编程新知 2025/9/17 21:39:04

leetcodeSQL解题：3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

编程新知 2025/10/5 19:58:27

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

编程新知 2026/1/29 9:12:46

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/12/12 8:42:24

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化（Gradient Normalization）​​ (2) ​判别器梯度间隙正则化（Discriminator Gradient Gap Regularization）​​ (3) ​自注意力机制（Self-Attention）​​ 3. 完整损失函数 二…...

编程新知 2026/1/31 10:58:46

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

编程新知 2025/12/16 3:15:21

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

编程新知 2026/1/27 2:41:27