从0开始学习vue第二节，vue的事件处理

原创 已于 2024-01-06 12:13:07 修改 · 174 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #学习 #javascript

于 2023-09-21 20:58:16 首次发布
本文详细介绍了Vue.js中事件的绑定方式，包括v-on指令的使用，传递参数，以及事件修饰符如stop、prevent、capture、self、once和passive的作用。此外，还涵盖了按键修饰符和事件注意事项，帮助开发者更好地理解和应用Vue的事件系统。

1. 事件

1.1. 如何绑定事件

绑定事件使用v-on指令，事件后面跟上事件名称。也可以使用简写方式@+事件名称。在指令后传入发生事件时要触发的方法，当被调用的方法无需参数传入时可不加小括号()。指令内还可直接传入js语句。

<html>
    <header>

    </header>
    <body>
        <div id="root">
            <p>{{ message }}</p>
            <button v-on:click="changeMsg">点击改变message1</button>
            <br/>
            <button @click="changeMsg">点击改变message2</button>
            <br/>
            <button @click="this.message = this.message + 1;">点击改变message3</button>
        </div>
    </body>
    <script src="./js/vue.global.js"></script>
    <script>
        let vue = Vue.createApp({
            data() {
                return {
                    message: '码小飞'
                }
            },
            methods: {
                changeMsg() {
                    this.message = this.message + '1';
                }
            }
        });
        vue.mount('#root')
    </script>
</html>

我们在调用事件时也可以传入参数，参数可以是data中的数据也可以是字面值，当想获取事件对象时需要在调用方法时传入$event对象。

<html>
    <header>

    </header>
    <body>
        <div id="root">
            <p>{{ message }}</p>
            <button v-on:click="changeMsg($event,4,5,6)">点击改变message1</button>
            <br/>
            <button @click="changeMsg($event,num1,num2,num3)">点击改变message2</button>
            <br/>
            <button @click="this.message = this.message + 1;">点击改变message3</button>
        </div>
    </body>
    <script src="./js/vue.global.js"></script>
    <script>
        let vue = Vue.createApp({
            data() {
                return {
                    message: '码小飞',
                    num1: 1,
                    num2: 2,
                    num3: 3
                }
            },
            methods: {
                changeMsg(event,a,b,c) {
                    console.log(event,a,b,c);
                    this.message = this.message + '1';
                }
            }
        });
        vue.mount('#root')
    </script>
</html>

1.2. 事件修饰符

vue的属性修饰符有stop、prevent、capture、self、once和passive，事件修饰符可以直接跟在事件名称后使用，以下是详细介绍

  • stop
    作用：阻止事件冒泡
    例子：

不加stop，点击子div后，事件会冒泡到父div

<html>
    <header>

    </header>
    <body>
        <div id="root">
            <div id="parent-div" class="parent" @click="changeMsg($event, 'parent')">
                父div
                <div id="sub-div" class="son" @click="changeMsg($event, 'son')">
                    子div
                </div>
            </div>
        </div>
    </body>
    <script src="./js/vue.global.js"></script>
    <script>
        let vue = Vue.createApp({
            data() {
                return {
                    
                }
            },
            methods: {
                changeMsg(event, msg) {
                    console.log(event.target, msg);
                }
            }
        });
        vue.mount('#root')
    </script>
    <style>
        .parent {
            padding: 10px;
            background-color: blue;
        }
        
        .son {
            padding: 10px;
            background-color: red;
        }
    </style>
</html>

在子div点击事件后，添加阻止事件冒泡后，事件不会向上冒泡

<html>
    <header>

    </header>
    <body>
        <div id="root">
            <div id="parent-div" class="parent" @click="changeMsg($event, 'parent')">
                父div
                <div id="sub-div" class="son" @click.stop="changeMsg($event, 'son')">
                    <!--添加阻止事件冒泡-->
                    子div
                </div>
            </div>
        </div>
    </body>
    <script src="./js/vue.global.js"></script>
    <script>
        let vue = Vue.createApp({
            data() {
                return {
                    
                }
            },
            methods: {
                changeMsg(event, msg) {
                    console.log(event.target, msg);
                }
            }
        });
        vue.mount('#root')
    </script>
    <style>
        .parent {
            padding: 10px;
            background-color: blue;
        }
        
        .son {
            padding: 10px;
            background-color: red;
        }
    </style>
