【愚公系列】《循序渐进Vue.js 3.x前端开发实践》017-事件的监听与处理

举报
愚公搬代码 发表于 2025/02/28 23:16:33 2025/02/28
【摘要】 标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。近期荣誉2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳...
标题 详情
作者简介 愚公搬代码
头衔 华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉 2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。
博客内容 .NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎 👍点赞、✍评论、⭐收藏

🚀前言

在现代前端开发中，事件处理是用户交互体验的重要组成部分。随着 Vue 3 的推出，许多开发者开始探索其全新的特性和更高效的事件处理机制。本篇文章将深入探讨 Vue 3 中事件的监听与处理，帮助你更好地理解如何在组件中响应用户的操作。

Vue 3 通过组合式 API 和更灵活的事件处理机制，使得事件监听变得更加简单和可维护。在这篇文章中，我们将介绍 Vue 3 中的事件绑定、事件修饰符、事件处理函数的使用，以及如何通过组合式 API 来管理复杂的事件逻辑。

🚀一、事件的监听与处理

🔎1.HTML 部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件绑定</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="Application">
        <div>点击次数:{{count}}</div>
        <button @click="click(2), log($event)">点击</button>
        <div @click.capture.stop="click1" style="border:solid red">
            外层
            <div @click.capture.stop="click2" style="border:solid red">
                中层
                <div @click.capture.stop="click3" style="border:solid red">
                    点击
                </div>
            </div>
        </div>
    </div>
    <script>
        const { createApp, ref } = Vue
        const config = {
            setup() {
                const count = ref(0)
                const click = (step) => {
                    count.value += step
                }
                const log = (event) => {
                    console.log(event)
                }
                const click1 = () => {
                    console.log("外层")
                }
                const click2 = () => {
                    console.log("中层")
                }
                const click3 = () => {
                    console.log("内层")
                }
                return { count, click, click1, click2, click3, log }
            }
        }
        createApp(config).mount("#Application")
    </script>
</body>
</html>

在这里插入图片描述

🔎2.代码结构与功能解析

🦋2.1 HTML 结构

  • <!DOCTYPE html>：声明文档类型为 HTML5。
  • <html lang="en">：定义页面的语言为英语。
  • <meta charset="UTF-8">：定义文档字符集为 UTF-8。
  • <meta http-equiv="X-UA-Compatible" content="IE=edge">：保证 IE 浏览器以最新标准渲染页面。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">：确保网页在移动设备上显示良好。
  • <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>：引入 Vue 3 的 CDN 版本。

🦋2.2 Vue 组件

在 <body> 标签内的内容被 Vue 应用控制，最外层 <div id="Application"> 是 Vue 挂载的目标元素。

  • <div>点击次数:{{count}}</div>：展示一个响应式数据 count，并且随着 count 的变化自动更新显示。

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

    • @click 是 Vue 的事件绑定语法，相当于 v-on:click。点击按钮时会触发 click(2) 和 log($event)。
    • click(2) 调用 click 方法并传入 2，增加 count 的值。
    • log($event) 会输出触发点击事件的原始事件对象（$event）。

  • 事件传播与捕获：

    • @click.capture.stop="click1"：Vue 的事件修饰符 capture 会将事件绑定到事件捕获阶段，而不是冒泡阶段。stop 会阻止事件继续传播。
    • 这是嵌套的结构，包含三个 <div>，每个 <div> 都会捕获点击事件并触发不同的函数：
      • 外层 <div> 调用 click1。
      • 中层 <div> 调用 click2。
      • 内层 <div> 调用 click3。
    • 但三个 <div>是嵌套的所以只会处罚最外层 <div>的事件。

🦋2.3 Vue 逻辑

Vue 3 中使用了 Composition API 来编写组件逻辑。

const { createApp, ref } = Vue
  • createApp 是 Vue 3 创建应用实例的方法。
  • ref 用来定义响应式数据。
const config = {
    setup() {
        const count = ref(0) // 响应式变量，初始值为 0
        const click = (step) => {
            count.value += step // 修改 count 值
        }
        const log = (event) => {
            console.log(event) // 打印原始事件对象
        }
        const click1 = () => {
            console.log("外层") // 输出 "外层"
        }
        const click2 = () => {
            console.log("中层") // 输出 "中层"
        }
        const click3 = () => {
            console.log("内层") // 输出 "内层"
        }
        return { count, click, click1, click2, click3, log }
    }
}
  • count 是一个响应式变量，初始值为 0，当其值发生变化时，页面上的 {{count}} 会自动更新。
  • click(step) 方法用来改变 count 的值，每次点击按钮时，count 会增加 step 的值。
  • log(event) 方法用来打印事件对象，这会在点击按钮时显示。
  • click1, click2, click3 是分别绑定到外层、中层、内层 <div> 的点击事件的处理函数。
createApp(config).mount("#Application")
  • createApp(config) 创建了一个 Vue 应用，并通过 mount("#Application") 将其挂载到页面上 id 为 Application 的元素上。

🦋2.4 事件传播控制

  • @click.capture.stop="click1"，@click.capture.stop="click2" 和 @click.capture.stop="click3"：这些事件绑定使用了 capture 和 stop 修饰符：
    • capture：事件会在捕获阶段被处理，而不是在冒泡阶段。这意味着事件从外层元素开始捕获，直到内层元素。
    • stop：阻止事件进一步传播，防止事件继续冒泡到父元素。

这样，即使点击了内层的 <div>，只会触发 click3，且不会触发其他层级的 click1 和 click2，因为事件已经被 stop 阻止。

🔎3.事件处理逻辑

  1. 点击按钮：点击按钮时会触发 click(2) 和 log($event)。

    • click(2) 会将 count 增加 2。
    • log($event) 会打印触发按钮点击的事件对象。

  2. 点击嵌套的 <div>：

    • 当点击某个层级时，事件会按照捕获顺序从外到内传播。由于使用了 @click.capture.stop 修饰符，每一层的事件都会在捕获阶段处理，并且使用 stop 阻止了事件继续传播到其他层级。
    • 因此，只有最外层的 <div> 会触发 click1。

🔎4.总结

这段代码展示了如何使用 Vue 3 处理事件绑定、事件传播控制以及响应式数据更新：

  • @click 绑定点击事件。
  • 通过 capture 和 stop 修饰符控制事件捕获与阻止传播。
  • 使用 Vue 3 的 Composition API 定义响应式数据和事件处理函数。

这样通过 Vue 框架的声明式绑定和事件控制，能够更简洁、清晰地管理交互和逻辑。

【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
JavaScript Vue
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

目录

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入