Vue学习总结（八）——事件监听 v-on指令

最新推荐文章于 2023-04-20 23:12:14 发布

田小江爱分享

最新推荐文章于 2023-04-20 23:12:14 发布

阅读量229

点赞数

分类专栏： Vue学习笔记

本文链接：https://blog.csdn.net/third_/article/details/111083785

版权

Vue学习笔记专栏收录该内容

21 篇文章 1 订阅

订阅专栏

一、为什么要使用v-on指令：

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

在Vue中如何监听事件呢？使用v-on指令。

二、v-on指令介绍

作用：绑定事件监听器
缩写：@
预期：Function (方法) | Inline Statement(内部表达式) | Object(对象)
参数： event

v-on的基本使用如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{text}} {{counter}}</h2>
    <!-- 可以直接在click事件中定义简单实现，但是不建议这么做。
    <button v-on:click="counter++">+</button>
    <button v-on:click="counter--">-</button> -->
    <button v-on:click="increment">+</button>
    <button v-on:click="decrement">-</button>
    <!--  通常写法是下面这样的，@ 是v-on的语法糖
    <button @click="increment">+</button>
    <button @click="decrement">-</button>-->
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            text: '当前计数：',
            counter: 0
        },
        methods: {
            increment() {
                this.counter ++;
                console.log('add被执行');
            },
            decrement() {
                this.counter --;
                console.log('sub被执行');
            }
        }
    })
</script>
</body>

三、v-on参数

当通过methods中定义方法，以供@click调用时，需要注意参数问题：
情况一：如果该方法不需要额外参数，那么方法后的()可不添加

但是注意:如果方法本身中有一个参数，那么默认会将原生事件event参数传递进去

情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--事件调用的方法没有参数-->
    <button @click="increment()">按钮1</button>
    <button @click="increment">按钮2</button>
    <!--如果函数需要参数，但是没有传入，没有省略小括号，那么函数的形参为undefined-->
    <button @click="button3()">按钮3</button>
    <!--在事件定义时，写方法时省略了小括号，但是方法本身时需要一个参数的，这个时候，
      浏览器会自动生成一个event,vue会默认将浏览器生成的event事件作为参数传入到方法种-->
    <button @click="button3">按钮4</button>
    <!--方法定义时，我们需要event对象，同时又需要其他参数-->
    <!--在调用方法时，如何手动的获取到浏览器参数的event对象：$event-->
    <button @click="button5(123, $event)">按钮5</button>
    <!--写方法时省略了小括号,第一个值浏览器会传event对象，第二个参数为undefined-->
    <button @click="button5">按钮8</button>
    <!--写方法时不省略小括号,两个参数都为undefined-->
    <button @click="button5()">按钮7</button>
    <!--当只传一个参数的时候，第二个参数会为undefined，因为event作为默认参数只能传到第一个参数中-->
    <button @click="button5(123)">按钮6</button>
</div>
<script src="../../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
          text: '当前计数：',
          counter: 0
        },
        methods: {
          increment() {
            console.log('increment');
          },
          // 如果函数需要参数，但是没有传入，那么函数的形参为undefined
          button3(event) {
            console.log('按钮3', event)
          },
          button5(event, data) {
            console.log('按钮5', event, data)
          }
        }
    })
</script>
</body>

执行结果如下：

四、v-on修饰符

1、在某些情况下，我们拿到的event的目的可能是进行一些事件处理。

2、Vue提供了修饰符来帮助我们方便的处理一些事件：

.stop - 调用 event.stopPropagation()--可以阻止事件冒泡。
.prevent - 调用 event.preventDefault()。--可以阻止它的默认事件。
.{keyCode（键盘对应的编码） | keyAlias（键盘对应的简写）} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <!--1、 .stop修饰符的使用,当不加.stop的时候，我们点击按钮的时候，
    会同时触发div的点击事件，被称为事件冒泡，当我们加了.stop即可以阻止事件冒泡-->
  <div @click="divClick">
    <button @click.stop="button5">按钮6</button>
  </div>
  <!--2、 .prevent 修饰符的使用, 阻止它的默认事件，可以自己收集数据，自己给服务端发送请求-->
  <br>
  <form action="baidu">
    <input type="submit" value="提交" @click.prevent="submitClick"></input>
  </form>
  <!--3、 .监听某个键盘的键帽，如下面监听的时enter抬起时，才会触发方法-->
  <br>
  <input type="text" @keyup.enter="keyup"></input>
  <!--4、 .once修饰符的使用,只有在第一次点击时候有反应，触发方法，后面就不触发了-->
  <br>
  <button @click.once="button2">按钮2</button>
</div>
<script src="../../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
          text: '当前计数：',
          counter: 0
        },
        methods: {
          divClick() {
            console.log('divClick');
          },
          // 如果函数需要参数，但是没有传入，那么函数的形参为undefined
          button5() {
            console.log('button5');
          },
          submitClick() {
            console.log('submitClick');
          },
          keyup() {
            console.log('keyup');
          },
          button2() {
            console.log('button2');
          }
        }
    })
</script>
</body>