Vue教程0204-Vue事件处理

watchping

已于 2023-02-12 09:59:41 修改

阅读量94

点赞数

分类专栏：前端Vue教程 # Vue基础文章标签： vue.js javascript 前端

于 2023-02-11 15:55:19 首次发布

本文链接：https://blog.csdn.net/watchping/article/details/128984629

版权

前端Vue教程同时被 2 个专栏收录

10 篇文章 3 订阅

订阅专栏

Vue基础

8 篇文章 0 订阅

订阅专栏

Vue事件处理

1.监听事件
2.事件处理方法
3.通过$event关键字传参

1.监听事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。示例：

<div id="app1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

var example1 = new Vue({
  el: '#app1',
  data: {
    counter: 0
  }
})

在Vue的第一个步进器案例中，已经用到了事件处理。监听事件也叫绑定事件，一般都用简写语法的。

v-on:click 简写为 @click

如果事件处理函数不需要传参，()可省略。

2.事件处理方法

许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

步进器实现案例中，我们已经使用了不带参数的事件处理方法，如果事件处理方法不需要传参，则后面的()可省略。将步进器案例中的事件处理方法修改为带参数的，也时可以的，参考代码如下：

<body>
    <div id="app">
        <button @click="change(-1)">-</button>
        <span>{{n}}</span>
        <button @click="change(+1)">+</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                n: 0
            },
            methods: {
                //本例中，因为页面上只需要一个change函数，所以methods中只添加一个change函数
                //但是页面上调用change()函数时，传入了一个参数值,所以定义change函数时需要
                //定义一个形参来接住实参值
                change(i) {
                    //如果i==+1,说明本次想+1
                    if (i === 1) {
                        this.n++;
                    } else {
                        //否则如果i!=+1，说明本次想-1
                        //只有n>0时，才能-1
                        if (this.n > 0) {
                            this.n--;
                        }
                    }
                },
            },
        });
    </script>
</body>

3.通过$event关键字传参

DOM中事件对象总是作为事件处理函数的第一个参数值默认传入的。如果事件处理函数不需要传入实参值时，则事件对象event也是作为事件处理函数第一个参数值自动传入，在函数定义时，用一个形参e，就可接住实参。

Vue中对事件对象的传参同DOM是一样的，也是作为事件处理函数第一个参数值自动传入的。

如果既想传入自定义实参值，又想获得事件对象，则可以这样处理：

借助 $ event 关键字: vue框架内部内置的专门指向事件对象的关键词。用$event等效于用事件对象e。
调用函数时，可将$event和其他实参值一起传入函数中。
定义函数时，可用普通的形参变量接住$event的值。

案例-鼠标点击页面上的不同区域，控制台显示点击的区域及位置信息，实现代码参考如下：

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
  <title>Document</title>
  <style>
    div {
      width: 300px;
      height: 100px;
      margin: 20px;
    }
    #d1 {
      background-color: #aaf;
    }
    #d2 {
      background-color: #ffa;
    }
  </style>
  <script src="../js/vue.js"></script>
</head>
<body> 
  <!-- 鼠标点击页面上的不同区域，控制台显示点击的区域及位置信息 -->
  <div id="app">
    <div id="d1" @click="showPosition('d1',$event)">d1</div>
    <div id="d2" @click="showPosition('d2',$event)">d2</div>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {},
      methods: {
        showPosition(name, e) {
          //同DOM的e
          console.log(`点在${name}的: x:${e.offsetX},y:${e.offsetY}`);
        },
      },
    });
  </script>
</body>