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,一经查实,立即删除!

相关文章

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

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

双向链表

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

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

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

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;并…

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

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

DreamCamera2相机预览变形的处理

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

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;帮助科研人进…

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…

云原生时代的轻量级反向代理Traefik

Traefik 是一个用于路由和管理网络流量的反向代理&#xff0c;同时也是一个支持多种协议&#xff08;HTTP、HTTPS、TCP、UDP&#xff09;的负载均衡器。它通过自动服务发现和动态配置&#xff0c;帮助开发者和运维团队轻松管理复杂的应用架构。 Traefik 的主要特点如下&#x…

JavaEE---计算机是如何工作的?

1.了解冯诺依曼体系结构 2.CPU的核心概念,CPU的两个重要指标(核心数和频率) 3.CPU执行指令的流程(指令表,一条一条指令,取指令,解析指令,执行指令) 4.操作系统核心概念(管理硬件,给软件提供稳定的运行环境) 5.进程的概念(运行起来的程序和可执行文件的区别) 6.进程的管理(…

【C++】简单数据类型详解

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 &#x1f4af;前言&#x1f4af;字符型&#xff08;char&#xff09;1.1 ASCII 码表 &#x1f4af;整型&#xff08;int&#xff09;2.1 整型的分类2.2 有符号和无符号整型2.3 跨平台差异2.4 整型数据类型…

Vue构建错误解决:(error TS6133)xxx is declared but its value is never read.

TypeScript会检查代码中未使用的变量&#xff0c;如果vscode安装了Vue的语法检查工具&#xff0c;会看到告警提示&#xff0c;再npm run build的时候&#xff0c;这个警告会变成错误 解决方案1&#xff1a;删除定义了未使用的变量 推荐使用这种方案&#xff0c;能保证代码的质…

泷羽sec---shell作业

作业一 写计算器 使用bc命令 需要进行安装bc 代码如下&#xff1a; #!/bin/bash echo "-----------------------------------" echo "输入 f 退出" echo "可计算小数和整数" echo "用法如&#xff1a;1.12.2" echo "------…

混淆零碎知识点

minifyEnabled true //混淆开关 zipAlignEnabled true // Zipalign优化 shrinkResources true // 移除无用的resource文件 &#xff08;必须要混淆开了之后才才可以设置为true&#xff09; proguard-rules.pro 为混淆文件 //整个文件保留 不被混淆 -keep class com.cn…

DeSTSeg: Segmentation Guided Denoising Student-Teacher for Anomaly Detection

DeSTSeg: Segmentation Guided Denoising Student-Teacher for Anomaly Detection 清华、苹果 个人感觉 Introduction 很自然的让读者理解作者问题的提出&#xff0c;也有例子直接证明了这个问题的存在&#xff0c;值得借鉴&#xff01;&#xff01; Related work写的也很不…