vue中的事件修饰符有哪些，以及如何使用

为了更纯粹的数据逻辑，vue提供了很多事件修饰符，来代替处理一些 DOM 事件细节。

事件修饰符：

.stop：防止事件冒泡，等同于JavaScript中的event.stopPropagation()
.prevent：防止执行预设的行为，等同于JavaScript中的event.preventDefault()
.capture：捕获冒泡
.self：将事件绑定到自身，只有自身才能触发
.once：只触发一次
.passive：不阻止事件的默认行为

1、.stop

防止事件冒泡，通俗来说就是阻止事件向父元素传递，阻止任何父事件处理程序被执行，等同于JavaScript中的event.stopPropagation()。

template

<div id="app">
    <div @click="outer">
    　　<div  @click="middle">
    　　　　　　<button @click="inner">点击</button>
    　　</div>
    </div>
</div>

methods

methods: {
            inner: function () {
                console.log ('inner')
            },
            middle: function () {
                console.log ('middle')
            },
            outer: function () {
                console.log ('outer')
            }
        }

结果：

inner  
middle  
outer

在button标签外包了两层div，每层都绑定了监听器，监听click事件，这时候我们点击最内层的按钮，外面两层对应的点击事件也会被触发。

解决：
内层按钮的事件绑定加上stop修饰符，就不会向上冒泡了

   <button @click.stop="inner">点击</button>

2、.prevent

某些标签拥有自身的默认事件，比如<a>标签点击后会进行页面的跳转。这类默认事件虽然是冒泡后开始的，但不会因为stop而停止执行。阻止执行这类预设的行为，.prevent就派上用场了。

解决：

 <a href="http://www.baidu.com" @click.prevent>点击跳转</a>

3、.capture

捕获冒泡，即冒泡发生时，有.capture修饰符的dom元素会优先执行。

(1)、将中间层的点击事件加上.capture修饰符，结果：

    <div @click="outer">
    　　<div @click.capture="middle">
    　　　　　　<button @click="inner">点击</button>
    　　</div>
     </div>

这时候打印顺序发生改变了，中间层的信息被优先打印出来，然后再按正常顺序执行触发的事件。
结果：

middle
inner   
outer

(2)、将外层的点击事件加上.capture修饰符，结果：

    <div @click.capture="outer">
    　　<div @click.capture="middle">
    　　　　　　<button @click="inner">点击</button>
    　　</div>
     </div>

这时候打印顺序发生改变了，中间层的信息被优先打印出来，然后再按正常顺序执行触发的事件。
结果：

outer
middle
inner   

带修饰符的从外到内依次执行，然后再按正常顺序执行触发的事件。

4、.self

将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响。

<!-- HTML -->
<div id="demo">
    <div @click="outer">
    　　<div  @click.self="middle">
    　　　　　　<button @click="inner">点击</button>
    　　</div>
    </div>
</div>

给中间的div加上self修饰符，然后点击里层的按钮，发现中间层的事件没有被触发，直接跳过了：

结果：

inner
outer

而直接点中间层div对应的区域，才能触发其事件：

middle
outer

5、.once

这个比较好理解，加上once修饰符以后事件只触发一次，但是不影响事件的冒泡，上层的事件仍然会被触发，并且页面刷新后这个次数会重置。

 <div @click="outer">
    　　<div @click="middle">
    　　　　　　<button @click.once="inner">点击</button>
    　　</div>
    </div>

连续点击按钮的效果：

inner
middle
outer

middle
outer

middle
outer

6、.passive

.passive是2.3.0 新增的修饰符，是用来告诉浏览器你不想阻止事件的默认行为。

为什么需要告诉浏览器不阻止事件的默认行为？
使用.passive就可以提前告诉浏览器，我们没有用preventDefault阻止默认动作，你也不用反复去判断了，从而提高性能解决卡顿。