v-on的事件修饰符与按键修饰符

一、事件修饰符

1.阻止冒泡(重要) .stop

<div id="app">
        <div @click = "father">
            father
            <div @click.stop = "son">son</div>
        </div>
    </div>
    <script>
        const vm = new Vue({
            el:"#app",
            data(){
                return {

                }
            },
            methods:{
                father(){
                    console.log("this.father");
                },
                son(){
                    console.log("this.son");
                }
            }
        })
    </script>

2.阻止默认事件(重要) .prevent

<a href="https://www.baidu.com" @click.prevent = "father">百度一下</a> <!--页面不会跳转-->

3. 事件捕获模式 .capture

点击子元素时会优先打印带有 .capture 的父元素。

       <div @click.capture="father">
            father
            <div @click="son3">
                son3
                <div @click="son2">
                    son2
                    <div @click="son1">son1</div>
                </div>
            </div>
        </div>

4.只有当event.target 是当前元素自身时触发函数 .self

       <div @click.self="father">
            father
            <div @click="son3">
                son3
                <div @click="son2">
                    son2
                    <div @click="son1">son1</div>
                </div>
            </div>
        </div>

 

 5.点击事件只触发一次。

<div @click.once = "father">点击</div>

6.滚动事件的默认行为 (即滚动行为) 将会立即触发 .passive

<div v-on:scroll.passive="onScroll">...</div>

.passive与.prevent不能一起使用。

7.修饰符可以一起使用。

<div>
    <a href="https://www.baidu.com" @click.once.prevent = "father">百度一下</a>
</div>

once与prevent联合使用，会让函数只调用一次，点击事件就失效了，变成能点击的a链接。

二、按键修饰符

1.可以绑定任意键和keyCode值。

    <div id="app">
        <input type="text" @keyup.delete = "key">
    </div>

2.可以自定义修饰符别名。

    <div id="app">
        <input type="text" @keyup.f1 = "key">
    </div>

    <script>
        Vue.config.keyCodes.f1 = 13;
    </script>