vue修饰符

.stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件
.prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交
.self 是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号
.capture 是改变js默认的事件机制,默认是冒泡,添加监听器，捕获由外到内
.once 是将事件设置为只执行一次,如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件本身的行为会执行
.passive 滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 onScroll 完成。这个 .passive 修饰符尤其能够提升移动端的性能。

        <!-- 使用  .stop  阻止冒泡 -->
        <!-- <div class="inner" @click="div1Handler">
            <input type="button" value="点击" @click="btnHandler" />
        </div> -->

        <!-- 使用  .provent 阻止默认行为 -->
        <!-- <a href="http://baidu.com" @click.prevent="linkClick">百度一下</a> -->

        <!--使用  .capture  实现捕获触发机制  -->
        <!--     <div class="inner" @click.capture="div1Handler">
            <input type="button" value="点击" @click="btnHandler" />
        </div> -->

        <!-- 使用  .self  實現只有点击只有点击当前元素时候，才会触发事件处理函数 -->
        <!--         <div class="inner" @click.self="div1Handler">
            <input type="button" value="点击" @click="btnHandler" />
        </div> -->

        <!-- 使用  .once  只触发一次事件处理函数 -->
        <!-- 即按照下面的例子，第一次低级不跳转，第二次才跳转 -->
        <!-- <a href="http://baidu.com" @click.prevent.once="linkClick">百度一下</a> -->

        <!-- 演示： .stop  和  .self  的区别 -->
        <!-- <div class="outer"  @click="div2Handler">
            <div class="inner" @click="div1Handler">
                <input type="button" value="点击" @click="btnHandler" />
            </div>
        </div>
         -->
        <!-- .self只会阻止自己身上的冒泡，并不会真正阻止冒泡-->    
        <div class="outer" @click="div2Handler">
            <div class="inner" @click.self="div1Handler">
                <input type="button" value="点击" @click="btnHandler" />
            </div>
        </div>
        <!-- 触发了bt按钮的点击事件
            触发了outer div的点击事件-->

stop propagation 被停止后（ 也就是调用了 event.stopPropagation()方法后 )，被触发
prevent 调用了 event.preventDefault() 后被触发。
capture 子元素中的事件可以在该元素中 被触发。
self 事件的 event.target 就是本元素时，被触发。
once 该事件最多被触发一次。
passive 为移动设备使用。 (在addEventListeners 定义时，增加passive选项。)