vue 事件修饰符.capture 和 .self

vue 其他事件修饰符还是很好理解的，不过 .capture 和 .self
修饰符比较不容易理解，找了一些文档发现说的也不是很清晰比较难理解，下面我就用自己的语言来理解一下
要理解.capture 和 .self 之前，先看下我这篇文章DOM 事件相关知识总结——事件绑定、事件流（事件冒泡、捕获）

.capture：

官方解释：

<!-- 添加事件监听器时，使用 `capture` 捕获模式 -->
<!-- 例如：指向内部元素的事件，在被内部元素处理前，先被外部处理 -->
<div @click.capture="doThis">...</div>

默认是冒泡模式，添加 .capture 变成捕获模式

<!-- .capture事件捕获模式 -->
<div class="inner" @click.capture="divHandler">
	<input type="button" value="click me" @click="btnHandler">
</div>

// 点击 button 触发 divHandler 事件

.self:

官方解释：

<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如：事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>

其实就是阻止当前元素的冒泡行为

只有事件是元素本身触发时才回调
除此之外都不会被触发
该修饰符加在要实现此效果的元素标签上

<div class="inner" @click.self="divHandler">
	<input type="button" value="click me" @click="btnHandler">
</div>

// 点击 div 触发 divHandler 事件