（1）实例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>事件修饰符</title> <script src="../lib/vue.js"></script> <style> .app{ width: 200px; height: 200px; background: red; } </style> </head> <body> <!-- <div class="app" @click.capture="outClick"> --> <!-- 使用.capture实现捕获触发事件的机制，即从外部事件开始执行 --> <div class="app" @click.self="outClick"> <!-- 使用.self实现只有点击当前元素才会触发事件处理函数--> <input type="button" value="按钮1" @click.stop="innerClick"> <!-- 使用.stop阻止事件的冒泡行为 --> <input type="button" value="按钮2" @click.once="innerClick"> <!-- 使用.once实现事件的触发次数为一次 --> <a href="https://www.baidu.com/" @click.prevent.stop="aClick">有事找百度</a> <!-- 使用.prevent阻止事件的默认行为 --> </div> <script> var vm = new Vue({ el:".app", methods:{ outClick(){ alert(‘我是外面的事件‘); }, innerClick(){ alert(‘我是内部的事件‘); }, aClick(){ alert(‘我是超链接的事件‘); } } }) </script> </body> </html>
（2）摘要
使用.stop阻止事件的冒泡行为。
使用.prevent阻止事件的默认行为。
使用.self实现只有点击当前元素才会触发事件处理函数。
使用.capture实现捕获触发事件的机制，即从外部事件开始执行。
使用.once实现事件的触发次数为一次。
原文：https://www.cnblogs.com/qiqisusu/p/11341885.html