五、Vue事件监听

最新推荐文章于 2024-08-27 22:17:50 发布

不会Java怎么找女朋友

最新推荐文章于 2024-08-27 22:17:50 发布

阅读量339

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/lin_willen/article/details/112152905

版权

Vue 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

01-v-on的基本使用

1.1 事件监听

1、在前端开发中，我们需要经常和用户交互

这个时候，我们就必须监听用户发生的事件，比如点击，拖拽，键盘事件等等
在Vue中使用v-on监听事件

2、v-on的介绍

作用：绑定事件监听器
缩写：@
预期：Function | Inline Statement | Object
参数：event

1.2 代码实战

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01-v-on的基本使用</title>
</head>
<body>

<div id="app">
  <h2>当前计数：{{counter}}</h2>
  <button v-on:click="counter++">+</button>
  <button v-on:click="counter--">-</button>
  <button v-on:click="increment">+</button>
  <button v-on:click="decrement">-</button>
  <button @click="increment">+</button>
  <button @click="decrement">-</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    methods: {
      increment(){
        this.counter++;
      },
      decrement(){
        this.counter--;
      }
    }
  })
</script>
</body>
</html>

1.3 运行结果

在这里插入图片描述

02-v-on的参数问题

2.1 v-on参数

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

2.2 代码实战

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02-v-on的参数问题</title>
</head>
<body>

<div id="app">
  <!--1.事件调用的方法没有参数-->
  <button style="color: red" @click="btn1Click">按钮1-1</button>
  <button style="color: red" @click="btn1Click()">按钮1-2</button>
  <!--2.在事件定义时，写函数省略了小括号，凡是方法本身是需要小括号的
      这个时候，Vue会默认将浏览器生产的event事件对象作为参数传入到方法-->
  <button style="color: green" @click="btn2Click">按钮2-1</button>
  <!--如果函数需要参数，但是没有传入，如果有括号的话，那么函数的形参为undefined-->
  <button style="color: green" @click="btn2Click()">按钮2-2</button>
  <button style="color: green" @click="btn2Click(123)">按钮2-3</button>
  <!--3.定义方法时，我们需要event对象，同时又需要其他参数-->
  <!--在调用方式，如何手动的获取到浏览器参数的event对象:  $event-->
  <button style="color: blue" @click="btn3Click(123,$event)">按钮3</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'hello world!'
    },
    methods: {
      btn1Click(){
        console.log('btn1Click');
      },
      btn2Click(event){
        console.log('btn2Click----',event);
      },
      btn3Click(abc,event){
        console.log("btn3Click++++",abc, event);
      }
    }
  })
</script>
</body>
</html>

2.3 运行结果

在这里插入图片描述

03-v-on修饰符

3.1 v-on修饰符

1、在某些情况下，我们拿到event的目的可能是进行一些事件处理
2、Vue提供了修饰符来帮助我们方便的处理一些事件：

.stop-调用event.stopPropagation()
.prevent-调用event.preventDefault()
.{keyCode | keyAlias}-只当事件是从特定键触发时才触发回调
.once-只触发一次回调

3.2 代码实战

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03-v-on修饰符</title>
</head>
<body>

<div id="app">
  <!--  .stop修饰符的使用,阻止事件冒泡-->
  <div @click="divClick">
    aaaaaa
    <button @click.stop="btn1Click">按钮1</button>
  </div>
  <br>
  <!--  .prevent修饰符的使用,阻止默认事件-->
  <form action="baidu">
    <input type="submit" value="提交" @click.prevent="submitClick">
  </form>
  <br>
  <!--  .监听某个键盘的键帽的点击-->
  <input type="text" @keyup="keyUp">
  <br><br>
  <!--  keyup.enter 监听回车键-->
  <input type="text" @keyup.enter="enter">
  <br><br>
  <!--  .once修饰符的使用-->
  <button @click.once="btn2Click">按钮2</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
    },
    methods:{
      btn1Click(){
        console.log('btn1Click');
      },
      divClick(){
        console.log('divClick');
      },
      submitClick(){
        console.log("submitClick");
      },
      keyUp(){
        console.log("keyUp");
      },
      enter(){
        console.log('enter');
      },
      btn2Click() {
        console.log("btn2Click");
      }
    }
  })
</script>
</body>
</html>