Vue中的事件修饰符和按键修饰符

小宝945

已于 2023-12-24 22:42:09 修改

阅读量950

点赞数 18

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js 前端

于 2023-12-22 14:30:00 首次发布

本文链接：https://blog.csdn.net/weixin_65032328/article/details/135151336

Vue 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了Vue中的事件修饰符（如.stop、.prevent、.capture等）及其作用，以及常用的按键修饰符（如.enter、.delete、.esc等），并提供了测试代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：主要内容来源都来自老杜的Vue视频教学，大家可以去学习

事件修饰符

六种修饰符

Vue当中提供的事件修饰符：
.stop: 停止事件冒泡，等同于event.stopPropagation().
.prevent: 等同于event.preventDefault()阻止事件的默认行为。
.capture: 添加事件监听器时使用事件捕获模式。
添加事件监听器包括两种不同的方式：
一种是从内到外添加。（事件冒泡模式，默认）
一种是从外到内添加。（事件捕获模式）
.self: 这个事件如果是”我自己元素“上发生的事件，这个事件不是别人给我传递过来的事件，则执行对应的程序。
.once: 这个事件只发生一次。
.passive: passive翻译为顺从/不抵抗。无需等待。直接继续(立即)执行事件的默认行为。
.passive 和 .prevent 修饰符是对立的。不可以共存(如果一起用就会报错。)
.prevent 阻止事件的默认行为。
.passive 解除阻止

事件修饰符测试代码

<!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>

    <!-- 安装Vue -->
    <script src="../js/vue.js"></script>
    <style>
        .divList{
            width: 300px;
            height: 200px;
            background-color: greenyellow;
            overflow: auto;
        }
        .item{
            width: 300px;
            height: 200px;
        }
    </style>
</head>
<body>

    <div id="app">
        <h1 style="color: red; text-align: center;">{{msg}}</h1>
        <p style="color: green;">
            Vue当中提供的事件修饰符：<br>
            &emsp;&emsp;.stop: 停止事件冒泡，等同于event.stopPropagation().<br>
            &emsp;&emsp;.prevent: 等同于event.preventDefault()阻止事件的默认行为。<br>
            &emsp;&emsp;.capture: 添加事件监听器时使用事件捕获模式。<br>
            &emsp;&emsp;&emsp;&emsp;添加事件监听器包括两种不同的方式：<br>
            &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;一种是从内到外添加。（事件冒泡模式）<br>
            &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;一种是从外到内添加。（事件捕获模式）<br>
            &emsp;&emsp;.self: 这个事件如果是”我自己元素“上发生的事件，这个事件不是别人给我传递过来的事件，则执行对应的程序。<br>
            &emsp;&emsp;.once: 这个事件只发生一次。<br>
            &emsp;&emsp;.passive: passive翻译为顺从/不抵抗。无需等待。直接继续(立即)执行事件的默认行为。<br>
            &emsp;&emsp;&emsp;&emsp;.passive 和 .prevent 修饰符是对立的。不可以共存(如果一起用就会报错。)<br>
            &emsp;&emsp;&emsp;&emsp;.prevent 阻止事件的默认行为。<br>
            &emsp;&emsp;&emsp;&emsp;.passive 解除阻止<br>
        </p>
        <!-- Vue的prevent事件修饰符 -->
        <a href="https:baidu.com" target="_blank">go 百度</a> <br><br>
        <a href="https:baidu.com" @click.prevent>go 百度(使用了prevent修饰)</a>
        <br><br>

        <!-- Vue的stop事件修饰符 -->
        <div @click="three">
            <div @click="two">
                    <button @click="one">没有使用stop事件修饰符</button><br><br>
                    <button @click.stop="one">使用了stop事件修饰符</button>
            </div>
        </div>
        <br><br>

        <!-- Vue的capture事件修饰符 -->
        <div @click.capture="three">
            <div @click="two">
                    <button @click.capture="one">使用了capture事件修饰符</button>
            </div>
        </div>
        <br><br>

        <!-- Vue的self事件修饰符 -->
        <div @click="three">
            <div @click.self="two">
                    <button @click="one">使用了self事件修饰符</button>
            </div>
        </div>
        <br><br>

        <!-- Vue的once事件修饰符 -->
        <button @click.once="one">使用了once事件修饰符</button>
        <br><br>

        <!-- Vue的passive事件修饰符 -->
        <div class="divList" @wheel.passive="testPassive">
            <h5 style="text-align: center;">测试Vue的passive事件修饰符</h1>
            <div class="item">div1</div>
            <div class="item">div3</div>
            <div class="item">div2</div>
        </div>
    </div>

    <script>
        const vm = new Vue({
            el : '#app',
            data : {
                msg : '事件修饰符'
            },
            methods: {
                baidu(){

                },
                one() {
                    alert('one');
                },
                two(){
                    alert('two');
                },
                three(){
                    alert('three');
                },
                testPassive(){
                    for(let i=0; i<1000000; i++) {
                        console.log('test passive')
                    }
                }
            }
        });
    </script> 
