<!DOCTYPE html>
<html lang="en"><head> <meta charset="UTF-8"> <title>修饰符：self capture stop prevent的使用</title> <script type="text/javascript" src="vue.js"></script></head><body><div id="demo"> <!--第一种情况--> <!--<div @click="divEven" style="border:1px #188eee solid;">--> <!--<a href="www.baidu.com" @click="aEven">百度链接</a>--> <!--</div>--> <!--stop的使用：阻止事件冒泡的发生--> <!--<div @click="divEven" style="border:1px #188eee solid;">--> <!--<a href="www.baidu.com" @click.stop="aEven">百度链接</a>--> <!--</div>--> <!--prevent的使用：阻止默认事件的发生--> <!--<div @click="divEven" style="border:1px #188eee solid;">--> <!--<a href="www.baidu.com" @click.stop.prevent="aEven">百度链接</a>--> <!--</div>--> <!--self的使用：只有点击他本身时才去执行，点击他的子元素不去执行--> <!--<div @click.self="divEven" style="border:1px #188eee solid;">--> <!--<a href="www.baidu.com" @click.prevent="aEven">百度链接</a>--> <!--</div>--> <!--capture的使用：触发捕获事件()先执行大盒子的事件，起执行小盒子的事件--> <div @click.capture="divEven" style="border:1px #188eee solid;"> <a href="www.baidu.com" @click.prevent="aEven">百度链接</a> </div></div><script> new Vue({ el:"#demo", methods:{ divEven(){ alert("我是div的事件"); }, aEven(){ alert("我是a链接事件"); } } });</script></body></html>