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 的结果。
就爱阅读 www.92to.com 网友整理上传, 为您提供最全的知识大全, 期待您的分享,转载请注明出处。
来源: http://www.92to.com/bangong/2017/03-23/19324695.html