1.Vue的事件修饰符：
1.prevent 阻止默认事件（常用）
2.stop:阻止默认冒泡（常用）
3.once：事件只触发一次（常用）
4.capture：使用事件的捕获模式
5.self：只有event.target是当前操作的元素才是触发条件
2.修饰符演示：
1.prevent 阻止默认事件（常用）。
只弹出同学您好，没有跳转网页
2.stop:阻止默认冒泡（常用）
只弹出一次“同学您好”
3.once：事件只触发一次（常用）
触发一次后，再次点击不再触发
4.capture：使用事件的捕获模式
不加capture（先冒泡再捕获）
加capture（先捕获再冒泡）
5.self：只有event.target是当前操作的元素才是触发条件
没有self（冒泡弹出两次同学您好）
有self（冒泡弹出一次同学您好）
3.全部代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="/npm/vue@2/dist/vue.js"></script><style>*{margin-top: 20px;}.demo1{height: 50px;background-color: skyblue;}.box1 {padding: 5px;background-color: skyblue;}.box2 {padding: 5px;background-color: orange;}.list {width: 200px;height: 200px;background-color: aquamarine;overflow: auto;}li {height: 100px;}</style></head><body><div class="root"><h1>欢迎来到{{name}}学习</h1><!-- 事件修饰符 --><a href="https:" @click.prevent="showInfo">点我提示信息</a><!-- 阻止事件冒泡 --><div @click="showInfo" class="demo1"><a href="https:" @click.stop.prevent="showInfo">点我提示信息</a><!-- 修饰符可以连续写 --></div><!-- 事件只触发一次 --><button @click.once="showInfo">点我提示信息</button><div class="box1" @click.capture="showMsg(1)">div1<div class="box2" @click="showMsg(2)">div2</div></div><!-- 只有event.target是当前操作的元素时才触发事件 --><div @click.self="showInfo" class="demo1"><button @click="showInfo">点我提示信息</button></div><!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 --><ul class="list" @wheel="demo"><li>1</li><li>2</li><li>3</li><li>4</li></ul></div></body><script>Vue.config.productionTip = false;new Vue({el:'.root',data:{name:'男'},methods:{showInfo(){alert('同学你好')},showMsg(msg){console.log(msg);},demo(){for(let i = 0;i<1000;i++){console.log('#');}console.log('leisile');}}})</script></html><!-- prevent 阻止默认事件（常用）stop:阻止默认冒泡（常用）once：事件只触发一次（常用）capture：使用事件的捕获模式self：只有event.target是当前操作的元素才是触发条件passive：事件的默认行为立即执行，无需等待事件回调执行完毕 优化多，移动端使用较多-->
