vue.js学习之修饰符

来源：互联网发布：htc手机windows 编辑：程序博客网时间：2024/06/06 04:31

首先，关于修饰符的解释，贴一下官网（https://vuefe.cn/v2/guide/syntax.html#修饰符）的解释：

修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

今天老师在群里发了一段关于vue.js 修饰符的代码，先看看代码吧。

<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>

<script>    var vm = new Vue({        el: '#app',        data: {          message: ''        },        methods: {          clickme: function (event) {            if (this.message === '') {                this.message = event.currentTarget.id            } else {                this.message = this.message + '->' + event.currentTarget.id            }          }        }    })</script>

一段很简单的代码，询问事件响应的顺序，因为以前看视频学过一点，了解了一点点修饰符，但是对于这段代码我也只知道了.prevent 和.stop两个，于是瞎蒙给了答案（有点尴尬......）。后来老师给了一个很安慰人的答案：很接近了。

有点尴尬的我立马开电脑，码了这段代码，并执行，得到执行结果：

用鼠标双击我，看看事件的传递真正顺序。

点击事件的响应顺序如下：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

后面的不管多少次点击，到时出现span->section的结果

感觉又学到了好多，哈哈哈，记录一下，如果有错记得帮我揪出来，一起学习。

0 0