Vue 3 30天精进之旅：Day 05 - 事件处理
引言
在前几天的学习中，我们探讨了Vue实例、计算属性和侦听器。这些概念为我们搭建了Vue应用的基础。今天，我们将专注于事件处理，这是交互式Web应用的核心部分。通过学习如何在Vue中处理事件，你将能够更好地与用户进行交互，实现动态应用行为。
1. Vue中的事件处理
在Vue中，事件处理主要是通过v-on指令来实现的。v-on指令允许你监听DOM事件，并在事件发生时执行相应的JavaScript代码。
1.1 使用v-on指令
在Vue模板中，你可以使用v-on指令来绑定事件。例如，下面的代码展示了如何监听一个点击事件：
<template><div><button v-on:click="handleClick">点击我</button></div>
</template><script>
export default {methods: {handleClick() {alert('按钮被点击了！');},},
};
</script>
在这个示例中，v-on:click指令用于监听button元素的点击事件。当用户点击按钮时，会调用handleClick方法，并显示一个弹窗。
2. 事件修饰符
Vue提供了一些事件修饰符，以简化事件处理和提高代码的可读性。这些修饰符可以直接添加到事件绑定中。
2.1 常用事件修饰符
-
.stop：调用event.stopPropagation()，阻止事件冒泡。<button v-on:click.stop="handleClick">点击我</button> -
.prevent：调用event.preventDefault()，阻止默认事件行为。<form @submit.prevent="handleSubmit"><button type="submit">提交</button> </form> -
.once：只触发一次事件处理器。<button v-on:click.once="handleClick">点击我</button> -
.capture：在捕获阶段触发事件处理器。
3. 方法参数
在事件处理器中，你可以传递参数。你可以通过箭头函数或使用$event特殊变量来实现。
3.1 使用箭头函数
<button @click="(event) => handleClick(event, '参数')">点击我</button>
3.2 使用$event
<button @click="handleClick($event)">点击我</button>
在handleClick方法中，你可以访问事件对象和传递的参数。
4. 事件处理的最佳实践
- 保持方法简洁：避免在事件处理器中执行复杂逻辑，尽量调用其他方法来处理业务逻辑。
- 使用命名方法：为事件处理方法命名，并保持一致性，以提高可读性。
- 避免直接在模板中使用复杂表达式：尽量避免在模板中使用复杂的表达式，保持模板的简洁明了。
5. 实践：构建一个简单的计数器应用
让我们在今天的学习中创建一个简单的计数器应用，用户可以通过点击按钮来增加或减少计数。
<template><div><h1>计数器: {{ count }}</h1><button @click="increment">增加</button><button @click="decrement">减少</button><button @click.stop="reset">重置</button></div>
</template><script>
export default {data() {return {count: 0,};},methods: {increment() {this.count += 1;},decrement() {this.count -= 1;},reset() {this.count = 0;},},
};
</script><style>
h1 {color: #42b983;
}
button {margin: 5px;
}
</style>
6. 代码解析
- 我们在
data中定义了一个count属性，用于存储计数值。 increment、decrement和reset方法分别用于增加、减少和重置计数。- 在模板中，我们使用
@click指令监听按钮的点击事件，并调用相应的方法。
7. 总结
今天我们学习了Vue中的事件处理，包括v-on指令的使用、事件修饰符的功能，以及如何传递参数给事件处理器。通过实践计数器应用，我们巩固了对事件处理的理解，并为后续更复杂的交互打下了基础。
相关文章：
Vue 3 30天精进之旅：Day 05 - 事件处理
引言 在前几天的学习中，我们探讨了Vue实例、计算属性和侦听器。这些概念为我们搭建了Vue应用的基础。今天，我们将专注于事件处理，这是交互式Web应用的核心部分。通过学习如何在Vue中处理事件，你将能够更好地与用户进行交互&#…...
STM32完全学习——RT-thread在STM32F407上移植
一、写在前面 关于源码的下载，以及在KEIL工程里面添加操作系统的源代码，这里就不再赘述了。需要注意的是RT-thread默认里面是会使用串口的，因此需要额外的进行串口的初始化，有些人可能会问，为什么不直接使用CubMAX直接…...
Shodan Dorks安装指南，通过Shodan搜索漏洞
Shodan Dorks是一种基于Shodan的工具，不知道Shodan是什么的不必阅读下面的内容。简单的说就是，利用预定义的查询（dorks），通过Shodan轻松搜索漏洞和机密信息。 推荐渗透测试人员自行测试。 安装方法： 1.确…...
poi在word中打开本地文件
poi版本 5.2.0 方法1：使用XWPFFieldRun（推荐） 比如打开当前相对路径的aaaaa.docx XWPFFieldRun run paragraph.createFieldRun();CTRPr ctrPr run.getCTR().addNewRPr();CTFonts font ctrPr.addNewRFonts();// 设置字体font.setAscii(&quo…...
Linux查看服务器的内外网地址
目录： 1、内网地址2、外网地址3、ping时显示地址与真实不一致 1、内网地址 ifconfig2、外网地址 curl ifconfig.me3、ping时显示地址与真实不一致 原因是dns缓存导致的，ping这种方法也是不准确的，有弊端不建议使用，只适用于测试…...
OAuth1和OAuth2授权协议
OAuth 1 授权协议 1. 概述 OAuth1 是 OAuth 标准的第一个正式版本，它通过 签名和令牌 的方式，实现用户授权第三方访问其资源的功能。在 OAuth1 中，安全性依赖于签名机制，无需传递用户密码。 2. 核心特性 使用 签名（…...
DeepSeek学术题目选择效果怎么样？
论文选题 一篇出色的论文背后，必定有一个“智慧的选题”在撑腰。选题足够好文章就能顺利登上高水平期刊；选题不行再精彩的写作也只能“当花瓶”。然而许多宝子们常常忽视这个环节，把大量时间花在写作上，选题时却像抓阄一样随便挑一…...
顺序表和链表)
数据结构(一)顺序表和链表
目录 1. 时间复杂度和空间复杂度 2. 顺序表 3. 链表 1. 时间复杂度和空间复杂度 如何估算一个算法的效率高低一般就是使用到时间复杂度和空间复杂度; 时间复杂度是评价一个算法运行快慢的, 而空间复杂度是算法额外需要空间大小. 1.1 时间复杂度的计算: 准确来说时间复杂度是…...
单相可控整流电路——单相桥式全控整流电路
以下是关于单相桥式整流电路的介绍： 电路构成（带阻性负载的工作情况） - 二极管：是电路0的核心元件，通常采用四个同型号或根据需求选择不同型号的二极管，如1N4001、1N4007等，如图Vt1和Vt4是一对…...
DeepSeek-R1：性能对标 OpenAI，开源助力 AI 生态发展
DeepSeek-R1：性能对标 OpenAI，开源助力 AI 生态发展 在人工智能领域，大模型的竞争一直备受关注。最近，DeepSeek 团队发布了 DeepSeek-R1 模型，并开源了模型权重，这一举动无疑为 AI 领域带来了新的活力。今…...
【Maui】提示消息的扩展
文章目录 前言一、问题描述二、解决方案三、软件开发（源码）3.1 消息扩展库3.2 消息提示框使用3.3 错误消息提示使用3.4 问题选择框使用 四、项目展示 前言 .NET 多平台应用 UI (.NET MAUI) 是一个跨平台框架，用于使用 C# 和 XAML 创建本机移…...
001 mybatis入门
文章目录 mybatis是什么ORM是什么ORM框架和MyBatis的区别#{}和${}的区别编码流程UserDaoImpl.javaUserDao.javaUser.javadb.propertiesSqlMapConfig.xmlUserMapper.xmlMybatisTest.javapom.xmluser.sql 表现层 SpringMVC 业务层 Spring 持久层 Mybatis https://mybatis.org/myb…...
tomcat的accept-count、max-connections、max-threads三个参数的含义
tomcat的accept-count、max-connections、max-threads三个参数的含义 tomcat的accept-count、max-connections、max-threads三个参数的含义 max-connections：最大连接数 最大连接数是指，同一时刻，能够连接的最大请求数 需要注意的是&#x…...
8.2 从看图识字到智能解读：GPT-4 with Vision 开启多模态 AI 新纪元
从看图识字到智能解读：GPT-4 with Vision 开启多模态 AI 新纪元 引言：AI 的多模态跃迁 随着人工智能技术的快速发展，我们正迈入一个新的智能交互时代。传统的 AI 模型主要聚焦于文本处理，而多模态 AI 模型如 GPT-4 with Vision（GPT-4V） 则能够同时处理图像和文本。GPT-4…...
用法)
.strip()用法
.strip("") 是 Python 字符串方法 strip() 的一个用法，它会去除字符串两端指定字符集中的字符。 基本语法： string.strip([chars])string: 这是你要操作的字符串。chars: 可选参数，表示你想要去除的字符集（默认为空格…...
蓝桥杯例题三
无论前方困难如何重重，我们都要坚定信念，勇往直前。面对挑战和困境，不要退缩，不要放弃，要坚持走下去。当我们感到疲惫时，要告诉自己：“我可以，我一定行！”相信自己的实力…...
关于pygame窗口输入法状态异常切换现象的分析报告
一、问题描述 1.1 需求说明 我们准备使用Pygame开发一个键盘输入测试程序，需要确保输入时窗口始终处于英文输入模式，也就是禁止中文输入； 1.2 现象描述 控制台种显示，程序在初始化时，会有两次IMM状态切换操作&…...
【JavaEE进阶】应用分层
目录 🎋序言 🍃什么是应用分层 🎍为什么需要应用分层 🍀如何分层(三层架构) 🎄MVC和三层架构的区别和联系 🌳什么是高内聚低耦合 🎋序言 通过上⾯的练习,我们学习了SpringMVC简单功能的开…...
两数相加：链表操作的基础与扩展
两数相加：链表操作的基础与扩展 引言 链表（Linked List）是一种灵活且高效的数据结构，特别适用于动态增删操作。无论是初学者还是资深程序员，链表的基本操作都是算法学习中的重要一环。而 “两数相加” 问题则是链表操…...
ChatGPT从数据分析到内容写作建议相关的46个提示词分享！
在当今快节奏的学术环境中，研究人员面临着海量的信息和复杂的研究任务。幸运的是，随着人工智能技术的发展，像ChatGPT这样的先进工具为科研人员提供了强大的支持。今天就让我们一起探索如何利用ChatGPT提升研究效率进一步优化研究流程。 ChatG…...
解析“in the wild”——编程和生活中的俚语妙用
解析“in the wild”——编程和生活中的俚语妙用 看下面的技术文章中遇到 in the wild这个词，想要研究一下，遂产生此文。 Are there ever pointers to pointers to pointers? There is an old programming joke which says you can rate C programmers…...
rocketmq原理源码分析之控制器模式- dledger
简介 RocketMQ 4.5 版本之前，RocketMQ 的broker是 Master/Slave部署架构，一组 broker 有一个 Master ，有0到若干Slave，Slave复制Master消息存储，随时替代下线的Master。Master/Slave部署架构提供一定的高可用性&#x…...
Hello Moto
“Hello Moto” 是摩托罗拉（Motorola）的一句经典广告口号，用于推广其品牌和产品，特别是在手机领域。以下是它的含义和背景： 1. 品牌宣传的标志性语句 直白含义：简单地向摩托罗拉打招呼（“Hell…...
存储基础 -- SCSI命令格式与使用场景
SCSI命令格式与使用场景 1. SCSI命令描述符块（CDB） 1.1 CDB基本概念 SCSI命令通过**命令描述符块（CDB, Command Descriptor Block）**表示。 CDB长度：SCSI命令根据使用场景有不同长度的CDB，常见的有6字节…...
ceph基本概念，架构，部署（一）
一、分布式存储概述 1.存储分类 存储分为封闭系统的存储和开放系统的存储，而对于开放系统的存储又被分为内置存储和外挂存储。 外挂存储又被细分为直连式存储(DAS)和网络存储(FAS)，而网络存储又被细分网络接入存储(NAS)和存储区域网络(SAN)等。 DAS(D…...
CNN-GRU卷积门控循环单元时间序列预测（Matlab完整源码和数据）
CNN-GRU卷积门控循环单元时间序列预测（Matlab完整源码和数据） 目录 CNN-GRU卷积门控循环单元时间序列预测（Matlab完整源码和数据）预测效果基本介绍CNN-GRU卷积门控循环单元时间序列预测一、引言1.1、研究背景与意义1.2、研究现状1…...
Ubuntu 顶部状态栏 配置，gnu扩展程序
顶部状态栏 默认没有配置、隐藏的地方 安装使用Hide Top Bar 或Just Perfection等进行配置 1 安装 sudo apt install gnome-shell-extension-manager2 打开 安装的“扩展管理器” 3. 对顶部状态栏进行配置 使用Hide Top Bar 智能隐藏，或者使用Just Perfection 直…...
React应用深度优化与调试实战指南
一、渲染性能优化进阶 1.1 精细化渲染控制 typescript 复制 // components/HeavyComponent.tsx import React, { memo, useMemo } from react;interface Item {id: string;complexData: {// 复杂嵌套结构}; }const HeavyComponent memo(({ items }: { items: Item[] }) &g…...
Spring中的事件和事件监听器是如何工作的？
目录 一、事件（Event） 二、事件发布器（Event Publisher） 三、事件监听器（Event Listener） 四、使用场景 五、总结 以下是关于Spring中的事件和事件监听器的介绍与使用说明，结合了使用场景&…...
Vue.js组件开发-实现多个文件附件压缩下载
在 Vue 项目中实现多个附件压缩下载，可以借助 jszip 库来创建压缩文件，以及 file-saver 库来保存生成的压缩文件。 步骤 1：安装依赖 首先，在 Vue 项目中安装 jszip 和 file-saver： npm install jszip file-saver步骤…...
基于dlib/face recognition人脸识别推拉流实现
目录 一.环境搭建 二.推拉流代码 三.人脸检测推拉流 一.环境搭建 1.下载RTSP服务器MediaMTX与FFmpeg FFmpeg是一款功能强大的开源多媒体处理工具，而MediaMTX则是一个轻量级的流媒体服务器。两者结合，可以实现将本地视频或者实时摄像头画面推送到RTSP流，从而实现视频…...
qt QNetworkRequest详解
1、概述 QNetworkRequest是Qt网络模块中的一个核心类，专门用于处理网络请求。它封装了网络请求的所有关键信息，包括请求的URL、HTTP头部信息等，使得开发者能够方便地在Qt应用程序中执行网络操作，如文件下载、网页内容获取等。QNe…...
uvm timeout的哪些事
如下图所示，设置timeout并未生效，原因多了一个空格，坑 进一步分析，默认是overidable的 是否加括号呢，如下所示，这两个造型都可以，中间有空格也行 那么，我加上单位可以吗，…...
JavaScript赋能智能网页设计
构建AI驱动的实时风格迁移系统 案例概述 本案例将实现一个基于深度学习的实时图像风格迁移系统，通过浏览器端神经网络推理实现以下高级特性： WebAssembly加速的ONNX模型推理 WebGL Shader实现的风格混合算法 WebRTC实时视频流处理 基于Web Workers的…...
全面了解 Web3 AIGC 和 AI Agent 的创新先锋 MelodAI
不管是在传统领域还是 Crypto，AI 都是公认的最有前景的赛道。随着数字内容需求的爆炸式增长和技术的快速迭代，Web3 AIGC（AI生成内容）和 AI Agent（人工智能代理）正成为两大关键赛道。 AIGC 通过 AI 技术生成…...
leetcode_链表 234.回文链表
234.回文链表 给你一个单链表的头节点head，请你判断该链表是否为回文链表。如果是, 返回 true ; 否则, 返回false。思路： 找到中间节点(快慢指针法)反转后半部分的链表比较前半部分和后半部分链表 # Definition for singly-linked list. # class List…...
cloc下载和使用
cloc（Count Lines of Code）是一个跨平台的命令行工具，用于计算代码行数。以下是下载和使用 cloc 的步骤： 下载 cloc 对于 Windows 用户： 访问 cloc 的 GitHub 仓库：https://github.com/AlDanial/cloc在 …...
在 Windows 系统上，将 Ubuntu 从 C 盘 迁移到 D 盘
在 Windows 系统上，如果你使用的是 WSL（Windows Subsystem for Linux）并安装了 Ubuntu，你可以将 Ubuntu 从 C 盘 迁移到 D 盘。迁移过程涉及导出当前的 Ubuntu 发行版，然后将其导入到 D 盘的目标目录。以下是详细的步骤…...
【Redis】Redis入门以及什么是分布式系统{Redis引入+分布式系统介绍}
文章目录 介绍redis的引入 分布式系统单机架构应用服务和数据库服务分离【负载均衡】引入更多的应用服务器节点 单机架构 分布式是什么 数据库分离和负载均衡 理解负载均衡 数据库读写分离 引入缓存 数据库分库分表 引入微服务 介绍 The open source, in-memory data store us…...
wow-agent---task4 MetaGPT初体验
先说坑： 1.使用git clone模式安装metagpt 2.模型尽量使用在线模型或本地高参数模型。 这里使用python3.10.11调试成功 一，安装 安装 | MetaGPT，参考这里的以开发模型进行安装 git clone https://github.com/geekan/MetaGPT.git cd /you…...
Leetcode::3432. 统计元素和差值为偶数的分区方案
3432. 统计元素和差值为偶数的分区方案 已解答 简单 相关企业 提示 给你一个长度为 n 的整数数组 nums 。 分区 是指将数组按照下标 i （0 < i < n - 1）划分成两个 非空 子数组，其中： 左子数组包含区间 [0, i] 内的所…...
linux如何修改密码,要在CentOS 7系统中修改密码
要在CentOS 7系统中修改密码，你可以按照以下步骤操作： 步骤 1: 登录到系统 在登录提示符 localhost login: 后输入你的用户名。输入密码并按回车键。 步骤 2: 修改密码 登录后，使用 passwd 命令来修改密码： passwd 系统会提…...
GIS与相关专业软件汇总
闲来无事突然想整理一下看看 GIS及相关领域 究竟有多少软件或者工具包等。 我询问了几个AI工具并汇总了一个软件汇总，不搜不知道，一搜吓一跳，搜索出来了大量的软件，大部分软件或者工具包都没有见过，不知大家还有没有要…...
云计算架构学习之LNMP架构部署、架构拆分、负载均衡-会话保持
一.LNMP架构部署 1.1. LNMP服务搭建 1.磁盘信息 2.内存 3.负载信息 4.Nginx你们公司都用来干嘛 5.文件句柄(文件描述符 打开文件最大数量) 6.你处理过系统中的漏洞吗 SSH漏洞 7.你写过什么shell脚本 8.监控通过什么告警 zabbix 具体监控哪些内容 9.mysql redis查询 你好H…...
mamba论文学习
rnn 1986 训练速度慢 testing很快 但是很快就忘了 lstm 1997 训练速度慢 testing很快 但是也会忘（序列很长的时候） GRU实在lstm的基础上改进，改变了一些门 transformer2017 训练很快，testing慢些，时间复杂度高&am…...
uva 1354 Mobile Computing
原题： 房间中有一个天平，房间的宽度为r，有s个砝码，每个砝码的重量是 w i w_i wi。设计一个尽量宽，但是宽度不能超过r的天平，挂住所有砝码。天平全部由长度为1的木棍组成，木棍的每一端要么挂一…...
理解C++中的右值引用
右值引用，顾名思义，就是对一个右值进行引用，或者说给右值一个别名。右值引用的规则和左值一用一模一样，都是对一个值或者对象起个别名。 1. 右值引用和左值引用一样，在定义的同时必须立即赋值，如果不立即赋…...
约数个数（简单）
给定 nn 个正整数 aiai，请你输出这些数的乘积的约数个数，答案对 10971097 取模。 输入格式 第一行包含整数 nn。 接下来 nn 行，每行包含一个整数 aiai。 输出格式 输出一个整数，表示所给正整数的乘积的约数个数，答…...
Day33：字符串的切片
在 Python 中，**切片（Slicing）**是对字符串（以及其他序列类型，如列表、元组等）进行提取部分内容的强大工具。通过切片，你可以非常方便地提取字符串的子字符串、倒序字符串，甚至进行步…...
基于回归分析法的光伏发电系统最大功率计算simulink建模与仿真
目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 基于回归分析法的光伏发电系统最大功率计算simulink建模与仿真。选择回归法进行最大功率点的追踪，使用光强和温度作为影响因素，电压作为输出进行建模。…...