</html>
  • prevent
    作用：阻止事件的默认行为，等同于 event.preventDefault()
    例子：
<!--使用prevent修饰符阻止了a标签点击事件的默认跳转行为-->
<html>
    <header>

    </header>
    <body>
            <a href="https://www.baidu.com" @click.prevent="console.log('我要阻止默认行为')">点击我跳转</a>
        </div>
    </body>
    <script src="./js/vue.global.js"></script>
    <script>
        let vue = Vue.createApp({
        });
        vue.mount('#root')
    </script>
    <style>

    </style>
</html>
  • capture
    作用：使用事件捕获模式，即事件处理程序先在此元素本身运行，然后再运行子元素的处理程序。事件捕获和事件冒泡阶段是相反的，如果我们想在事件捕获阶段就触发事件可以使用capture修饰。
    例子：先触发了最外层div的事件，然后是父div的事件，最后触发子div的事件
<html>
    <header>

    </header>
    <body>
        <div id="root">
            <div id="grandParent-div" @click.capture="changeMsg($event, 'grandParent')">
                最外层div
                <div id="parent-div" class="parent" @click.capture="changeMsg($event, 'parent')">
                    父div
                    <div id="sub-div" class="son" @click.capture="changeMsg($event, 'son')">
                        子div
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script src="./js/vue.global.js"></script>
    <script>
        let vue = Vue.createApp({
            data() {
                return {
                    
                }
            },
            methods: {
                changeMsg(event, msg) {
                    console.log(event.target, msg);
                }
            }
        });
        vue.mount('#root')
    </script>
    <style>
        .parent {
            padding: 10px;
            background-color: blue;
        }
        
        .son {
            padding: 10px;
            background-color: red;
        }
    </style>
</html>
  • self
    作用：只有事件在当前元素上触发时，方法才会被调用。
    例子：
<!--当点击子div，父div，最外层div时，事件只在当前元素上触发，并不会向上冒泡-->
<html>
    <header>

    </header>
    <body>
        <div id="root">
            <div id="grandParent-div" @click.self="changeMsg($event, 'grandParent')">
                最外层div
                <div id="parent-div" class="parent" @click.self="changeMsg($event, 'parent')">
                    父div
                    <div id="sub-div" class="son" @click.self="changeMsg($event, 'son')">
                        子div
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script src="./js/vue.global.js"></script>
    <script>
        let vue = Vue.createApp({
            data() {
                return {
                    
                }
            },
            methods: {
                changeMsg(event, msg) {
                    console.log(event.target, msg);
                }
            }
        });
        vue.mount('#root')
    </script>
    <style>
        .parent {
            padding: 10px;
            background-color: blue;
        }
        
        .son {
            padding: 10px;
            background-color: red;
        }
    </style>
</html>
  • once
    作用：只让事件触发一次
    例子：
<!--点击后，事件只触发一次-->
<html>
    <header>

    </header>
    <body>
        <div id="root">
            <button id="once-div" @click.once="changeMsg($event, 'once event')">点我事件只触发一次</button>
        </div>
    </body>
    <script src="./js/vue.global.js"></script>
    <script>
        let vue = Vue.createApp({
            data() {
                return {
                    
                }
            },
            methods: {
                changeMsg(event, msg) {
                    console.log(event.target, msg);
                }
            }
        });
        vue.mount('#root')
    </script>
    <style>
        .parent {
            padding: 10px;
            background-color: blue;
        }
        
        .son {
            padding: 10px;
            background-color: red;
        }
    </style>
</html>
  • passive
    作用：默认事件行为会立即触发，不会等事件处理函数执行完后再触发
    例子：
