12.事件修饰符

.stop:阻止冒泡
冒泡事件:当一个大的外部标签有一个触发事件，内部便签也有一个触发事件
。如果点击内部便签触发事件的同时，外部标签事件也会跟随触发。
当想要的效果是点击里面的标签，不触发外面标签事件，可以加上.stop阻止冒泡事件发生

冒泡：<input type="button" value="冒泡" @click="btnclick">
不冒泡：<input type="button" value="不冒泡" @click.stop="btnclick">

 

.prevent:阻止默认行为
比如a标签给他一个连接，默认情况下点击点击将跳转。
如果对该默认事件加上.prevent则阻止，不再跳转。

<a href="http://www.baidu.com" @click="linkclick">去百度,无阻止行为</a><br>
<a href="http://www.baidu.com" @click.prevent="linkclick">去百度，有阻止默认行为</a>

表单提交也可以，不过form表单提交时控制@submit.prevent="xxxx"

.capture:添加事件监听器时使用事件捕获模式
先捕获到外层，再执行内层

<div id="inner" @click.capture="innerclick">

 

.self:只当事件在该元素本身（比如不是子元素）触发时触发回调

<div id="inner" @click.self="innerclick">

也就是只有点击到它自己，才会触发。

.once:事件只触发一次

<input type="button" value="触发一次" @click.once="btnclick">