Vue2笔记(二)——Vue事件修饰符

.stop

阻止冒泡行为。（ps:冒泡行为：对dom进行操作是会按照dom从上到下的顺序执行，例如，点击一个div上的button也会执行div上绑定的函数。）

<div id="app">
    <div class="inner" @click="div1Handler">
            <input type="button" value="按钮" @click.stop="btnHandler">
        </div> 
</div>

var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                 div1Handler() {
                    console.log("触发了inner的div");
                },
                btnHandler() {
                    console.log("触发了button");
                },
            }
        })

不使用.stop:

使用.stop：

.prevent

取消默认行为。

<div id="app">
    <a href="http://www.baidu.com" @click.prevent="linkClick">This is a link！</a>
</div>

 var vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
                linkClick() {
                    console.log("触发了链接的click事件")
                },
            }
        })

点击链接，执行linkClcik（）函数，但是页面没有跳转，默认行为被阻止。

.capture

将冒泡行为的层级 调到上层。

<div class="inner" @click.capture="div1Handler">
                <input type="button" value="按钮" @click="btnHandler">
            </div>

var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                div1Handler() {
                    console.log("触发了inner的div");
                },

                btnHandler() {
                    console.log("触发了button");
                },
            }
        })

点击button，div的冒泡行为提前，div绑定的函数先执行。

.self

只有点击当前DOM才会触发绑定事件函数，与.stop取消冒泡事件不同，.self只是取消了当前DOM的冒泡行为。

<div class="outer" @click="div2Handler">
	<div class="inner" @click.self="div1Handler">
		<input type="button" value="按钮" @click="btnHandler">
	</div>
</div>

 var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                div1Handler() {
                    console.log("触发了inner的div");
                },
                btnHandler() {
                    console.log("触发了button");
                },
                 div2Handler(){
                    console.log("触发了outer的div的点击函数")
                }
            }
        })

只有点击inner的div才会触发绑定的函数。

.once

串联修饰行为的次数。

例如：仅阻止一次默认事件，第二次点击链接会跳转页面。

<a href="http://www.baidu.com" @click.prevent.onece="linkClick">This is a link！</a>

.native

表示执行原生的事件
例如：在父组件中使用子组件，给子组件添加了@click="alert(123)",此时vue会将click识别为自定义事件，添加.native就可执行原生点击事件

//App.vue
<template>
	<div>
		<Student @click.native="alert()"/>
	</div>
</template>

//Student.vue
<template>
	<div>
    <h1>你好</h1>
    <p>这是子组件<p>
	</div>
</template>