Vue常用事件修饰符

1.prevent：阻止默认事件

效果在线演示

<div id="app">
            <!-- 未使用@click.prevent -->
            <a href="https://www.xxsirs.top" @click="msg">点此跳转主页</a>
            <!-- 使用@click.prevent即可阻止默认行为（即a标签的默认跳转链接行为） -->
            <a href="https://www.xxsirs.top" @click.prevent="msg">点此跳转主页</a>
</div>

2.stop：阻止冒泡事件：

效果在线演示

<div id="app">
            <!-- 弹窗2次,未使用stop方法 -->
            <div class="demo" @click="msg">
            <button @click="msg">弹窗两次</button>
        </div>
        
        <div id="app">
            <!-- 弹窗1次，使用了.stop方法 -->
            <div class="demo" @click="msg">
            <button @click="msg.stop">弹窗一次</button>
        </div>
</div>

3.once：事件仅触发一次

效果在线演示

<div id="app">
            <!-- 弹窗一次后点击按钮不再弹窗 -->
            <div class="demo">
            <button @click.once="msg">弹窗一次</button>
</div>