vue常用时间修饰符记录

1、stop：阻止冒泡

　　如下：正常情况下，我们点击最内层的inner_inner的时候，事件会向上冒泡，inner 和outer也会执行。我们在inner_inner事件加上.stop修饰符，就会阻止事件向上冒泡，功能等价于原来的event.stopPropagation()

<div @click="outer">Out
    <div @click="inner">Inner
        <div @click.stop="inner_inner">
            inner inner
        </div>
    </div>
</div>

2、prevent：阻止默认事件

　 如下，我们有一个a标签，href指向baidu网址，当我们点击a标签时，执行clickA后，会继续执行默认的跳转事件。我们添加了.prevent修饰符后，就会阻止它的默认事件。功能等价于event.preventDefault()

<a href="http://www.baidu.com" @click.prevent="clickA">baidu</a>

3、self：只有自身执行

　　self的作用时，只有点击自身的时候，才会执行，其他的触发（如冒泡啥的）都不会执行

　　如下：只有点击Inner div自身的时候，才会执行inner()，点击inner_inner的时候，会冒泡，但是不会被捕获执行

<div @click="outer">Out
    <div @click.self="inner">Inner
        <div @click="inner_inner">
            inner inner
        </div>
    </div>
</div>

4、capture：捕获冒泡

　 当有冒泡事件时，会最先捕获并执行，所以点击inner_inner时，下面的执行顺序是outer--->inner_inner---->inner

<div @click.capture="outer">Out
    <div @click="inner">Inner
        <div @click="inner_inner">
            inner inner
        </div>
    </div>
</div>

5、once：只执行一次

　　这里点击Add num加1，给click事件添加了once修饰符后，事件只会执行一次，再次点击不再执行addOne方法。

<button @click.once="addOne">Add{{num}}</button>

6、native：

　　当想要给组件的根元素绑定事件的时候，可以使用native修饰符

　　如下，在父组件中调用my-button子组件，定义了click事件，我们都知道在my-button组件中，如果触发父组件定义的事件，是可以执行的，但是我们不想在子组件中触发，希望在父组件中监听这个点击事件，可以给click事件添加.native修饰符

<my-button @click.native='myBtn'></my-button>

Vue.component("my-button",{
    template:"<button>My Button</button>"
});