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

devtools/2024/11/30 17:41:07/

在 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/devtools/138261.html

相关文章

PHP中类名加双冒号的作用

在 PHP 中&#xff0c;类名加双冒号&#xff08;::&#xff09; 是一种用于访问类的静态成员和常量的语法。它也可以用来调用类的静态方法和访问 PHP 的类相关关键词&#xff08;如 parent、self 和 static&#xff09;。以下是详细的解释和用法。 1. 用途概述 :: 被称为作用域…

Springboot项目集成Mybatis-Plus,多数据源配置,写主读从

Mybatis-Plus简介 官网&#xff1a;Mybatis-Plus官网传送门 简介 MyBatis-Plus&#xff08;简称MP&#xff09;&#xff0c;一个MyBatis的增强工具&#xff0c;在MyBatis的基础上只做增强不做改变&#xff0c;为简化开发、提高效率而生。它提供了诸如自动生成SQL、通用CRUD操…

常见的分布式解决方案的横向对比

对常见的分布式解决方案进行横向对比&#xff0c;分析它们的优缺点以及适用场景。下面我会从几个主要环节&#xff08;如微服务架构、消息中间件、数据库、缓存、分布式事务、任务调度等&#xff09;来进行对比&#xff0c;并列出各个方案的特点、适用范围以及边界。 1. 微服务…

day 27 第八章 贪心算法 part01

第一题&#xff1a;455.分发饼干 解题思路 本题的核心目标是在给定孩子的胃口值数组 g 和饼干尺寸数组 s 的情况下&#xff0c;尽可能多地满足孩子的胃口&#xff0c;也就是找到能满足孩子数量的最大值。解题思路主要是基于贪心算法&#xff0c;以下是具体的分析&#xff1a…

面试学习准备

根据面试题web前端面试 - 面试官系列 里面的题目学习巩固。 1.vue2 组件通信 EventBus&#xff1a; 讲解 全局事件总线&#xff0c;核心思想是通过发布-订阅模式来实现组件之间的通信 在 Vue 2 中&#xff0c;可以直接使用 Vue 实例作为 EventBus。 使用方法&#xff1a;在…

ubuntu24.04安装Kubernetes1.31.0(k8s1.30.0)高可用集群

ubuntu24.04安装Kubernetes1.30.0(kubernetes1.30.0)高可用集群 一、总体概览 目前最新版的K8S版本应该是1.31.0,我们安装的是第二新的版本1.30.0,因为有大神XiaoHH Superme指路,所以基本上没踩坑,很顺利就搭建完成了。所有的机器都采用的最新版Ubuntu-Server-24.04长期支…

Python plotly库介绍

一、引言 在数据可视化领域&#xff0c;Python提供了众多强大的库。其中&#xff0c;plotly是一个功能强大、交互式的可视化库&#xff0c;可以创建各种类型的图表&#xff0c;包括线图、散点图、柱状图、饼图、3D图表等。它不仅提供了美观的可视化效果&#xff0c;还支持交互式…

三、计算机视觉_08YOLO目标检测

0、前言 YOLO作为目前CV领域的扛把子&#xff0c;分类、检测等任务样样精通&#xff0c;本文将基于两个小案例&#xff0c;用YOLO做检测任务&#xff0c;看看效果如何 1、对图片内容做检测 假设我有一张名为picture.jpeg的图片&#xff0c;其内容如下 我将图片和代码放到了同…