新手干货：Vue - 事件修饰符

Vue中事件绑定使用= v-on指令，指令后可跟事件修饰符，Vue提供以下修饰符：
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left- 只当点击鼠标左键时触发。
.right - 只当点击鼠标右键时触发。
.middle - 只当点击鼠标中键时触发。
.passive - 以 { passive: true } 模式添加侦听器

修饰符使用方法，如：

<button @click.stop="doThis"></button>

修饰符还可以串联使用，如：

<button @click.stop.prevent="doThis"></button>

下文将具体描述部分修饰符使用方法

.stop

.stop用来防止冒泡，我们先来看看冒泡的场景

	<div id="app">
            <div @click="onDivClick">
                    <input type="button" value="点击" @click="onButtonClick">
            </div>
    </div>
    
    <script>
        var vm = new Vue({
            el:"#app",
            data: { },
            methods: {
                onDivClick() {
                    console.log('这是触发了 DIV 的点击事件')
                },
                onButtonClick() {
                    console.log('这是触发了 BUTTON按钮 的点击事件')
                }
            }
        })
    </script>

页面操作效果：

从上图中，我们发现点击按钮的时候不仅触发了按钮本身绑定的方法，其父级(DIV)绑定的方法也触发了。
如果不想让实践冒泡，那么我们可以使用修饰符 .stop来解决这个问题，具体如下：

<div id="app">
            <div @click="onDivClick">
                    <input type="button" value="点击" @click.stop="onButtonClick">
            </div>
    </div>

.prevent

<a href="http://www.baidu.com" @click="onAClick">点击我跳转到百度</a>

<script>
       methods: {
                onAClick() {
                    console.log('点击了连接')
                }
            }
    </script>

见上面代码，点击连接之后页面跳转到百度首页。 如果不希望点击跳转到百度，那么久需要组织 a标签点击的默认事件，这时可使用修饰符 .prevent

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

.capture

实现捕获触发事件的机制,即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。
就是谁有该事件修饰符，就先触发谁。

	<div id="app">
            <div @click="onDivClick">
                    <input type="button" value="点击" @click="onButtonClick">
            </div>
    </div>
    
    <script>
        var vm = new Vue({
            el:"#app",
            data: { },
            methods: {
                onDivClick() {
                    console.log('这是触发了 DIV 的点击事件')
                },
                onButtonClick() {
                    console.log('这是触发了 BUTTON按钮 的点击事件')
                }
            }
        })
    </script>

运行效果见上面.stop示例图片。 代码做以下调整：

<div id="app">
            <div @click.capture="onDivClick">
                    <input type="button" value="点击" @click="onButtonClick">
            div>
    div>

由上图，我们发现是先触发DIV绑定的方法，然后再触发按钮绑定的方法。

.stop 和 .self 的区别

.stop会阻止事件冒泡，而.self只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为

参考资料：
https://cn.vuejs.org/v2/api/#v-on