Vue.js 中的事件监听与事件修饰符

在 Vue.js 中,事件监听是一种常见的交互方式,它允许我们在用户与界面交互时执行特定的代码。Vue.js 提供了一种简洁的语法来绑定事件监听器,并且支持事件修饰符来控制事件的行为。在本篇博客中,我们将详细介绍 Vue.js 中的事件监听,包括事件修饰符和参数传递。

事件监听基础

在 Vue.js 中,我们可以使用 v-on 指令来监听 DOM 事件。例如,我们可以使用 @click 来监听点击事件:

<button @click="this.count += 1">点击</button>

在这个例子中,当按钮被点击时,this.count 的值会增加 1。

事件修饰符

Vue.js 提供了多种事件修饰符来控制事件的行为。以下是一些常用的事件修饰符:

  1. .stop:阻止事件冒泡。
  2. .capture:使用捕获模式监听事件。
  3. .once:只触发一次事件。
  4. .self:只当事件在该元素本身(而不是子元素)上触发时才触发回调。
  5. .prevent:阻止默认事件行为。
  6. .passive:表示事件不会调用 event.preventDefault,用于提高滚动性能。

示例代码

下面是一个包含多个事件修饰符的示例代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue Event Modifiers</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> 
</head>
<body>
<div id="Application"><div>点击次数:{{count}}</div><!-- 普通点击事件 --><button @click="this.count += 1">点击</button><!-- 使用 .stop 修饰符阻止事件冒泡 --><button @click.stop="this.count += 1">点击(阻止冒泡)</button><!-- 使用 .capture 修饰符使用捕获模式 --><button @click.capture="this.count += 1">点击(捕获模式)</button><!-- 使用 .once 修饰符只触发一次 --><button @click.once="this.count += 1">点击(只触发一次)</button><!-- 使用 .self 修饰符只当事件在该元素本身上触发时才触发回调 --><button @click.self="this.count += 1">点击(只在自身上触发)</button><!-- 使用 .prevent 修饰符阻止默认事件行为 --><button @click.prevent="this.count += 1">点击(阻止默认行为)</button><!-- 使用 .passive 修饰符提高滚动性能 --><div @scroll.passive="this.count += 1" style="overflow: auto; height: 100px;">长内容...</div>
</div>
<script>var App = {data() {return {count: 0}}}Vue.createApp(App).mount("#Application")
</script>
</body>
</html>

参数传递

在 Vue.js 中,我们可以在事件监听器中传递参数。例如:

<button @click="click(2, $event)">点击</button>

在这个例子中,当按钮被点击时,click 方法会被调用,并传递两个参数:一个数字 2 和一个事件对象 $event

事件监听的嵌套

当事件监听器嵌套在多个元素中时,事件修饰符会影响事件的传播行为。例如:

<div @click="click11" style="border:solid red">外层<div @click.stop="click12" style="border:solid red">中层<div @click="click13" style="border:solid red">单击</div></div>
</div>

在这个例子中,@click.stop 修饰符会阻止事件冒泡,因此当内部的 div 被点击时,只有click13click12 方法会被调用,而不会触发 click11 方法。

结论

通过使用事件修饰符,我们可以更精细地控制事件的行为,从而编写出更高效、更易于维护的代码。同时,参数传递提供了一种灵活的方式来处理事件监听器中的不同情况。掌握这些知识,将有助于你更好地使用 Vue.js 构建交互式应用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/62286.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

贝叶斯统计:高斯分布均值μ的后验分布推导

使用贝叶斯统计方法 均值 ( μ \mu μ ) 的后验分布解析 在贝叶斯统计中&#xff0c;后验分布表示在观察到数据后&#xff0c;对参数的更新后的信念。本篇文章将结合高斯分布的假设&#xff0c;详细解析均值 ( μ \mu μ ) 的后验分布推导过程&#xff0c;并对 ( μ \mu μ…

网安瞭望台第6期 :XMLRPC npm 库被恶意篡改、API与SDK的区别

国内外要闻 XMLRPC npm 库被恶意篡改&#xff0c;窃取数据并部署加密货币挖矿程序 网络安全研究人员发现了一起在 npm 包注册表上活跃了一年多的软件供应链攻击。名为 0xengine/xmlrpc 的 npm 包最初是一个无害的库&#xff0c;基于 JavaScript&#xff0c;用于 Node.js 的 XML…

D82【python 接口自动化学习- python基础之pytest基础用法

day82 pytest初体验 学习日期&#xff1a;20241128 学习目标&#xff1a;pytest基础用法 -- pytest初体验 学习笔记&#xff1a; 文件命名规范 py测试文件必须以test_开头&#xff08;或_test结尾&#xff09;测试方法必须以test开头测试类必须以Test开头&#xff0c;并且…

双向链表

目录 链表的分类 概念 双向链表的实现 ① 结构 ② 初始化 ③ 打印 ④ 插入数据 ⑤ 删除数据 ⑥ 查找数据 ⑦ 在pos位置之前插入数据 ⑧ 删除pos位置的数据 ⑨ 销毁链表 总结 链表的分类 虽然有这么多的链表的结构&#xff0c;但是我们实际中最常⽤还是两种结构&…

怎么样才算得上熟悉高并发编程?

提到并发编程很多人就会头疼了&#xff1b;首先就是一些基础概念&#xff1a;并发&#xff0c;并行&#xff0c;同步&#xff0c;异步&#xff0c;临界区&#xff0c;阻塞&#xff0c;非阻塞还有各种锁全都砸你脸上&#xff0c;随之而来的就是要保证程序运行时关键数据在多线程…

