扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要介绍“vue指令中的修饰符怎么使用”,在日常操作中,相信很多人在vue指令中的修饰符怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue指令中的修饰符怎么使用”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
创新互联建站是一家专业从事成都网站制作、网站设计、外贸网站建设、网页设计的品牌网络公司。如今是成都地区具影响力的网站设计公司,作为专业的成都网站建设公司,创新互联建站依托强大的技术实力、以及多年的网站运营经验,为您提供专业的成都网站建设、营销型网站建设及网站设计开发服务!
在说vue中的修饰符之前,我门用的是dom操作中用过的event对象的常用方法/属性,event的属性有哪些呢? 我用过的event的属性如下:
1、阻止默认事件跳转(例如a标签的href的跳转、还有form表单的提交)
event.preventDefault()
2、阻止冒泡事件(例如父级元素绑定事件,子元素也绑定事件,如果不取消冒泡,则点击子
元素也会触发父元素的事件
event.stopPropagation()
3、阻止后续事件触发,写在A中,则后续注册的事件B不会被触发(例如按钮绑定两个事件,
通过 [优先级]的方式注册了A和B,在运行A的时候不运行B)
event.stopImmediatePropagation()
4、绑定事件的那个元素,例如ul绑定事件,然后点击li,则currentTarget返回就是ul
event.currentTarget
5、发生事件的那个元素,例如ul绑定事件,然后点击li,则target返回就是点击的那个li。
event.target
以上这些都是在dom树中操作的一些属性/方法,但使用vue框架就不需要这些dom的操作了,vue中的方法有更好更简洁的语法修饰符来实现各种功能。
在事件处理程序中,总会有一些功能需要修饰,比如阻止某些默认事件跳转还有提交事件不再重载页面等等。为了解决这个问题,vuejs给v-on提供了一些事件修饰符。修饰符是由点开头的指令后缀名来表示
事件修饰符有哪些呢?
.stop
.prevent
.capture
.once
.stop
没加 .stop的打印的结果
加了 .stop的打印的结果
源代码:
得出结论
当你点击子元素时,父元素也会被触发,这就是事件冒泡。
使用 .stop 来阻止事件冒泡 也就是阻止子元素的事件传播到父元素的身上去。
.prevent
没有加 .prevent
属性的效果
加了 .prevent
属性的效果
源代码
得出结论
a标签中的href属性会跳转页面,当你使用a标签做一些功能时,不需要默认跳转时,就可以使用 .prevent 来阻止默认事件跳转。 其实还有表单的提交事件也使用 .prevent 来阻止默认事件跳转
.capture
.capture
它的含义是事件捕获 虽然不常用 但还是要了解的
下面写了一个结构四个div的盒子
没有设置 .capture
它的顺序是从内往外执行事件 这种是冒泡事件
源代码
如图所示
设置了 .capture
它就会从外往里执行 可以给单个设置也可以给多个设置
源代码
如图所示:
得出结论
冒泡是从里往外冒,捕获是从外往里捕.capture
它是事件捕获 当它存在时,会先从外到里的捕获,剩下的从里到外的冒泡。
.once
.once
含义是点击事件将只会触发一次
没有设置 .once
就是普通的函数正常执行
设置了 .once
就只能执行一次
得出结论
.once
就只能执行一次,再次点击就不会执行了
到此,关于“vue指令中的修饰符怎么使用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流