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

news/2024/12/1 18:09:48/

在 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.ppmy.cn/news/1551541.html

相关文章

自然语言处理期末试题汇总

建议自己做&#xff0c;写完再来对答案。答案可能存在极小部分错误&#xff0c;不保证一定正确。 一、选择题 1-10、C A D B D B C D A A 11-20、A A A C A B D B B A 21-30、B C C D D A C A C B 31-40、B B B C D A B B A A 41-50、B D B C A B B B B C 51-60、A D D …

css瀑布流

要实现CSS瀑布流布局&#xff0c;可以使用CSS Grid或CSS Columns。以下是两种方法的简要说明&#xff1a; <div class"list"><div class"list_item"><div>1</div><div>2</div><div>3</div></div>&…

Android实现桌面小部件:今天吃什么

今天吃什么桌面小部件是专为解决日常选择困难症而设计的安卓小部件&#xff0c;它通过轻松愉快的滚动机制&#xff0c;帮助玩家在诸如“今天吃什么”这样的日常琐事中迅速做出决定。 不知道吃什么&#xff1f;别担心&#xff0c;点我帮你选择&#xff01; 创建各个UI背景 app_…

BC-Linux8.6上面手动安装Postgresql17(Docker版)

目标 在BC-Linux的Docker上面手动运行postgresql17容器。 步骤 pg离线镜像文件 # 拉取得pg17 x86_64离线镜像 docker pull --platform linux/amd64 postgres:17-alpine3.20 # 保存pg17离线镜像文件 docker save -o postgres17.tar postgrespg自定义配置文件 # 获取默认配置…

雪花算法详解:分布式系统中高效唯一的ID生成方案

文章目录 原理与结构工作流程优势局限性应对高并发的方法适用场景 雪花算法&#xff08;Snowflake Algorithm&#xff09;是由Twitter开发的一种分布式全局唯一ID生成方案&#xff0c;旨在解决在分布式系统中快速、无冲突地生成唯一标识符的问题。它通过巧妙的设计&#xff0c;…

基于Java Springboot商城微信小程序且h5商城

一、作品包含 源码数据库全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue、Element-ui 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA&#xff0c;微信开发者工具 …

【数据结构】队列的概念、结构和实现详解

本文来介绍一下数据结构中的队列&#xff0c;以及如何用C语言去模拟实现。 1.队列的概念及结构 队列&#xff1a;只允许在一端进行插入数据操作&#xff0c;在另一端进行删除数据操作的特殊线性表。 特点&#xff1a;数据先进先出FIFO&#xff08;first in first out&#xf…

14、保存与加载PyTorch训练的模型和超参数

文章目录 1. state_dict2. 模型保存3. check_point4. 详细保存5. Docker6. 机器学习常用库 1. state_dict nn.Module 类是所有神经网络构建的基类&#xff0c;即自己构建一个深度神经网络也是需要继承自nn.Module类才行&#xff0c;并且nn.Module中的state_dict包含神经网络中…