微知-arp如何删除所有表项?(arp -d; ip neighbor delete 192.168.0.100)

ar命令删掉所有表项 sudo arp -d使用ip命令 ip neighbor delete 192.168.0.100

使用Gradle编译前端的项目

使用Gradle编译前端的项目 前言项目结构根项目&#xff08;parent-project&#xff09;的 settings.gradle.kts后端项目&#xff08;backend&#xff09;的 build.gradle.kts前端项目&#xff08;frontend&#xff09;的 build.gradle.kts打包bootJar 前言 最近的项目都是使用…

PyCharm中Python项目打包并运行到服务器的简明指南

目录 一、准备工作 二、创建并设置Python项目 创建新项目 配置项目依赖 安装PyInstaller 三、打包项目 打包为可执行文件 另一种打包方式&#xff08;使用setup.py&#xff09; 四、配置服务器环境 五、上传可执行文件到服务器 六、在服务器上运行项目 配置SSH解释…

clickhouse 分片键的重要性

文章目录 背景反思为啥出现问题为啥默认的语义是local 背景 问题背景 详细内容可以看这个 反思为啥出现问题 为啥会出现链接里出现的问题&#xff0c;对于goal join 和 join 语义不一样的问题&#xff0c;那是因为分片键设计不合理的情况 如果表a和表b 都是user_id 作分片键…

S4 UPA of AA :新资产会计概览

通用并行会计&#xff08;Universal Parallel Accounting&#xff09;可以支持每个独立的分类账与其他模块集成&#xff0c;UPA主要是为了支持平行评估、多货币类型、财务合并、多准则财务报告的复杂业务需求 在ML层面UPA允许根据不同的分类账规则对物料进行评估&#xff0c;并…

ffmpeg 各版本号对应表格

想看看ffmpeg各个版本对应表&#xff0c; #! /bin/bashFF_PATH$1 CURRENTpwd RESULT"$CURRENT/test_version.txt"cd $FF_PATHif [ -f $RESULT ]; thenrm $RESULT fifor i in git branch -a | grep remotes/origin/release/ | grep -v HEAD | grep -v master; dogit…

数据结构之堆:原理与实现

1. 什么是堆&#xff1f; 堆&#xff08;Heap&#xff09;是一种特殊的完全二叉树&#xff0c;它的每个节点都遵循以下性质之一&#xff1a; 最大堆&#xff08;Max-Heap&#xff09;&#xff1a;每个节点的值都大于等于其子节点的值&#xff0c;根节点是最大值。最小堆&…

DreamCamera2相机预览变形的处理

最近遇到一个问题&#xff0c;相机更换了摄像头后&#xff0c;发现人像角度顺时针旋转了90度&#xff0c;待人像角度正常后&#xff0c;发现 预览时图像有挤压变形&#xff0c;最终解决。在此记录 一人像角度的修改 先放示意图 设备预览人像角度如图1所示&#xff0c;顺时针旋…

Linux信号量的编程

一&#xff0c;用信号量来实现是父进程先进行&#xff0c;还是子进程先进性 信号量的没有P&#xff0c;V操作之前&#xff0c;我们不知道如何控制&#xff1a; #include <stdio.h> #include <sys/types.h> #include <sys/ipc.h> #include <sys/sem.h>…

GPT相关的学术库——收藏更新自用

GOT-OCR2.0 General OCR Theory: Towards OCR-2.0 via a Unified End-to-end Model https://github.com/Ucas-HaoranWei/GOT-OCR2.0/tree/main ChatPaper 工具名称工具作用是否在线&#xff1f;在线预览备注ChatPaper通过ChatGPT实现对论文进行总结&#xff0c;帮助科研人进…

Linux或者Docker中时区查询和修改(差8小时问题)

前因&#xff1a; 当我们在Linux或者Docker中部署程序时&#xff08;无论.Net或者Java或者等等&#xff09;获取系统时间时&#xff08;例如C# DateTime.Now&#xff09;&#xff0c;和北京时间差8小时。 解决&#xff1a; 一、版本1 先放几个Linux下常用命令&#xff1a; …

LLM之学习笔记(一)

前言 记录一下自己的学习历程&#xff0c;也怕自己忘掉了某些知识点 Prefix LM 和 Causal LM区别是什么&#xff1f; Prefix LM &#xff08;前缀语⾔模型&#xff09;和 Causal LM&#xff08;因果语言模型&#xff09;是两者不同类型的语言模型&#xff0c;它们的区别在于生…

Python语法基础(三)

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” 我们这篇文章来说一下函数的返回值和匿名函数 函数的返回值 我们先来看下面的这一段函数的定义代码 # 1、返回值的意义 def func1():print(111111111------start)num166print…

用Pycharm安装manim

由于版本和工具的差异&#xff0c;manim的安装方式不尽相同。本文用Pycharm来安装manim. 一、准备工作&#xff1a;安装相应版本的python、pycharm和ffmpeg. 此处提供一种安装ffmpeg的方式 下载地址&#xff1a;FFmpeg 下载后&#xff0c;解压到指定目录。 配置环境变量&am…

【线程】Java多线程代码案例(2)

【线程】Java多线程代码案例&#xff08;2&#xff09; 一、定时器的实现1.1Java标准库定时器1.2 定时器的实现 二、线程池的实现2.1 线程池2.2 Java标准库中的线程池2.3 线程池的实现 一、定时器的实现 1.1Java标准库定时器 import java.util.Timer; import java.util.Timer…