05-Vue的事件监听

v-on的基本使用

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <h2>{{counter}}</h2>
      <button v-on:click="increment">+</button>
      <button @click="decrement">-</button>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          counter: 0
        },
        methods: {
          increment() {
            this.counter++
          },
          decrement() {
            this.counter--
          }
        }
      })
    </script>
  </body>
</html>

1.v-on是什么

我们都知道js中有很多事件监听，如下图所所示：
在这里插入图片描述
而这些事件监听在Vue中就要用v-on来操作。具体使用如下：

<button v-on:click="increment">+</button>

而Vue为我们准备了语法糖(简便写法)，将v-on:改成@即可，如下：

<button @click="decrement">-</button>

我们可以看到操作结果，+和-都是可以运行的。
在这里插入图片描述

v-on的参数问题

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <!-- 1.事件调用的方法没有参数 -->
      <button @click="btn1Click">按钮1.1</button>
      <button @click="btn1Click()">按钮1.2</button>

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

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

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好"
        },
        methods: {
          btn1Click() {
            console.log("btn1Click")
          },
          //如果函数需要参数，但是没有传入，函数的形参为undefined
          btn2Click(abc) {
            console.log("---", abc)
          },
          btn3Click(abc, event) {
            console.log("+++++++++", abc, event)
          }
        }
      })
    </script>
  </body>
</html>

1.参数问题详解

无参数
无参数时方法名后面括号带与不带效果是一样的。

<button @click="btn1Click">按钮1</button>
<button @click="btn1Click()">按钮1</button>

btn1Click() {
	console.log("btn1Click")
}

有参数

如果方法需要一个参数，而调用方法时传入一个参数，那当然能够成功传递。

<button @click="btn2Click(123)">按钮2.1</button>

btn2Click(abc) {
	console.log("---", abc)
}

如果方法需要一个参数，而调用方法时没有传入也没有加括号，那Vue会自动将event事件对象作为参数传入到方法中。

<button @click="btn2Click">按钮2.2</button>

btn2Click(abc) {
	console.log("---", abc)
}

在这里插入图片描述

如果如果方法需要一个参数，而调用方法时没有传入但是加了括号，那控制台将会报错undefiend。(你是不是有病，人家要参数，你不加括号也就算了，现在加了括号还不给传)

<button @click="btn2Click()">按钮2.3</button>

btn2Click(abc) {
	console.log("---", abc)
}

在这里插入图片描述

参数传入event
如果方法本身就要传入一个event对象，那使用如下：

<button @click="btn3Click(123,$event)">按钮3.2</button>

btn3Click(abc, event) {
	console.log("+++++++++", abc, event)
}

注意传入的参数为$event，而不是event。

v-on的修饰符

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <!-- 1.修饰符.stop的使用(可以终止冒泡) -->
      <div @click="divClick">
        aaa
        <button @click.stop="btnClick">按钮</button>
      </div>

      <!-- 2.修饰符.prevent的使用 -->
      <form action="baidu">
        <input type="submit" value="提交" @click.prevent="submitClick" />
      </form>

      <!-- 3.监听某个键盘的键帽的点击 -->
      <input type="text" @keyup.enter="keyUp" />

      <!-- 4.修饰符.once的使用 -->
      <button @click.once="btn2Click">按钮2</button>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好"
        },
        methods: {
          btnClick() {
            console.log("btnClick")
          },
          divClick() {
            console.log("divClick")
          },
          submitClick() {
            console.log("submitClick")
          },
          keyUp() {
            console.log("keyUp")
          },
          btn2Click() {
            console.log("btn2Click")
          }
        }
      })
    </script>
  </body>
</html>

1.修饰符.stop的使用

.stop可以简单概括为终止js默认冒泡。

<div @click="divClick">
	aaa
	<button @click.stop="btnClick">按钮</button>
</div>

btnClick() {
	console.log("btnClick")
},
divClick() {
	console.log("divClick")
}

点击效果如下，我们都知道点击div中的button还会触发div的点击事件，而现在控制台并没有打印"divClick"，说明我们的.stop起作用了，另将没有.stopr结果附上。
在这里插入图片描述

2. 修饰符.prevent的使用

.prevent可以理解为阻止默认事件。

<form action="baidu">
	<input type="submit" value="提交" @click.prevent="submitClick" />
</form>

submitClick() {
	console.log("submitClick")
}

点击结果如下，我们都知道form表单的作用是提交数据，而触发提交就是点击submit，而此时只是控制台打印了结果，页面并没有跳转，此时说明我们的.prevent是起了作用的，另将没有.prevent的结果附上。
在这里插入图片描述

3.修饰符监听按键的点击

<input type="text" @keyup.enter="keyUp" />

keyUp() {
	console.log("keyUp")
}

点击结果如下，我们都知道在原生的js和jQuery中每个按键都有自己的键码，可以直接键码，同时Vue内部也为我们将常用的按键设置了别名，这样就可以直接使用了，另将常用按键附上。
在这里插入图片描述

4.修饰符.once的使用

<button @click.once="btn2Click">按钮2</button>

btn2Click() {
	console.log("btn2Click")
}

点击效果如下，和正常的点击事件看起来没有什么不同，但是它只能点击一次，就像是只能点赞只能点一次一样，再点击没有反应，另将没有.once的结果附上。在这里插入图片描述

第一次记录自己的学习笔记，如果您发现问题，欢迎指点。

蓝带915

发布了11 篇原创文章 · 获赞 0 · 访问量 58

私信关注