vue.js学习之修饰符

首先,关于修饰符的解释,贴一下官网(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的结果

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

欢迎分享本文,转载请保留出处:前端ABC » vue.js学习之修饰符

赞 (2)
分享到:更多 ()

发表评论 0