• Vue事件处理器:事件绑定基础、事件修饰符:stop、prevent、capture、self、once;


    先看代码: 

    1. <div id="box">
    2. {{count}}
    3. <button @click="handleAdd1()">add1button>
    4. <button @click="handleAdd2">add2button>
    5. div>
    6. <script>
    7. new Vue({
    8. el: "#box",
    9. data: {
    10. count: 0,
    11. },
    12. methods: {
    13. handleAdd1(){
    14. this.count++
    15. },
    16. handleAdd2(evt) {
    17. this.count++
    18. console.log(evt)
    19. },
    20. }
    21. })
    22. script>

    结果:点击add1,count数量会增加;点击add2,count数量会增加,然后打印出evt的值见下图:

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

    console.log(evt.target)

    结果:

    事件绑定用法:

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

    结果:

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

    获取input输入框的值:

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

    代码:

    1. <div id="box">
    2. <input type="text" @input="handleInput">
    3. div>
    4. <script>
    5. new Vue({
    6. el: "#box",
    7. data: {
    8. count: 0,
    9. },
    10. methods: {
    11. handleInput(evt){
    12. console.log(evt.target.value)
    13. }
    14. }
    15. })
    16. script>
    17. body>

    结果:

    事件修饰符:

    • stop、prevent、capture、self、once;

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

      • "handleUIClick">
    1. <li @click.shop="handleLiClick">111li>
    2. <li @click="handleLiClick">111li>
    3. <li>333li>

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

    • self="handleUIClick">
  1. <li @click.shop="handleLiClick">111li>
  2. <li @click="handleLiClick">111li>
  3. <li>333li>

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

  • once="handleLiClick">111
  • prevent的用法:阻止默认行为

    "http://www.baidu.com" @click.prevent>跳转

     

     

  • 相关阅读:
    [附源码]Python计算机毕业设计SSM酒店停车管理系统(程序+LW)
    如何解决香港服务器使用的常见问题
    (十二)Jmeter测试dubbo接口
    抖音招聘直播报白是通过直播方式展现职位信息适用于企业和人力资源公司
    L2-030 冰岛人(Python3)
    Linux 下安装python
    【AOP系列】8.API统一处理
    欧拉系统(euleros):升级Mysql
    cs与msf权限传递,以及mimikatz抓取win2012明文密码
    细说JavaScript闭包
  • 原文地址:https://blog.csdn.net/a1598452168YY/article/details/127964984