vue 事件修饰符

vue事件修饰符：

prevent:阻止默认事件触发

<a href = "https:...." @clikc.prevent = "clickFun" > //点击之后会触发事件函数，但是原本的a标签的连接跳转会被阻止

stop：阻止冒泡事件发生：嵌套的标签中，都含有某个事件，里面的触发了，会导致外层的标签事件也触发，使用stop可以阻止外层事件触发

<div @click = "clickFun1">
    <button @click.stop = "clickFun2">点击</button>//阻止上方的clickFun1事件被触发
</div>

once:让事件只能触发一次

<button @click.once = "clickFun">点击</button>//该点击按钮只有第一次点击的时候会触发clickFun

self:只有点击当前元素时才能触发事件（即元素冒泡导致的触发被阻止掉了）

<div @click.self = "clickFun1">//下方的button点击时，元素会冒泡到div，但事件clickFun1不会触发
    <button @click = "clickFun2">点击</button>
</div>

passive:事件的默认行为立即被触发，不用等到事件回调执行完毕之后再触发（类似实现了事件回调行为和默认行为的异步进行）

capture:使用事件捕获模式，正常情况：要拿到内部嵌套的元素，程序先从外向内捕获元素，在进行从内向外的冒泡，并在冒泡阶段触发元素事件。如果使用了capture捕获模式，那么该事件会在元素捕获阶段触发

//先触发clickFun2，再触发clickFun1
<div @click = "clickFun1">
    <button @click = "clickFun2">点击</button>
</div>

//使用了capture ，先触发clickFun1，再触发clickFun2
<div @click.capture = "clickFun1">
    <button @click = "clickFun2">点击</button>
</div>