Vue事件修饰符的学习
事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation()是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。在Vue中，事件修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理。在Vue中事件修饰符主要有：
.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）.capture：与事件冒泡的方向相反，事件捕获由外到内.self：只会触发自己范围内的事件，不包含子元素.once：只会触发一次
.stop：
<div class="inner" @click="div">
<!-- .stop阻止所有冒泡 -->
<input type="button" value="挫他" @click.stop="input">
</div>
methods: {
div() {
console.log("A")
},
input() {
console.log("B")
}
}
在没有使用.stop的时候,点击div的区域会在控制台输出A，点击按钮的时候会出现B和A（会从内到外触发）。当我们加上.stop的时候相当于在方法中调用了event.stopPropagation()，这样在点击子事件的时候不会触发父节点事件。
.prevent
<a href="http://www.baidu.com" @click.prevent="Label">有问题去百度</a>
methods: {
Label() {
console.log("触发a标签的点击事件")
}
}
在没有使用.prevent的时候，点击a标签的时候，会先在控制输出console,然后调转到百度网页，使用.prevent的时候相当于调用了event.preventDefault()只会输出console并不会跳装网页
.capture
<!-- .capture 捕获事件，从外到里执行事件-->
<div class="inner" @click.capture="div">
<input type="button" value="挫他" @click="input">
</div>
methods: {
div() {
console.log("A")
},
input() {
console.log("B")
}
}
在没有使用.capture的时候点击input控制台输出的是B和A，使用.capture的时候点击input控制台输出的是A和B。.capture的作用是点击子节点事件的时候，会从父节点依次向当前子节点事件执行
.self
<div class="outer" @click="div">
<div class="inner" @click.self="div1">
<input type="button" value="戳他" @click="input">
</div>
</div>
methods: {
div() {
console.log("A")
},
input() {
console.log("C")
},
div1() {
console.log("B")
}
}
.self只会触发自己范围内的事件，不会包含子元素，点击div1的时候只会出现B和A，不会出现子节点事件。点击按钮的时候只会出现C和A,不会出现B事件
.once
<input type="button" value="戳他" @click.once="input">
methods: {
input() {
console.log("A")
}
}
使用.once修饰的只会执行一次，点击多次控制台也只会输出第一次点击的A
更多精彩
