vue指令中的修饰符怎么使用

这篇文章主要介绍“vue指令中的修饰符怎么使用”,在日常操作中,相信很多人在vue指令中的修饰符怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue指令中的修饰符怎么使用”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

创新互联建站是一家专业从事成都网站制作、网站设计、外贸网站建设、网页设计的品牌网络公司。如今是成都地区具影响力的网站设计公司,作为专业的成都网站建设公司,创新互联建站依托强大的技术实力、以及多年的网站运营经验,为您提供专业的成都网站建设、营销型网站建设及网站设计开发服务!

对比一下vue中的指令修饰符和dom事件中的event对象

在说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的打印的结果

vue指令中的修饰符怎么使用

加了 .stop的打印的结果

vue指令中的修饰符怎么使用

源代码:

  
  
    
    阻止事件冒泡
  

得出结论

当你点击子元素时,父元素也会被触发,这就是事件冒泡。
使用 .stop 来阻止事件冒泡 也就是阻止子元素的事件传播到父元素的身上去。

.prevent

没有加 .prevent属性的效果

vue指令中的修饰符怎么使用

加了 .prevent属性的效果

vue指令中的修饰符怎么使用

源代码


  
         阻止跳转到淘宝   

得出结论

a标签中的href属性会跳转页面,当你使用a标签做一些功能时,不需要默认跳转时,就可以使用 .prevent 来阻止默认事件跳转。 其实还有表单的提交事件也使用 .prevent 来阻止默认事件跳转

.capture

.capture 它的含义是事件捕获 虽然不常用 但还是要了解的

下面写了一个结构四个div的盒子


  
    
      
        
      
    
  

没有设置 .capture  它的顺序是从内往外执行事件 这种是冒泡事件

源代码


  
    
      
        
      
    
  


如图所示

vue指令中的修饰符怎么使用

设置了 .capture  它就会从外往里执行  可以给单个设置也可以给多个设置

源代码


  
    
      
        
      
    
  


如图所示:

vue指令中的修饰符怎么使用

得出结论

冒泡是从里往外冒,捕获是从外往里捕.capture 它是事件捕获  当它存在时,会先从外到里的捕获,剩下的从里到外的冒泡。

.once

.once 含义是点击事件将只会触发一次 没有设置  .once  就是普通的函数正常执行


  函数只会执行一次

vue指令中的修饰符怎么使用

设置了 .once  就只能执行一次


  函数只会执行一次

vue指令中的修饰符怎么使用

得出结论

.once  就只能执行一次,再次点击就不会执行了

到此,关于“vue指令中的修饰符怎么使用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


当前文章:vue指令中的修饰符怎么使用
文章地址:http://pwwzsj.com/article/ghddod.html

其他资讯