Vue修饰符（Vue事件修饰符、Vue按键修饰符）

前言

Vue事件修饰符

列举较常用的事件修饰符

.stop

.prevent

.capture

.once

Vue按键修饰符

四个特殊键

获取某个键的按键修饰符

前言

本文介绍Vue修饰符，包括Vue事件修饰符以及按键修饰符

Vue事件修饰符

列举较常用的事件修饰符

.stop: 停止事件冒泡等同于event.stopPropagation()

.prevent: 阻止事件的默认行为等同于 event.preventDefault()

.capture: 添加事件监听器时使用事件捕获模式

添加事件监听器包括两种不同的方式：

内到外（事件冒泡模式）、外到内（事件捕获模式）

.once: 事件只发生一次

例

没有任何修饰符的情况下

<div class="app">
        <div @click="three">
            <span @click="two">
                <button @click="one">{{msg}}</button>
            </span>
        </div>
    </div>
    <script>
        const vm = new Vue({
            el:'.app',
            data:{
                msg:'事件修饰符'
            },
            methods:{
                one(){
                   console.log('1');
                },
                two(){
                    console.log('2');
                },
                three(){
                    console.log('3');
                }
            }
        })
    </script>

程序会发生冒泡事件，依次在控制台打印出1,2,3

.stop

添加了.stop事件修饰符

<div class="app">
        <div @click="three">
            <span @click.stop="two"> //在此处添加stop修饰符,阻止事件冒泡
                <button @click="one">{{msg}}</button>
            </span>
        </div>
    </div>

在span标签上添加stop修饰符，控制台打印出1,2就会停止冒泡

.prevent

添加了.prevent事件修饰符

//在原有的代码基础上增加一个超链接
 <a href="http://www.baidu.com" @click.prevent="four">去百度</a>
//在methods中增加一个函数
 four(){
                    console.log('去百度');
                }

.capture

添加了.capture事件修饰符

内到外，也就是冒泡模式，控制台依次打印出1,2,3

外到内，事件捕获模式，控制台会依次打出3,2,1

 <div @click.capture="three">
            <span @click.capture="two">
                <button @click.capture="one">{{msg}}</button>
            </span>
        </div>

当只给span标签添加capture修饰符时

会优先打印2,其余的会按照默认的进行冒泡

<div @click="three">
            <span @click.capture="two">
                <button @click="one">{{msg}}</button>
            </span>
        </div>

.once

添加了.once事件修饰符

没有添加once事件修饰符前，每点击按钮一次，就会触发事件一次，添加了once事件修饰符后

 <div @click="three">
            <span @click="two">
                <button @click.once="one">{{msg}}</button>
            </span>
        </div>

我们给button添加了once，所以1只会打印一次，其余的会默认冒泡事件触发，答应出2,3

Vue按键修饰符

.enter 回车键

.delete 键

.esc 键

.space 空格键

.up 箭头上键

.dowm 箭头下键

.left 箭头左键

.right 箭头右键

.tab 键（无法触发keyup事件，只能触发keydown事件）

四个特殊键

ctrl,alt,shift,meta(也就是win标志，田)

对于keydown事件来说，只需要直接按下对应的键就可以触发

对于keyup时间来说，需要按下对应的键，并且加上按下组合键，然后松开组合键，才可以触发keyup事件.组合键就类似于：ctrl+c、ctrl+x等

<div class="app">
        <h1>{{msg}}</h1>
        回车键：<input type="text" @keyup.enter="getInfo">
       delete键：<input type="text" @keyup.delete="getInfo">
        esc键：<input type="text" @keyup.esc="getInfo">
        space键：<input type="text" @keyup.space="getInfo">
        up键：<input type="text" @keyup.up="getInfo">
        down键：<input type="text" @keyup.down="getInfo">
        left键：<input type="text" @keyup.left="getInfo">
        right键：<input type="text" @keyup.right="getInfo">
        tab键：<input type="text" @keydown.tab="getInfo">
    </div>
    <script>
        const vm = new Vue({
            el:'.app',
            data:{
                msg:'按键修饰符'
            },
            methods:{
                getInfo(e){
                    console.log(e.target.value);
                }
            }
        })
    </script>

按下对应的案件后会立即调用函数

获取某个键的按键修饰符

通过event.key获取这个键的真实名字

将这个真是名字以kebab-case风格进行命名例：pageDown是真实名字，命名后，page-down

<div class="app">
        <h1>{{msg}}</h1>
       回车键：<input type="text" @keyup.enter="getInfo">
    </div>
    <script>
        const vm = new Vue({
            el:'.app',
            data:{
                msg:'按键修饰符'
            },
            methods:{
                getInfo(e){
                    console.log(e.key);
                }
            }
        })
    </script>

按下回车时，打印出相应的按键