v-on修饰符

1.阻止冒泡事件 .stop

事件冒泡：在结构上存在嵌套的元素，有事件冒泡的功能，自子元素传递（冒泡）到父元素，所以触发了绑定在button上的点击事件，在事件冒泡的作用下，绑定在div上的事件也会被触发。

        <div id="app">
                <div @click="divClick">
                    <button @click="btnClick">btn</button>
                </div>
        </div>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const app = new Vue({
                el: '#app',
                data: {
                    counter: 0
                },
                methods: {
                    btnClick(){
                        console.log('btnClick');
                    },
                    divClick(){
                        console.log('divClick');
                    }
                }
            })
        </script>

divClick事件也被触发

image.png

增加.stop修饰符就可以阻止冒泡事件

image.png

image.png

原生js中阻止冒泡事件是利用事件对象调用stopPropagation()， event.stopPropagation()

2.阻止默认事件 .prevent

正常情况下，点击右键会出现菜单，但是特定时候需要取消这个事件，就用.prevent修饰符阻止默认事件

image.png

image.png

原生js中使用event.preventDefault()阻止默认事件

3.当事件是从特定键触发时才触发回调 .enter(回车键)

image.png

4.要求事件只触发一次 .once

image.png