vue3学习——事件监听（v-on）
我们可以使用 v-on 指令监听 DOM 事件：
<button v-on:click="increment">{{ count }}</button>因为其经常使用，v-on 也有一个简写语法：
<button @click="increment">{{ count }}</button>此处，increment 引用了一个在 <script setup> 中声明的函数：
<script setup>
import { ref } from 'vue'const count = ref(0)function increment() {// 更新组件状态count.value++
}
</script>在函数中，我们可以通过修改 ref 来更新组件状态。
事件处理函数也可以使用内置表达式，并且可以使用修饰符简化常见任务。
我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="handler" 或 @click="handler"。
事件处理器 (handler) 的值可以是：
-
内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与
onclick类似)。 -
方法事件处理器：一个指向组件上定义的方法的属性名或是路径。
内联事件处理器：
内联事件处理器通常用于简单场景，例如
const count = ref(0)
<button @click="count++">Add 1</button>
<p>Count is: {{ count }}</p>方法事件处理器：
随着事件处理器的逻辑变得愈发复杂，内联代码方式变得不够灵活。因此 v-on 也可以接受一个方法名或对某个方法的调用。
举例来说：
const name = ref('Vue.js')function greet(event) {alert(`Hello ${name.value}!`)// `event` 是 DOM 原生事件if (event) {alert(event.target.tagName)}
}<!-- `greet` 是上面定义过的方法名 -->
<button @click="greet">Greet</button>方法事件处理器会自动接收原生 DOM 事件并触发执行。在上面的例子中，我们能够通过被触发事件的 event.target 访问到该 DOM 元素。
在内联处理器中调用方法
除了直接绑定方法名，你还可以在内联事件处理器中调用方法。这允许我们向方法传入自定义参数以代替原生事件：
function say(message) {alert(message)
}<button @click="say('hello')">Say hello</button>
<button @click="say('bye')">Say bye</button>在内联事件处理器中访问事件参数
有时我们需要在内联事件处理器中访问原生 DOM 事件。你可以向该处理器方法传入一个特殊的 $event 变量，或者使用内联箭头函数：
<!-- 使用特殊的 $event 变量 -->
<button @click="warn('Form cannot be submitted yet.', $event)">Submit
</button><!-- 使用内联箭头函数 -->
<button @click="(event) => warn('Form cannot be submitted yet.', event)">Submit
</button>function warn(message, event) {// 这里可以访问原生事件if (event) {event.preventDefault()}alert(message)
}事件修饰符
在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好。
为解决这一问题，Vue 为 v-on 提供了事件修饰符。修饰符是用 . 表示的指令后缀，包含以下这些：
.stop.prevent.self.capture.once.passive
<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a><!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form><!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a><!-- 也可以只有修饰符 -->
<form @submit.prevent></form><!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如：事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>TIP
使用修饰符时需要注意调用顺序，因为相关代码是以相同的顺序生成的。因此使用
@click.prevent.self会阻止元素及其子元素的所有点击事件的默认行为，而@click.self.prevent则只会阻止对元素本身的点击事件的默认行为。
.capture、.once 和 .passive 修饰符与原生 addEventListener 事件相对应：
<!-- 添加事件监听器时，使用 `capture` 捕获模式 -->
<!-- 例如：指向内部元素的事件，在被内部元素处理前，先被外部处理 -->
<div @click.capture="doThis">...</div><!-- 点击事件最多被触发一次 -->
<a @click.once="doThis"></a><!-- 滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成 -->
<!-- 以防其中包含 `event.preventDefault()` -->
<div @scroll.passive="onScroll">...</div>.passive 修饰符一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能。
TIP
请勿同时使用
.passive和.prevent，因为.passive已经向浏览器表明了你不想阻止事件的默认行为。如果你这么做了，则.prevent会被忽略，并且浏览器会抛出警告。
按键修饰符
在监听键盘事件时，我们经常需要检查特定的按键。Vue 允许在 v-on 或 @ 监听按键事件时添加按键修饰符。
<!-- 仅在 `key` 为 `Enter` 时调用 `submit` -->
<input @keyup.enter="submit" />你可以直接使用 KeyboardEvent.key 暴露的按键名称作为修饰符，但需要转为 kebab-case 形式。
<input @keyup.page-down="onPageDown" />在上面的例子中，仅会在 $event.key 为 'PageDown' 时调用事件处理。
按键别名
Vue 为一些常用的按键提供了别名：
.enter.tab.delete(捕获“Delete”和“Backspace”两个按键).esc.space.up.down.left.right
系统按键修饰符
你可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器，只有当按键被按下时才会触发。
.ctrl.alt.shift.meta
注意
在 Mac 键盘上，meta 是 Command 键 (⌘)。在 Windows 键盘上，meta 键是 Windows 键 (⊞)。在 Sun 微机系统键盘上，meta 是钻石键 (◆)。在某些键盘上，特别是 MIT 和 Lisp 机器的键盘及其后代版本的键盘，如 Knight 键盘，space-cadet 键盘，meta 都被标记为“META”。在 Symbolics 键盘上，meta 也被标识为“META”或“Meta”。
举例来说：
<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" /><!-- Ctrl + 点击 -->
<div @click.ctrl="doSomething">Do something</div>TIP
请注意，系统按键修饰符和常规按键不同。与
keyup事件一起使用时，该按键必须在事件发出时处于按下状态。换句话说，keyup.ctrl只会在你仍然按住ctrl但松开了另一个键时被触发。若你单独松开ctrl键将不会触发。
.exact 修饰符
.exact 修饰符允许精确控制触发事件所需的系统修饰符的组合
<!-- 当按下 Ctrl 时，即使同时按下 Alt 或 Shift 也会触发 -->
<button @click.ctrl="onClick">A</button><!-- 仅当按下 Ctrl 且未按任何其他键时才会触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button><!-- 仅当没有按下任何系统按键时触发 -->
<button @click.exact="onClick">A</button>鼠标按键修饰符
.left.right.middle
这些修饰符将处理程序限定为由特定鼠标按键触发的事件。
相关文章：
vue3学习——事件监听（v-on）
我们可以使用 v-on 指令监听 DOM 事件： <button v-on:click"increment">{{ count }}</button> 因为其经常使用，v-on 也有一个简写语法： <button click"increment">{{ count }}</button> 此处…...
java全栈day13-后端Web实战2
接上述查询部门实现，完成后续要求 一、统一响应结果 1.1步骤 资料如下 对一开始的代码修改如下 结果如下 1.2测试 指定请求方式 结果 小结 二、前后端联调测试 资料如下： (不行，一定要不带空格和不带中文，要不然启动不了试了半天…...
C++/CX，一个智能的 C++/Windows 平台开发库！
以下是一篇关于C/CX的C学习文章： 开篇 嘿，大家好呀！我是一行。今天咱们来一起探索一个超棒的C开发库——C/CX，它可是在Windows平台开发中非常智能且强大的工具哦，能让我们的开发变得更加高效便捷。让我们一起开启今天的…...
分布式 分布式事务 总结
前言 相关系列 《分布式 & 目录》《分布式 & 分布式事务 & 总结》《分布式 & 分布式事务 & 问题》 分布式事务 所谓分布式事务是指操作范围笼罩多个不同节点的事务。例如对于订单节点&库存节点而言，一次完整的交易需要同时调动两个节…...
数据结构（3）单链表的模拟实现
上一节我们进行了数据结构中的顺序表的模拟式现，今天我们来实现一下另外一个数据结构：单链表。 我们在实现顺序表之后一定会引发一些问题和思考： 1.顺序表在头部和中间插入数据会用到循环，时间复杂O（N） …...
HBU深度学习实验14.5-循环神经网络（1.5）
梯度爆炸实验 造成简单循环网络较难建模长程依赖问题的原因有两个：梯度爆炸和梯度消失。一般来讲，循环网络的梯度爆炸问题比较容易解决，一般通过权重衰减或梯度截断可以较好地来避免；对于梯度消失问题，更加有效的方式…...
Redis01
springbootredis 特点 1.高效性 2.支持多种数据结构 String,list,set,hash.zset 3.稳定性：持久化，主从复制（集群） 4.其他特性：支持过期时间，支持事务，消息订阅。 安装 1.下载安装包 redis官…...
数据库中decimal、float 和 double区别
在计算机科学中，decimal、float 和 double 是用于表示和处理数值的不同数据类型。 - decimal 是一种精确的十进制浮点数表示，通常用于需要高精度计算的场景，比如财务应用。它能够精确表示小数，并且不会出现浮点数运算误差。 - flo…...
HDR视频技术之五：HDR生产流程
在介绍 HDR 的生产流程之前，我们先介绍下视频制作与传输的一些基本知识。 内容类型： 直播内容（ live content） ——所谓的直播内容即没有后处理过程以及创作者意图。分发给用户的信息是实时产生并且实时制作并派发的。常见的应用…...
)
CTFshow-爆破(Web21-28)
CTFshow-爆破(Web21-28) Web21 抓包 选则dic.zip里的字典爆破，记得添加前缀admin: 答案admin:shark63 burp里有一个自定义迭代器，可以设置前几部分，很好用 Web22 题目失效了直接看wp吧 360quake 使用空间搜索引擎—>360quake 搜索语法…...
C++重点和练习
作业题目： #include <iostream> using namespace std; class Rec {const int length;int width; public:void set_length(int l);void set_width(int w);int get_length();int get_width();void show(); };#include <iostream> using namespace std; c…...
UnityShaderLab-实现溶解效果
实现思路： 使用一张噪声图，与一个Cut值计算（加或减），将计算后的值赋值给Alpha,然后小于0的片段就被丢弃掉了。 ShaderGraph实现： ShaderLab实现： Shader "Dissolve" {Properties{_…...
SQLite 数据库学习
1.install sudo apt update sudo apt install sqlitebrowser这是一个开源的图形用户界面工具，专门用于开发、管理和分析 SQLite 数据库。它支持创建或导入导出表、编辑数据、执行 SQL 查询等功能。 2.python 操作数据库 Python 内置了 sqlite3 模块，使…...
【LeetCode: 463. 岛屿的周长 + bfs】
🚀 算法题 🚀 🌲 算法刷题专栏 | 面试必备算法 | 面试高频算法 🍀 🌲 越难的东西,越要努力坚持，因为它具有很高的价值，算法就是这样✨ 🌲 作者简介：硕风和炜，…...
Bean的注入、单例和多例
目录 注入Bean对象 属性注入 构造注入 属性注入专题 注入集合/数组 级联简单类型赋值 Bean的单例和多例 注入Bean对象 简单类型使用value(除Date)，非简单类型使用ref 属性注入 name规则：必须提供set方法，去掉set，第一个字…...
java 使用JSqlParser和CCJSqlParser 解析sql
maven <dependency><groupId>com.github.jsqlparser</groupId><artifactId>jsqlparser</artifactId><version>4.9</version> </dependency>解析SQL String sql "select aa,bb from b"; Statement statementCCJSq…...
Anaconda Conda Pip 的区别与联系
在Python生态中，Anaconda、Conda和Pip是三个非常重要的工具，它们在包管理和环境管理方面发挥着关键作用。 Anaconda Anaconda是一个为科学计算而设计的Python发行版，它集成了Conda、Python以及大量的数据科学相关库，如NumPy、Pandas等。Anaconda的主要优势在于它提供了一个…...
总结的一些MySql面试题
目录 一：基础篇 二：索引原理和SQL优化 三：事务原理 四：缓存策略 一：基础篇 1：定义：按照数据结构来组织、存储和管理数据的仓库；是一个长期存储在计算机内的、有组织的、可共享 的…...
【实验15】LSTM的记忆能力实验
目录 1 模型构建 1.1 LSTM层 1.1.1 自定义LSTM算子 1.1.2 nn.LSTM 1.1.3 将自定义LSTM与pytorch内置的LSTM进行对比 1.2 模型汇总 2 模型训练 2.1 训练指定长度的数字预测模型 2.2 多组训练 2.3 损失函数展示 3 模型评价 4 完整代码 5 LSTM模型门状态和单元状态的…...
SSH克隆github项目
1、生成密钥 ssh-keygen -t rsa -C "你的邮箱xxx.com" 全程回车即可（不用输入ras文件名及密码）、为了方便下面的公钥查看 2、配置公钥 查看公钥内容 cat c:\Users\xxx\.ssh\id_rsa.pub(修改为自己的路径及名字) 将公钥内容复制并粘贴至…...
计算机网络ENSP课设--三层架构企业网络
本课程设计搭建一个小型互联网，并模拟Internet的典型Web服务过程。通过此次课程设计，可以进一步理解Internet的工作原理和协议过程，并提高综合知识的运用能力和分析能力。具体目标包括： （1）掌握网络拓扑的…...
Node.js系统模块
【图书介绍】《Node.jsMongoDBVue.js全栈开发实战》-CSDN博客 《Node.jsMongoDBVue.js全栈开发实战（Web前端技术丛书）》(邹琼俊)【摘要 书评 试读】- 京东图书 (jd.com) 2.2.1 什么是系统模块 由于Node.js运行环境提供的API都是以模块化的方式进行开…...
React - useActionState、useFormStatus与表单处理
参考文档：react18.3.1官方文档 一些概念： React 的 Canary 和 Experimental 频道是 React 团队用于发布和测试新功能的渠道。 useActionState useActionState 是一个可以根据某个表单动作的结果更新 state 的 Hook。 const [state, formAction, isPe…...
GC常见垃圾回收算法，JVM分代模型
如何判断是垃圾？引用计数器和Root可达性算法 如何进行清除？标记清除、复制、标记整理 堆分代模型？Eden，Surevivor，Tenuring 一个对象从创建到消亡的过程？ 对象什么时候进入老年代？ 一、GC&a…...
深入探索 JVM：原理、机制与实战
一、JVM 概述 JVM（Java Virtual Machine）是 Java 程序运行的核心组件，它提供了一个独立于硬件和操作系统的执行环境，使得 Java 程序能够在不同平台上具有跨平台的特性。 JVM 主要由以下几部分组成： 类装载器…...
前端成长之路：HTML（2）
HTML中有两个非常重要的标签——表格和表单，在介绍之前需要先了解表格和表单的区别：表格是用于展示数据的；表单是用于提交数据的。本文主要介绍表格。 表格标签 表格主要是用于显示、展示数据的，并非是页面布局。它可以使本来难…...
python基础：（七）类
目录 一.创建和使用类二.使用类和实例2.1给属性指定默认值2.2修改属性的值2.2.1直接修改属性的值2.2.2通过方法修改属性的值2.2.3通过方法对属性的值进行递增 三.继承3.1子类的方法__init__()3.2给子类定义属性和方法3.3重写父类的方法 四.导入类4.1语法--1:4.2语法--2 前言 p…...
Spring AOP基础、快速入门
介绍 AOP，面向切面编程，作为面向对象的一种补充，将公共逻辑（事务管理、日志、缓存、权限控制、限流等）封装成切面，跟业务代码进行分离，可以减少系统的重复代码和降低模块之间的耦合度。切面就是…...
Golang使用etcd构建分布式锁案例
在本教程中，我们将学习如何使用Go和etcd构建分布式锁系统。分布式锁系统对于管理对分布式系统中共享资源的并发访问至关重要。它有助于维护一致性，防止竞争条件，并确保在任何给定时间只有一个进程独占访问资源。 我们将使用Go作为编程语言&am…...
深度学习：基于MindSpore的极简风大模型微调
什么是PEFT？What is PEFT？ PEFT(Parameter Efficient Fine-Tuning)是一系列让大规模预训练模型高效适应于新任务或新数据集的技术。 PEFT在保持大部分模型权重冻结，只修改或添加一小部份参数。这种方法极大得减少了计算量和存储开销&#x…...
如何在 Android 项目中实现跨库传值
背景介绍 在一个复杂的 Android 项目中，我们通常会有多个库（lib），而主应用程序（app）依赖所有这些库。目前遇到的问题是，在这些库中，libAd 需要获取 libVip 的 VIP 等级状态…...
HTML：表格重点
用表格就用table caption为该表上部信息，用来说明表的作用 thead为表头主要信息，效果加粗 tbody为表格中的主体内容 tr是 table row 表格的行 td是table data th是table heading表格标题 ，一般表格第一行的数据都是table heading...
STM32 出租车计价器系统设计（一） 江科大源码改写
STM32 出租车计价器系统设计 功能目标 驱动步进电机模拟车轮旋转，并实现调速功能。 设置车轮周长和单价，检测车轮转速和运转时间。 计算并显示行驶里程和价格。 硬件材料 28BYJ48 五线四相步进电机和 ULN2003 驱动板模块 测速传感器模块 嵌入式小系统…...
Git基础操作快速入门
Git是一个免费开源分布式版本控制工具，是由Linux的作者Linus开发的第二个伟大作品。2005年由于BitKeeper软件公司对Linux社区停止了免费使用权。Linus迫不得己自己开发了一个分布式版本控制工具，从而Git诞生了 目前使用Git作为版本控制的开源软件&#…...
vue‘ 不是内部或外部命令，也不是可运行的程序或批处理文件。
在Windows操作系统中，安装了nodeJs之后，并且也安装了vue依赖包，但是在cmd控制台运行vue的时候，会报错：vue‘ 不是内部或外部命令，也不是可运行的程序或批处理文件。针对这个问题我提供如下解决办法，并且是有效的。 一、原因分析 关于尝试这个问题的主要原因，我分析主要…...
JAVA安全—SpringBoot框架MyBatis注入Thymeleaf模板注入
前言 之前我们讲了JAVA的一些组件安全，比如Log4j，fastjson。今天讲一下框架安全，就是这个也是比较常见的SpringBoot框架。 SpringBoot框架 Spring Boot是由Pivotal团队提供的一套开源框架，可以简化spring应用的创建及部署。它提…...
Milvus向量数据库05-常见问题整理
Milvus向量数据库05-常见问题整理 1-什么是PipeLine 这张图展示了一个文档处理和搜索系统的架构，主要分为两个部分：Ingestion Pipeline（摄取管道）和 Search Pipeline（搜索管道）。下面是对图中各部分的详细…...
strncpy在复制含有多个\0的字符串时遇到的问题
strncpy在复制含有多个\0的字符串的时候，会产生截断，因为strncpy在读取源字符串的时候，遇到了\0，函数会认为该字符串已经结束了，然后会向目标字符串内填充\0。 char buffer[100] "ak\0jl";for (int i 0; i…...
C++作业3
作业1： 1.定义一个矩形类Rec，包含私有属性length、width，包含公有成员方法： void set_length(int l);//设置长度 Void set_width(int w);//设置宽度 Int get_length();//获取长度，将长度的值返回给调用处 Int get_widt…...
重生之我在学Vue--第1天 Vue 3 基础与开发环境搭建
重生之我在学Vue–第1天 Vue 3 基础与开发环境搭建 文章目录 重生之我在学Vue--第1天 Vue 3 基础与开发环境搭建前言一、Vue 3 的特点与核心概念二、搭建开发环境1. 安装 Node.js2. 使用 Vite 创建 Vue 3 项目创建项目进入项目目录并安装依赖启动开发服务器 3. 理解项目结构 三…...
企业经营数据分析系统：提升决策能力的利器
搭建企业经营数据分析系统是当今企业绕不开的话题，企业想要在竞争激烈的市场当中突围而出，需要对于企业内部的各种数据了然于胸，同时对于外部的数据也有敏锐的把握能力，因此企业构建自身的经营性数据分析系统就显得尤其重要。作为…...
Linux笔记9 DNS域名解析服务器
简介 DNS（Domain Name System）是互联网上的一项服务，它作为将域名和IP地址相互映射的一个分 布式数据库，能够使人更方便的访问互联网。 DNS使用的是53端口， 通常DNS是以UDP这个较快速的数据传输协议来查询的&#x…...
鸿蒙高级开发者认证的主观题试题及答案
以下是一份鸿蒙高级开发者认证的主观题试题及答案示例，涵盖了鸿蒙开发中的多个关键技术和应用场景相关内容，希望对你有所帮助： 一、论述题（每题 20 分，共 60 分） 1. 阐述鸿蒙操作系统中分布式软总线的工作原理、核心优势以及在多设备协同应用开发场景下的应用方式，并举…...
leetcode_547 省份数量
该题主要运用了图的连通性 接着使用染色法解决该问题 染色法:标记所有节点为false 访问后 将其标记位true class Solution {int n; // 代表n个数据bool colors[201]; // 标记是否访问到void dfs(vector<vector<int>>& isConnected, int u) { // …...
【开源】一款基于SpringBoot 的全开源充电桩平台
一、下载项目文件 下载源码项目文件口令：动作璆璜量子屏多好/~d1b8356ox2~:/复制口令后，进入夸克网盘app即可保存（如果复制到夸克app没有跳转资源，可以复制粘贴口令到夸克app的搜索框也可以打开（不用点搜索按钮&#…...
react antd tabs router 基础管理后台模版
在构建 React 后台管理系统时，使用标签页的方式展示路由是一种高效且用户友好的设计模式。这种实现方式通常允许用户在多个页面之间快速切换，并保留页面的状态，类似于浏览器的多标签页功能。 需求分析 1.动态标签页：根据用户的导…...
uniapp uni-table最简单固定表头
需求：固定表头数据，在网上找了半天，啥都有，就是一直实现不了，最后更改代码实现 1.效果 2.主要代码讲解完整代码 表格的父级一定要设置高度，不然会错位，我看网上说设置position：fixed…...
从0到1实现项目Docker编排部署
在深入讨论 Docker 编排之前，首先让我们了解一下 Docker 技术本身。Docker 是一个开源平台，旨在帮助开发者自动化应用程序的部署、扩展和管理。自 2013 年推出以来，Docker 迅速发展成为现代软件开发和运维领域不可或缺的重要工具。 Docker 采…...
Mac软件推荐
Mac软件推荐 截图SnipasteXnipBob 快捷启动Raycast 系统检测Stats 解压缩The UnarchiverKeka（付费） 视频播放IINA 视频下载Downie（付费） 屏幕刘海TopNotchMediaMate（付费）NotchDrop（付费&#x…...
No.4 笔记 探索网络安全：揭开Web世界的隐秘防线
在这个数字时代，网络安全无处不在。了解Web安全的基本知识，不仅能保护我们自己，也能帮助我们在技术上更进一步。让我们一起深入探索Web安全的世界，掌握那些必备的安全知识！ 1. 客户端与WEB应用安全 前端漏洞࿱…...