v-on指令修饰符大全

目录

1.事件修饰符

1）.stop

2）.prevent

3）.capture

4）.self

5）.once

6）.passive

2.按键修饰符

3.系统修饰键

4.鼠标按钮修饰符

---

1.事件修饰符

1）.stop

作用：调用event.stop，阻止事件冒泡

    

        click
    

const vm = new Vue({
    el: '#app',
    methods: {
        fatherClick() {
            console.log('father');
        },
        childClick() {
            console.log('child');
        }
    }
})

【结果】若没有阻止冒泡则打印child，father，组织后只打印child 

2）.prevent

作用：调用event.preventDefault()，阻止默认事件，举个栗子，form表单在提交时，会自动刷新页面，如图1

图1 未阻止默认事件

此时需要阻止默认事件，如下

const vm = new Vue({
    el: '#app',
    methods: {
        onSubmit() {
            console.log('submit')
        }
    }
})

 【结果】

图2 方法1结果

3）.capture

作用：事件捕获模式

    

        click
    

const vm = new Vue({
    el: '#app',
    methods: {
        fatherClick() {
            console.log('father');
        },
        childClick() {
            console.log('child');
        }
    }
})

【结果】点击click，打印结果如下

4）.self

作用：只当事件是从侦听器绑定的元素本身触发时才触发回调

    

        click
    

const vm = new Vue({
    el: '#app',
    methods: {
        fatherClick() {
            console.log('father');
        },
        childClick() {
            console.log('child');
        }
    }
})

【结果】

5）.once

作用：只触发一次回调，2.1.4新增

    click

const vm = new Vue({
    el: '#app',
    methods: {
        print() {
            console.log('button')
        }
    }
})

 【结果】

6）.passive

作用：设置addEventListener中的passive选项，2.3.0版本中新增的，能够提升移动端的性能。在触发触摸事件时，即使执行了一个空的函数，也会让页面卡顿。因为浏览器不知道监听器到底会不会阻止默认事件，所以浏览器要等到执行完整个函数后，才能决定是否要滚动页面。passive事件监听器，允许开发者告诉浏览器，监听器不会阻止默认行为，从而浏览器可以放心大胆的滚动页面，这样可以大幅度提升移动端页面的性能，因为据统计只有20%的触摸事件会阻止默认事件。passive会告诉浏览器你不想阻止默认事件的默认行为

【注意】

① 使用修饰符时，顺序很重要。相应的代码会以同样的顺序产生。因此，

v-on:click.prevent.self //会阻止所有的点击的默认事件
v-on:click.self.prevent //只会阻止元素自身点击的默认事件

② 不要把.passive 和.prevent 一起使用，因为.prevent将会被忽略，同时浏览器可能会向你展示一个警告

2.按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue允许为v-on在监听键盘事件时添加按键修饰符，如下例

const vm = new Vue({
    el: '#app',
    methods: {
        submit() {
            alert('提交成功')
        }
    }
})

 【结果】

 我们可以将KeyboardEvent.key暴露的任意有效按键名转换为kebab-case来作为修饰符

3.系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器

修饰键与常规按键不同，在和keyup事件一起使用时，事件触发时修饰键必须处于按下状态，换句话说，只有在按住ctrl的情况下释放其他按键，才能触发keyup.ctrl。而单单释放ctrl也不会触发事件。如果想要这样的行为，请为ctrl换用keyCode: keyuo.17

4.鼠标按钮修饰符

作用：仅当点击特定的鼠标按钮时会处理执行函数，有.left / .right / .middle