Vuejs 事件监听

最新推荐文章于 2024-06-23 12:48:42 发布

苦涩2020

最新推荐文章于 2024-06-23 12:48:42 发布

阅读量445

点赞数

CC 4.0 BY-SA版权

分类专栏： Vuejs 前端文章标签： vue 前端

本文链接：https://blog.youkuaiyun.com/UserPython/article/details/108307262

前端同时被 2 个专栏收录

80 篇文章

订阅专栏

Vuejs

8 篇文章

订阅专栏

本文介绍了Vue.js中v-on指令的基础用法，包括如何监听用户交互事件如点击、拖拽等，并详细讲解了v-on的参数传递，特别是如何处理方法中的参数与原生事件event的关系，以及v-on修饰符的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前端开发中，我们需要经常和用户交互，这个时候，我们就必须监听用户发生的事件，比如点击、拖拽、键盘事件等等

v-on 基础

<div id='app'>
  <h2>{{counter}}</h2>
  <button v-on:click="add">+</button>
  <!-- v-on语法糖写法 @ -->
  <button @click="sub">-</button>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      counter: 0,
    },
    methods:{
      add(){
        this.counter++;
      },
      sub(){
        this.counter--;
      }
    }
  })
</script>
</script>

v-on 参数

当通过methods中定义方法，以供@click调用时，需要注意参数问题
情况一：如果该方法不需要额外参数，那么方法后的（）可以不添加；但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去
情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件

<div id='app'>
  <!-- 事件调用的方法没有参数 -->
  <button @click="btnClick1()">按钮1</button>
  <button @click="btnClick1">按钮11</button>

  <!-- 在事件定义时，写函数时省略了小括号，但是方法本身是需要一个参数的 
        这个时候，vue会默认将浏览器生成的event事件对象作为参数传入到方法-->
  <button @click="btnClick2(123)">按钮2</button>
  <button @click="btnClick2()">按钮22</button>
  <button @click="btnClick2">按钮222</button>

  <!-- 在方法定义时，需要event对象，同时又需要其他参数 -->
  <!-- 再调用方法时，如何手动的获取到浏览器参数的event对象：$event -->
  <button @click="btnClick3(123, $event)">按钮3</button>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      counter: 0,
    },
    methods:{
      btnClick1(){
        console.log("btnClick1");
      },
      btnClick2(event){
        console.log("------------", event);
      },
      btnClick3(abc, event){
        console.log(abc , "-----" , event);
      }
    }
  })
</script>

v-on 修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs</title>
    <script src="js/vue.js"></script>
    <style>
      div{
        widows: 100px;
        height: 100px;
        background: red;
      }
    </style>
</head>
<body>
<div id='app'>
  <!-- 1、.stop修饰符：阻止事件冒泡 -->
  <div @click="divClick">
    <button @click.stop="btnClick">按钮</button>
  </div>

  <br>

  <!-- 2、 .prevent修饰符：阻止事件默认事件 -->
  <form action="breezy">
    <!-- 阻止了submit自动提交 -->
    <input type="submit" value="提交" @click.prevent="submitClick">
  </form>

  <br>

  <!-- 3、 .{keyCode |键别名}：监听某个键盘的键帽，当该键触发时，才执行函数-->
  <input type="text" @keyup.enter="keyUp">

  <br>

  <!-- 4、.once修饰符：只触发一次回调 -->
  <button @click.once="btn2Click">只能点击一次</button>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      counter: 0,
    },
    methods:{
      btnClick(){
        console.log("btnClick");
      },
      divClick(){
        console.log("divClick");
      },
      submitClick(){
        console.log("submitClick");
        console.log("submitClick");
        console.log("submitClick");
        console.log("submitClick");
        console.log("submitClick");
      },
      keyUp(){
        console.log("keyUp");
      },
      btn2Click(){
        console.log("once....");
      }

    }
  })
</script>

</body>
</html>