六、vue-基础之v-on（必须掌握）

最新推荐文章于 2024-07-19 10:52:30 发布

覆水难收呀

最新推荐文章于 2024-07-19 10:52:30 发布

阅读量1k

点赞数 2

分类专栏：前端Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Sean_0819/article/details/130244078

版权

前端Vue 专栏收录该内容

18 篇文章 4 订阅

订阅专栏

文章介绍了Vue.js中v-on指令用于事件绑定的基本用法，包括基本写法、语法糖、事件方法的位置及绑定多个事件。还讨论了v-on的参数传递，如何在方法中访问event对象，并提到了$event的特殊用法。此外，文章还简要提及了v-on的修饰符，如.stop用于阻止事件冒泡，.prevent阻止默认行为等。

摘要由CSDN通过智能技术生成

一、元素事件的绑定

（1）v-on基本使用

我们先来个demo~

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background: orange;
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 1. 基本写法 -->
      <div class="box" v-on:click="divClick()"></div>

      <!-- 2. 语法糖写法(重点掌握) -->
      <div class="box" @click="divClick()"></div>

      <!-- 3. 绑定的方法的位置，也可以写成一个表达式(不常用) -->
      <!-- 不建议使用，尽量不要在模板里面去改js里面的东西，代码的阅读性很差 -->
      <h2>{{ counter }}</h2>
      <button @click="increment">+1</button>
      <button @click="counter++">+1</button>

      <!-- 4. 绑定其他方法 -->
      <div class="box" @mousemove="divMousemove"></div>

      <!-- 5.1 元素绑定多个事件 -->
      <div class="box" @click="divClick()" @mousemove="divMousemove"></div>
      <!-- 5.2 绑定多个事件另外一种写法(不常见)-->
      <div class="box" v-on="{ click: divClick, mousemove:divMousemove }"></div>
      <div class="box" @="{ click: divClick, mousemove:divMousemove }"></div>
    </div>

    <script src="../lib/vue.js"></script>

    <script>
      const app = Vue.createApp({
        // data: option api
        data: function () {
          return {
            counter: 0,
          }
        },
        methods: {
          // es6增强写法
          divClick() {
            console.log("触发了divClick函数")
          },
          // 常规写法
          divClick2: function () {},
          increment() {
            this.counter++
          },
          divMousemove() {
            console.log("触发divMousemove函数")
          },
        },
      })

      app.mount("#app")
    </script>
  </body>
</html>

（2）v-on的参数传递

① 默认传递event对象

② 传的只有自己的参数（会被默认传递的event对象覆盖掉）

③ 传自己的参数还有event对象

这边我们来一个测试，假如说我们明确传了只有2个，我们看下这个event打印的是什么？

event打印出来是undefined。

那怎么让他能打印出来呢？有人说，在上面把event放进去不就好啦。那我们试一下。

看效果：你这样子是不是相当于把event这个字符串传过来了？所以是行不通的。

还有小伙伴说，那我直接传个event不就行了吗？那你这样子不就相当于把event当个变量传进去了吗，能在data里面找到event这个变量吗，很明显也是行不通的。

那我们到底怎么办才能把event这个当前事件的对象打印出来呢？这里有个特殊的语法。

总结：在模板中想要明确的获取event对象：$event。

下面附源码，大家可以自己去试一下~

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 1. 默认传递event对象 -->
      <button @click="btn1Click">按钮1</button>

      <!-- 2. 只有自己的参数-->
      <button @click="btn2Click('daxia', 18)">按钮2.1</button>
      <button @click="btn2Click('daxia', age)">按钮2.2</button>

      <!-- 3. 自己的参数和event对象 -->
      <!-- 在模板中想要明确的获取event对象：$event -->
      <button @click="btn3Click('daxia', age, $event)">按钮3</button>
    </div>

    <script src="../lib/vue.js"></script>

    <script>
      const app = Vue.createApp({
        // data: option api
        data: function () {
          return {
            age: 19,
          }
        },
        methods: {
          // 1. 默认参数event对象
          // 总结： 如果在绑定事件的时候，没有传递任何的参数，那么event对象会被默认传递进来
          btn1Click(event) {
            console.log("btn1Click", event)
          },

          // 2. 明确参数(只有自己的参数):
          btn2Click(name, age) {
            console.log("btn2Click", name, age)
          },

          // 3. 明确参数+event
          btn3Click(name, age, event) {
            console.log("btn2Click", name, age, event)
          },
        },
      })

      app.mount("#app")

      const btnEl = document.querySelector("button")
      btnEl.onclick = function (event) {}
    </script>
  </body>
</html>

④ 总结

（3）v-on的修饰符（了解）

① .stop 阻止冒泡

我们来举个栗子🌰~

我们写了一个div，里面包了一个button按钮。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background: orange;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="box">
        <button @click="btnClick">按钮</button>
      </div>
    </div>
    <script src="../lib/vue.js"></script>

    <script>
      const app = Vue.createApp({
        // data: option api
        data: function () {
          return {
            message: "Hello Vue",
          }
        },
        methods: {
          btnClick() {
            console.log("btnClick")
          },
        },
      })

      app.mount("#app")
    </script>
  </body>
</html>

目前页面展示成这样子：