</body>
</html>

按键修饰符

常用的按键修饰符

9个比较常用的按键修饰符：
	.enter
	.tab （必须配合keydown事件使用。）
	.delete (捕获“删除”和“退格”键)
	.esc
	.space
	.up
	.down
	.left
	.right
怎么获取某个键的按键修饰符？
    第一步：通过event.key获取这个键的真实名字。
    第二步：将这个真实名字以kebab-case风格进行命名。
        PageDown是真实名字。经过命名之后：page-down
按键修饰符是可以自定义的？
    通过Vue的全局配置对象config来进行按键修饰符的自定义。
    语法规则：
        Vue.config.keyCodes.按键修饰符的名字 = 键值
系统修饰键：4个比较特殊的键
    ctrl、alt、shift、meta
    对于keydown事件来说：只要按下ctrl键，keydown事件就会触发。
    对于keyup事件来说：需要按下ctrl键，并且加上按下组合键，然后松开组合键之后，keyup事件才能触发。

按键修饰符测试代码

<!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="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        回车键：<input type="text" @keyup.enter="getInfo"><br>
        回车键（键值）：<input type="text" @keyup.13="getInfo"><br>
        delete键：<input type="text" @keyup.delete="getInfo"><br>
        esc键：<input type="text" @keyup.esc="getInfo"><br>
        space键：<input type="text" @keyup.space="getInfo"><br>
        up键：<input type="text" @keyup.up="getInfo"><br>
        down键：<input type="text" @keyup.down="getInfo"><br>
        left键：<input type="text" @keyup.left="getInfo"><br>
        right键：<input type="text" @keyup.right="getInfo"><br>
        <!-- tab键无法触发keyup事件。只能触发keydown事件。 -->
        tab键： <input type="text" @keyup.tab="getInfo"><br>
        tab键（keydown）： <input type="text" @keydown.tab="getInfo"><br>
        PageDown键： <input type="text" @keyup.page-down="getInfo"><br>
        huiche键： <input type="text" @keyup.huiche="getInfo"><br>
        ctrl键(keydown)： <input type="text" @keydown.ctrl="getInfo"><br>
        ctrl键(keyup)： <input type="text" @keyup.ctrl="getInfo"><br>
        ctrl键(keyup)： <input type="text" @keyup.ctrl.i="getInfo"><br>
    </div>

    <script>
        // 自定义了一个按键修饰符：.huiche 。代表回车键。
        Vue.config.keyCodes.huiche = 13

        const vm = new Vue({
            el : '#app',
            data : {
                msg : '按键修饰符'
            },
            methods : {
                getInfo(event){
                    // 当用户键入回车键的时候，获取用户输入的信息。
                    //if(event.keyCode === 13){
                        console.log(event.target.value)
                    //}
                    console.log(event.key)
                }
            }
        })
    </script>
</body>
</html>