<!--在wheel事件上添加passive修饰符，鼠标滚轮滚动事件触发后，最外层div的滚动条先默认下滑，然后在调用事件处理函数-->
<html>
    <header>

    </header>
    <body>
        <div id="root">
            <div style="height: 200px; width: 200px;overflow: scroll;" @wheel.passive="divScroll($event)">
                <div style="height: 300px;width: 200px;background-color: red;">

                </div>
                <div style="height: 300px;width: 200px;background-color: blue;">

                </div>
                <div style="height: 300px;width: 200px;background-color: orange;">

                </div>
            </div>

        </div>
    </body>
    <script src="./js/vue.global.js"></script>
    <script>
        let vue = Vue.createApp({
            data() {
                return {
                    
                }
            },
            methods: {
                changeMsg(event, msg) {
                    console.log(event.target, msg);
                },
                divScroll(event) {
                    for(let i = 0; i< 100000;i++) {
                        console.log(i);
                    }
                    console.log(event);
                }
            }
        });
        vue.mount('#root')
    </script>
    <style>
        .parent {
            padding: 10px;
            background-color: blue;
        }
        
        .son {
            padding: 10px;
            background-color: red;
        }
    </style>
</html>

1.3. 按键修饰符

按键修饰符用来修饰键盘相关事件keyup和keydown。我们可以修饰键盘事件在按下特定键子时才触发。

在下面的例子中声明了两个input表单，分别绑定了键盘落下事件。在text1上用“1”修饰符，当在text1中按下键子“1”时事件才会被触发。在text2上用“caps-lock”修饰符，当在text2中按下键子“CapsLock”（大写锁定键）时，事件才会被触发。

注意：当按键修饰符修饰键名由两个单词组成的键子时，不能使用驼峰写法，要转换为串式写法。如CapsLock键需转换为caps-lock，ArrowUp需转换为arrow-up。如果你不知道想修饰的键的名字是什么，可以先不添加修饰符，然后打印事件对象，事件对象上的key属性即为键名

<!---->
<html>
    <header>

    </header>
    <body>
        <div id="root">
            <input type="text" id="text1" @keyDown.1="keyDown($event)">
            <br/>
            <input type="text" id="text2" @keyDown.caps-lock="keyDown($event)">
        </div>
    </body>
    <script src="./js/vue.global.js"></script>
    <script>
        let vue = Vue.createApp({
            data() {
                return {
                    
                }
            },
            methods: {
                keyDown(event) {
                    console.log(event);
                }
            }
        });
        vue.mount('#root')
    </script>
    <style>
        .parent {
            padding: 10px;
            background-color: blue;
        }
        
        .son {
            padding: 10px;
            background-color: red;
        }
    </style>
</html>

vue为内置了一些键的别名，分别为.enter、.tab、.delete、.esc、.space、.up、.down、.left、.right。

特殊的系统按键修饰符
系统修饰符包含四个，分别是：.ctrl、.alt、.shift、.meta。

系统按键修饰符和常规按键不同。与 keyup 事件一起使用时，该按键必须在事件发出时处于按下状态。换句话说，keyup.ctrl 只会在你仍然按住 ctrl 但松开了另一个键时被触发。若你单独松开 ctrl 键将不会触发。

事件修饰符和按键修饰符均可组合使用，如@keyup.enter.down表示同时抬起enter键和下方向键时触发事件。@click.stop.capture代表阻止click事件冒泡并在事件捕获阶段触发调用函数

我们可以使用.exact修饰符来控制系统按键修饰符的准确性，如果我们希望仅按下ctrl键的时候触发事件，可以使用.ctrl.exact来修饰事件。

1.4. 事件注意事项

  • 事件捕获是从外层元素到内层元素的，事件冒泡是从内层到外层元素的。
  • .exact仅能控制系统按键修饰符，在普通按键修饰符上使用是无效的。
  • 按键修饰符不仅能作用在keydown和keyup事件上，也可以作用在click等其他事件上。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码小飞飞飞飞

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值