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

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

事件监听基础

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

html 复制代码
<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,用于提高滚动性能。

示例代码

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

html 复制代码
<!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 中,我们可以在事件监听器中传递参数。例如:

html 复制代码
<button @click="click(2, $event)">点击</button>

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

事件监听的嵌套

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

html 复制代码
<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 构建交互式应用。

相关推荐
百锦再1 天前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
飞翔的佩奇2 天前
Java项目:基于SSM框架实现的忘忧小区物业管理系统【ssm+B/S架构+源码+数据库+毕业论文+开题报告】
java·数据库·mysql·vue·毕业设计·ssm框架·小区物业管理系统
百锦再3 天前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
一笑code3 天前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
eric*16883 天前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
喜欢敲代码的程序员4 天前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
海的诗篇_4 天前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
sunbyte4 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
skyymrj14 天前
Vue3 + Tailwind CSS 后台管理系统教程
前端·css·vue
程序猿小D14 天前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+Vue实现的校园二手交易平台管理系统,推荐!
java·数据库·mysql·spring·vue·毕业设计·校园二手交易平台