Vue-Vue中的事件修饰符

6.Vue中的事件修饰符

1.功能

1.prevent:阻止默认事件

 <div id="app">
        <a href="https:www.baidu.com" @click=showInfo()>点击我触发事件</a>
    </div>

    const vm = new Vue({
        el:'#app',
        data:{

        },
        methods:{
            showInfo(){
                console.log("触发了事件");
            } 
        }

    }) 

看上述示例，当我们点击链接时

我们可以看到，点击链接之后，浏览器跳转到了新的网址,然后我们再看看使用prevent事件符

<div id="app">
        <a href="https:www.baidu.com" @click=showInfo()>点击我触发事件</a>
    </div>

此时我们点击链接之后，只会触发click绑定的函数，而不会执行默认事件

2.stop：阻止事件冒泡

<div id="app">
        <!-- <a href="https:www.baidu.com" @click.prevent=showInfo()>点击我触发事件</a> -->
        <div @click="showInfo()">
            <button @click="showInfo()">点击我触发事件</button>
        </div>
    </div>

const vm = new Vue({
        el:'#app',
        data:{

        },
        methods:{
            showInfo(){
                console.log("触发了事件");
            } 
        }

    }) 

当我们点击按钮时

控制台输出了两次，也就是调用了两次函数，这是为什么呢？

因为我们的按钮时包裹在div里的，我们点击按钮时，div也会触发函数，这样就执行了两次函数

我们可以用stop来解决这个问题

<div @click="showInfo()">
            <button @click.stop="showInfo()">点击我触发事件</button>
 </div>

当我们再次点击按钮时

函数只触发了一次

stop可以阻止事件的冒泡

3.once：事件只触发一次

 <button @click.once="showInfo()">点击我触发事件1</button>

 showInfo(){
                console.log("触发了事件");
            } 

当我们第一次点击按钮时

但当我们继续点击按钮时，控制台将不会弹出信息