vue修饰符

Posted 2020-09-19 fiona118

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue修饰符相关的知识，希望对你有一定的参考价值。

<body>
    <div id="app" @click.prevent=""clickme>
        <section id="section" @click.stop="clickme">
            <div id="div" @click.self="clickme">
                <span id="span" @click.capture="clickme">
                    <p id="p" @click.once="clickme">
                        用鼠标双击我，看看事件的传递真正顺序。
                    </p>
                </span>
            </div>
        </section>
        点击事件的响应顺序如下：{{message}}
    </div>
</body>

鼠标双击之后执行顺序：span->p->section->span->section

上面各个修饰符的作用：

　　　　.prevent: 提交事件不再重载页面

　　　　.stop: 阻止单击事件冒泡

　　　　.self: 当事件发生在该元素本身而不是子元素的时候会触发

　　　　.capture: 事件侦听，事件发生的时候会调用

　　　　.once: 跟v-once作用类似，只渲染一次，第二次不会执行

解析：

第一次点击：span有事件监听，所以最先执行的是它，然后是事件发生的元素本身<p>，接着span执行了跳过，然后到了内层的div，由于是.self，而事件不是在div本身，所以不执行，最后到section，由于有.stop冒泡阻止，所以执行到这里就停止了。最外层的div不会执行。

span->p->section

第二次点击，同样是先到span，由于<p>是.once，只被渲染一次，所以第二次不会执行，跳过了span，跳过了div，到了section......

span->section