vue入门讲解 day03

最新推荐文章于 2025-06-20 09:28:11 发布

原创最新推荐文章于 2025-06-20 09:28:11 发布 · 174 阅读

0 ·

CC 4.0 BY-SA版权

vue入门专栏收录该内容

11 篇文章

订阅专栏

本文深入探讨Vue中事件修饰符的使用，包括按键修饰符、功能修饰符等，讲解如何控制事件传播，实现事件捕获与事件代理，帮助开发者更好地理解和运用Vue事件系统。

事件修饰符

按键修饰符

可以使用按键码和按键的别名

q,w,e,r…
enter tab delete(捕获删除或者退格键) esc space up down left right
ctrl alt shift meta
js中的按键事件： keyup ，在不加修饰符的情况下，不管按哪个键都会触发，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 随便按哪个按键都会触发   keyup事件 -->
        <input type="text" @keyup="show($event)">
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{

        },
        methods: {
            show(e){
                console.log(e);
            }
        },
    });
</script>
</html>

我这边输的是qwe，结果如图：
在这里插入图片描述
下面为大家例举加了修饰符的按键事件，代码如下：

<input type="text" @keyup.a="show($event)">

结果如图：
在这里插入图片描述
我按了很多，但是只有a是生效的。
还可以用字符编码，如下：

<input type="text" @keyup.65="show($event)">

在这里插入图片描述

修饰符也可以一起使用多个，如下：

<!-- 修饰符可以多个使用，为或者的关系 -->
 <span>多个修饰符：</span>
 <input type="text" @keyup.a.b.f="show($event)">

结果如图：
在这里插入图片描述
但是也有特殊的是并且的关系，举个例子如下：

<!-- 并且的关系的修饰符 ctrl shift-->
        <span>多个修饰符：</span>
        <input type="text" @keyup.ctrl.c="show($event)">

在这里插入图片描述

功能修饰符

举例说明（click事件），一般情况如下代码：

<body>
    <div id="app">
            <div class="div1" @click="print('div1')">div1
                <div class="div2" @click="print('div2')">div2
                    <div class="div3" @click="print('div3')">div3
                        <div class="div4" @click="print('div4')">
                            div4
                        </div>
                    </div>
                </div>
            </div>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{

        },
        methods: {
            show(e){
                console.log(e);
            },
            print(e){
                console.log(e);
            }
        },
    });
</script>

点击div1输出：div1
点击div2输出：div2 div1
点击div3输出：div3 div2 div1
点击div4输出：div4 div3 div2 div1
上述就是典型的事件冒泡：当一个元素上的事件被触发时，事件从事件源开始，往上冒泡直到页面的根元素，这一过程称为事件冒泡（默认方式）
下面为大家描述事件捕获（capture修饰符）：当一个元素上的事件被触发时，事件从页面的根元素开始，往下直到事件目标元素，这一过程称为事件捕获，代码如下：

<div class="div1" @click.capture="print('div1')">div1
            <div class="div2" @click.capture="print('div2')">div2
                <div class="div3" @click.capture="print('div3')">div3
                    <div class="div4" @click.capture="print('div4')">div4</div>
                </div>
            </div>
        </div>

点击div1输出：div1
点击div2输出：div1 div2
点击div3输出：div1 div2 div3
点击div4输出：div1 div2 div3 div4

修饰符	含义
capture	添加事件监听器时使用事件捕获模式
stop	阻止事件传播，调用 event.stopPropagation()
self	只当事件是元素本身触发时才执行回调，即不是事件传播引起的
prevent	阻止事件的默认行为，调用 event.preventDefault()
once	事件只触发一次

通过表格的内容，可以看出要想阻止事件的传递可以用stop修饰符，如果只是想触发本身可以使用self修饰符，大家可以自己练习下。

下面再说下事件代理/事件委托

首先大家心里要明白，为什么要用代理/委托，原理是什么？

原理：利用事件冒泡机制，通过给父元素绑定事件，从而实现对所有子元素的事件管理，无需为每个子元素绑定事件
使用的原因/好处：减少事件注册，降低内存占用，新增元素时实现动态绑定事件

<body>
    <div id="app">
        <ul @click="doLi($event)">
            <li>li1</li>
            <li>li2</li>
            <li>li3</li>
            <li>li4</li>
            <li>li5</li>
        </ul>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{

        },
        methods: {
            doLi(e){
                console.log(e.target); // 事件代理时target为触发事件的dom对象，即子元素li，而非父元素ul
            }
        },
    });
</script>

在这里插入图片描述