<!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="" @click="aEven">百度链接</a>--><!--</div>--><!--stop的使用：阻止事件冒泡的发生--><!--<div @click="divEven" style="border:1px #188eee solid;">--><!--<a href="" @click.stop="aEven">百度链接</a>--><!--</div>--><!--prevent的使用：阻止默认事件的发生--><!--<div @click="divEven" style="border:1px #188eee solid;">--><!--<a href="" @click.stop.prevent="aEven">百度链接</a>--><!--</div>--><!--self的使用：只有点击他本身时才去执行，点击他的子元素不去执行--><!--<div @click.self="divEven" style="border:1px #188eee solid;">--><!--<a href="" @click.prevent="aEven">百度链接</a>--><!--</div>--><!--capture的使用：触发捕获事件()先执行大盒子的事件，起执行小盒子的事件--><div @click.capture="divEven" style="border:1px #188eee solid;"><a href="" @click.prevent="aEven">百度链接</a></div></div><script>new Vue({el:"#demo",methods:{divEven(){alert("我是div的事件");},aEven(){alert("我是a链接事件");}}});</script></body></html>
