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

码小飞飞飞飞

已于 2024-01-06 12:13:07 修改

阅读量120

点赞数 6

分类专栏： vue 文章标签： vue.js 学习 javascript

于 2023-09-21 20:58:16 首次发布

本文链接：https://blog.csdn.net/qq_34776150/article/details/133148431

版权

vue 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

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

收藏

觉得还不错? 一键收藏
打赏
0
评论
从0开始学习vue第二节，vue的事件处理

在text1上用“1”修饰符，当在text1中按下键子“1”时事件才会被触发。我们可以使用.exact修饰符来控制系统按键修饰符的准确性，如果我们希望仅按下ctrl键的时候触发事件，可以使用.ctrl.exact来修饰事件。vue为内置了一些键的别名，分别为.enter、.tab、.delete、.esc、.space、.up、.down、.left、.right。我们在调用事件时也可以传入参数，参数可以是data中的数据也可以是字面值，当想获取事件对象时需要在调用方法时传入$event对象。
复制链接

扫一扫