Vue之v-on的使用

最新推荐文章于 2022-09-05 20:52:40 发布

U_yong

最新推荐文章于 2022-09-05 20:52:40 发布

阅读量295

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_44756582/article/details/106560982

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

v-on的使用

个人博客

https://www.boycharse.top

Vue系列

上一篇：03-Vue的动态绑定属性
下一篇：05-Vue的条件判断和循环遍历

v-on的使用

在第一篇，Vue的初体验中，我们已经使用过v-on来为元素添加点击事件了，下面我们将较为详细的来了解它。

基础使用

下面我们演示给一个button绑定点击事件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <button v-on:click="btnTest">test</button>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {},
      methods: {
        btnTest: function () {
          console.log("test");
        },
      },
    });
  </script>
</html>

我们可以看到用法非常简单，在methods中定义一个方法，然后用v-on调用即可。

v-on的语法糖

语法糖就是一种较为简便的写法，我们可以使用@来代替v-on，原代码可修改为：

<button @click="btnTest">test</button>

v-on传参

我们在声明方法的时候，也可以要求调用者传一个参数进来，如下：

methods: {
        btnTest: function (num) {
          console.log(num);
        },
      },

我们的btnTest要求调用者传一个参数进来，因此在用v-on指令调用该方法时，我们可以传一个参数给它。

<button @click="btnTest(10)">test</button>

完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <button @click="btnTest(10)">test</button>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {},
      methods: {
        btnTest: function (num) {
          console.log(num);
        },
      },
    });
  </script>
</html>

测试结果：
在这里插入图片描述
点击test按钮以后，控制台打印输出10。

现在又有个问题了，如果我的方法需要一个参数，而我调用时不传这个参数给它呢？会有下面这两种情况:
第一种情况，调用btnTest时，不加括号，如下：
在这里插入图片描述
这时候传入的参数是一个点击事件的对象，浏览器打印结果如下：

如果加上括号：

则不会传入参数，event是undefined,浏览器打印结果如下：

v-on传多个参数同时传入event的方法

如果我们的方法要传入多个方法，同时我们也想传入event时间，如：

btnTest: function (num,event) {
          console.log(event);
        }

这时候我们可以通过$event来讲事件传入：

<button @click="btnTest(10,$event)">test</button>

完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <button @click="btnTest(10,$event)">test</button>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {},
      methods: {
        btnTest: function (num,event) {
          console.log(event);
        },
      },
    });
  </script>
</html>

总结

事件肯定不只点击事件一种，当然点击事件几乎也是最常用的，其他事件这里不一一累述，用法基本上是相同的，用到的时候再去翻阅官方文档即可。

U_yong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue之v-on的使用

v-on的使用个人博客https://www.boycharse.topVue系列上一篇：03-Vue的动态绑定属性下一篇：暂未更新v-on的使用在第一篇，Vue的初体验中，我们已经使用过v-on来为元素添加点击事件了，下面我们将较为详细的来了解它。基础使用下面我们演示给一个button绑定点击事件：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" />
复制链接

扫一扫