<div id="divApp"><div class="divColor" v-on:click="clickDiv"><!--正常情况下因为按钮是放在div里的，所以点击按钮的时候，后续还会触发div的click事件，这叫冒泡--><!--事件修饰符stop可以只触发当前事件，阻止冒泡，只触发绑定的事件--><input type="button" value="点我！" v-on:click.stop="clickBtn" /></div><br /><!--一个a标签，点击时应该会跳转到百度--><!--可以用事件修饰符.prevent来阻止默认事件的触发，只触发绑定的事件--><!--.once事件修饰符，可以让事件只触发一次，并且事件修饰符也可以组合使用--><a href="https://www.baidu.com" target="_blank" v-on:click.prevent.once="noLink">跳转到百度</a><br /><br /><!--正常情况下因为按钮是放在div里的，所以点击按钮的时候，后续还会触发div的click事件，这叫冒泡--><!--如果不想用冒泡的方式触发，也可以用捕获方式，即先触发div的click,再触发按钮的click--><!--事件修饰符.capture，可以让指定的事件按捕获方式触发--><div class="divColor" v-on:click.capture="clickDiv"><input type="button" value="点我！" v-on:click="clickBtn" /></div><br /><br /><!--正常情况下因为按钮是放在div里的，所以点击按钮的时候，后续还会触发div的click事件，这叫冒泡--><!--如果想各自触发各自的，不用冒泡或者捕获方式--><!--事件修饰符.self，可以让指定的事件只被当前元素触发--><!--因为这里只嵌套了2个DOM元素，所以看起来效果和.stop一样-->@*举个例子，如果外面再嵌套一层div，按钮使用stop的话，则只触发按钮的点击事件如果不用stop,在最外面的div的click事件上加上self,点击按钮的话，会触发按钮点击事件并冒泡触发中间的div的点击事件，也就是说，self只能影响当前元素。*@<div class="divColor" v-on:click.self="clickDiv"><input type="button" value="点我！" v-on:click="clickBtn" /></div></div>

<script>var v = new Vue({el: '#divApp',data: {msg: '我是data中的msg属性哦',},methods: {clickDiv() {alert("clickDiv");},clickBtn() {alert("clickBtn");},noLink() {alert("我没跳转哦");}}})</script>