Vue事件处理器：事件绑定基础、事件修饰符：stop、prevent、capture、self、once；
创始人
2024-02-06 09:20:53
0次

先看代码： 

{{count}}

结果：点击add1，count数量会增加；点击add2，count数量会增加，然后打印出evt的值见下图：

打印evt.target结果是这个button事件对象：

console.log(evt.target)

结果：

事件绑定用法：

  • 事件绑定函数，可以加括号，也可以不加括号；
  • 加括号，是为了传参，不传参也没事，例如代码中的handleAdd1（）；
  • 不加括号的时候，就不能自己传实参了，但是这时候会得到一个形参，这个形参就是“事件对象evt” ，打印evt.target得到的就是节点对象，例如代码中的handleAdd2；
  • 也可以既得到evt事件对象，又能传参，这时候我们需要传实参是见下面代码：
handleAdd1(evt,a,b,c){console.log(evt,a,b,c)},

结果：

  • 这种形式就是既可以传自己的实参，又能够得到事件对象。

获取input输入框的值：

  • 利用上面那个思路，我们可以在不使用v-model的方法情况下，获取输入框的值：
  • 先拿到这个input节点对象；
  • 然后再通过value获取输入框的内容；

代码：

结果：

事件修饰符：

  • stop、prevent、capture、self、once；

stop的用法：加在子标签身上，可以阻止事件冒泡

  • 111
  • 111
  • 333
    •
  • shop加在了第一个li标签身上，当点击第一个li标签只能触发它自己的事件，不会产生冒泡触发ul的事件；
  • 但是你点第二个li标签，还是会触发ul事件；

self的用法：加在自己身上，可以阻止子标签事件冒泡，就是只有当点击自己的时候才会触发事件

  • 111
  • 111
  • 333
    •

once的用法：触发一次事件，下次就不会再触发了，禁用了

  • 111

    • prevent的用法：阻止默认行为

    跳转
    • 本来点击这个链接就会跳转到相应的页面，当加了prevent以后，就不会跳转了，被阻止了

     

     

    上一篇： 七月十五中国各地过中元节的民间习俗

    下一篇：Hibernate基本使用

    相关内容

    热门资讯

    交通事故和解协议书模板 交通事故和解协议书模板　　合同与协议的区别　　双方的意思都表示一致而达成的一种契约。简单地说，就是你...
    法人证明书样本 法人证明书样本（精选12篇）　　在日复一日的学习、工作或生活中，要用到证明的地方还是很多的，证明是由...
    调解和解协议书 关于调解和解协议书模板（精选8篇）　　随着社会不断地进步，协议书与我们的生活息息相关，签订了协议书就...
    管理建议书 管理建议书范文（精选15篇）　　在现实社会中，越来越多人会去使用建议书，建议书是面对有关部门或上级领...
    服装订货会邀请函 服装订货会邀请函10篇　　如今更多的企业趋向于使用电子邀请函。在现实社会中，我们偶尔会使用上邀请函，...
    浪漫温馨的爱情短信 浪漫温馨的爱情短信　　在平日的学习、工作和生活里，大家一定都接触过短信吧，短信可以由移动通信终端(手...
    《钢铁是怎样炼成的》读书笔记 《钢铁是怎样炼成的》读书笔记（精选13篇）　　钢铁是怎样炼成的描写的是主人公保尔怎样从一个沙皇统治时...
    西餐的基本礼仪技巧介绍 关于西餐的基本礼仪技巧介绍　　西餐象征着高贵优雅，小编一直很羡慕那些优雅的西餐礼仪。西餐与中餐有着很...
    为白血病捐款救助倡议书 为白血病捐款救助倡议书亲爱的同学们：　　20岁左右的年纪，正值青春年华，然而，无情的病魔却降临在一个...
    深圳如何办理计划生育证明 深圳如何办理计划生育证明　　已婚有一孩或已怀孕的办深圳户口，必须开计划生育证明，具体流程如下：　　1...
    工程私人合作的协议书 工程私人合作的协议书（通用16篇）　　在不断进步的社会中，协议书起到的作用越来越大，协议书具有法律效...
    关爱抗战老兵活动倡议书 关爱抗战老兵活动倡议书社会各界爱心人士：　　当我们生活在和平富足的年代，享受幸福安定生活的同时。您可...
    特别授权委托书 特别授权委托书模板（通用6篇）　　只要在委托人的委托书上的合法权益内，被委托人行使的全部职责和责任都...
    商务接待礼仪流程及标准 商务接待礼仪流程及标准　　随着商务活动的频繁和先进管理思想的发展，高效的商务接待礼仪流程正在成为现代...
    外来施工单位安全协议书 外来施工单位安全协议书范文　　在现在社会，协议书的使用频率呈上升趋势，协议书能够成为双方当事人的合法...
    犯错的检讨书1000字 犯错的检讨书1000字　　一、什么是检讨书　　检讨书也称认识书，是一种常用的日常应用文，是犯了错误的...
    个人纳税证明怎么开 个人纳税证明怎么开个人纳税证明怎么开单位发工资时扣税了，怎样开纳税证明呢？回答：如果是单位代扣代缴个...
    学生犯错万能检讨书 学生犯错万能检讨书1500字亲爱的老师：　　今天，我怀着愧疚和懊悔给您写下这份检讨书，以向您表示我对...
    简短的情人节祝福短信 2022年简短的情人节祝福短信50句　　七夕到，美女帅哥佳人俏，成双成对过鹊桥，你我身在红尘中，也该...
    办理公章介绍信 办理公章介绍信　　在不断进步的时代，很多地方都会使用到介绍信，介绍信是用来介绍联系接洽事宜的一种函件...