vue -- 事件修饰符

methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

.stop => // 阻止冒泡
.prevent => // 阻止默认行为
.capture => // 
.self => // 只有点击事件本身才有效，子元素没有效果
.once => // 只点击一次
.passive => // 不阻止默认行为

使用修饰符时的顺序会产生一些影响，因为相关的代码会以相同的顺序生成。

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 只有点击事件本身才有效 -->
<a v-on:click.stop="doThis"></a>

<!-- 添加事件监听器时，使用事件捕获模式 -->
<!-- 也就是说，内部元素触发的事件先在此处处理，然后才交给内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 停止点击事件冒泡 -->
<a v-on:click.self="doThis"></a>

// .passive 会向浏览器传达的意思是，你_并不_希望阻止事件的默认行为
<!-- 滚动事件的默认行为（滚动）将立即发生， -->
<div v-on:scroll.passive="onScroll">...</div>

<!-- 停止点击事件默认行为 -->
<a v-on:click.prevent="doThis"></a>