七、VUE基础学习篇（事件监听）- v-on、事件修饰符、按键监听

最新推荐文章于 2020-08-15 19:50:15 发布

IT_CREATE

最新推荐文章于 2020-08-15 19:50:15 发布

阅读量500

点赞数

分类专栏： Vue学习文章标签： vue vue事件监听 vue事件监听修饰符按键事件监听 v-on

本文链接：https://blog.csdn.net/it_create/article/details/106590727

版权

Vue学习专栏收录该内容

13 篇文章 5 订阅

订阅专栏

码云实时更新学习demo地址：https://gitee.com/dxl96/vuexuexi

VUE基础篇（事件监听）

1、v-on监听事件

监听事件：
vue事件，以 v-on: 开头，指定不同的事件，事件的属性值可以是方法，也可以是代码片段
@ 是语法糖的一种写法，等价于v-on:,为了简写方便，用以替换v-on:
格式：
v-on:事件名称
@:事件名称

事件修饰符：
事件修饰符的使用，也就是在事件监听后以 .xxx结尾的就是事件修饰符
格式：
v-on:事件名称.修饰符
当前介绍四种修饰符（更多修饰符参考官方文档）：
.stop ：调用event.stopPropagation() ，.stop修饰符阻止事件冒泡 ,传统js用的是event.stopPropagation()方法来消除事件冒泡
什么是事件冒泡呢，意思是，事件会向父类进行传递，比如这里：点击事件会向父类进行传递，当点击某个子元素时，如果他的父类也存在点击事件，则这个父类的点击事件也会触发，用了.stop就消除了这种冒泡传递，点击子类时，就不会触发父类事件
.prevent 调用event.preventDefault() , .prevent阻止默认事件，默认情况下我们点击提交按钮会自动提交表单，通过.prevent修饰符可以阻止默认事件，这样我们就可以通过我们调用的方法来自己定义提交
v-on:键盘事件.按键名 ( v-on:键盘事件.xxx ) :监听某个键盘的键帽，如果没有以 .xxx 结尾来指定某个按键，则所有的按键这个事件都生效，加了 .xxx来指定某个按键，则只对这个按键生效, xxx 是按键的名称或者是按键对应的数字
.once : 触发事件调用方法时只调用一次，后面不在触发调用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>事件监听</title>
  <style>
    br {
      margin-top: 40px;
    }
  </style>
</head>
<body>

<div id="app">
  <div>
    当前计数：{{counter}}
  </div>

  <!--  ■vue事件，以v-on:开头，指定不同的事件，事件的属性值可以是方法，也可以是代码片段,这里监听点击事件-->
  <button v-on:click="increment">+</button>
  <button v-on:click="decrement">-</button>
  <br>

  <!--  ■@是语法糖的一种写法，等价于v-on:,为了简写方便，用以替换v-on:-->
  <button @click="increment">@+</button>
  <button @click="decrement">@-</button>
  <br><br>

  <!--  ■当调用一个含有参数的方法时，如果什么都不传入，会默认向方法传入事件对象,事件对象为方法的第一个参数，可以简写省去括号-->
  <button @click="getEvent">点击</button>

  <!--  ■当我们需要传入其他值，又需要传入事件时，事件用$event传入 ,传入的参数值如果没有用单引号包裹起来，默认认为是变量名，变量必须定义过才能够
  被cue解析，否则会报错，如果传入的是数字，则不需要加单引号-->
  <button @click="getInfo(123,'小明',counter,$event)">点击2</button>
  <br><br>


  <!--  ■【事件修饰符的使用，也就是在事件监听后以 .xxx结尾的就是事件修饰符】-->

  <!--1、  .stop - 调用event.stopPropagation() ，.stop修饰符阻止事件冒泡 ,传统js用的是event.stopPropagation()方法来消除事件冒泡
         什么是事件冒泡呢，意思是，事件会向父类进行传递，比如这里：点击事件会向父类进行传递，当点击某个子元素时，如果他的父类也存在点击事件，则这个父类的点击事件也会触发
         这里就是点击button时会触发div的点击事件，因为用了.stop就消除了这种冒泡传递-->
  <div @click="divClick">
    测试事件冒泡
    <button @click.stop="btnClick">点击3</button>
  </div>
  <br><br>

  <!--2、  .prevent - 调用event.preventDefault() , .prevent阻止默认事件-->
  <!--  默认情况下我们点击提交按钮会自动提交表单，通过.prevent修饰符可以阻止默认事件，这样我们就可以通过我们调用的方法来自己定义提交-->
  <form action="baidu">
    <input type="submit" value="点击提交" @click.prevent="submitClick">
  </form>
  <br><br>

  <!--3、  监听某个键盘的键帽，如果没有以 .xxx 结尾来指定某个按键，则所有的按键这个事件都生效，加了 .xxx来指定某个按键，则只对这个按键生效
  xxx 是按键的名称或者是按键对应的数字-->
  所有抬起事件：<input type="text" @keyup="keyEventAll"><br>
  enter键抬起事件：<input type="text" @keyup.enter="keyEventEnter">
  <br><br>

  <!--4、  .once 调用方法时只调用一次-->
  <button @click.once="btnClick">点击只生效一次</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--
      },
      getEvent(event) {
        console.log(event)
      },
      getInfo(num, name, count, event) {
        console.log(num)
        console.log(name)
        console.log(count)
        console.log(event)
      },
      btnClick() {
        console.log("btnClick")
      },
      divClick() {
        console.log("divClick")
      },
      submitClick() {
        console.log("提交表单")
      },
      keyEventAll() {
        console.log("所有按键抬起事件")
      },
      keyEventEnter() {
        console.log("enter按键抬起事件")
      }
    }
  });
</script>
</body>
</html>

效果
在这里插入图片描述