十日谈 : Vue的事件监听v-on

最新推荐文章于 2023-10-30 16:44:17 发布

扔猿太膻

最新推荐文章于 2023-10-30 16:44:17 发布

阅读量194

点赞数

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

本文链接：https://blog.csdn.net/qq_36013952/article/details/104422007

版权

前端专栏收录该内容

24 篇文章 1 订阅

订阅专栏

十日谈 : Vue的事件监听v-on

欢迎阅读我的Vue学习日记

欢迎阅读我的Vue学习日记

v-on介绍

1.作用:绑定事件监听器
2.缩写@
3.预期:Function|Inline Statement|Object(函数|内部表达式|对象)
4.参数:event

v-on基础和语法糖

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<h2>
  {{counter}}
</h2>
  <button v-on:click="increment">+</button>
  <button v-on: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>

v-on也有语法糖

<button @click="increment">+</button>

v-on的参数传递问题

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

演示:
按钮1演示事件调用的方法没有参数
按钮2演示在事件定义时,写函数时省略了小括号,但是方法本身是需要一个参数的
(在事件定义时,写方法省略了小括号,但是方法本市是需要一个参数的,这个时候,vue会默认将浏览器生成的event事件对象作为参数传入到方法)
按钮3演示在方法定义时,我们需要event对象同时也需要其他参数
(在调用方法时,如何手动的获得浏览器参数的event对象:$event)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <button @click="btn1Click">按钮1</button>
  <button @click="btn2Click">按钮2</button>
  <button @click="btn3Click(123,$event)">按钮3</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
        message:'Hello Vue'
    },
    methods:{
      btn1Click(){
        console.log('按钮1被按下')
      },
      btn2Click(event){
        console.log('按钮2被按下-----',event)
      },
      btn2Click(abc,event){
        console.log('按钮3被按下-----',abc,event)
      },
    }
  })
</script>
</body>
</html>

v-on的修饰符的使用

.stop修饰符的使用

阻止冒泡事件
请看注释

<!--    <button @click="btnClick">按钮</button>不加stop修饰符,会同时打印两个Click-->
    <button @click.stop="btnClick">按钮</button>
<!--    加了stop修饰符就不会打印div的冒泡-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <div @click="divClick">
  divTouchMe
<!--    <button @click="btnClick">按钮</button>不加stop修饰符,会同时打印两个Click-->
    <button @click.stop="btnClick">按钮</button>
<!--    加了stop修饰符就不会打印div的冒泡-->
  </div>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
        message:'Hello Vue'
    },
    methods:{
      btnClick(){
        console.log("btnClick");
      },
      divClick(){
        console.log("divClick");
      }
    }
  })
</script>
</body>
</html>

.prevent的使用

阻止默认事件

<div id="app">
  <form action="baidu">
    <input type="submit" value="提交">
  </form>
</div>

点击提交会自动提交
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <form action="baidu">
    <input type="submit" value="提交" @click.prevent="submitClick">
  </form>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
        message:'Hello Vue'
    },
    methods:{
      btnClick(){
        console.log("btnClick");
      },
      divClick(){
        console.log("divClick");
      },
      submitClick() {
        console.log('submitClick');
      }
    }
  })
</script>
</body>
</html>

在submitClick里面自己收集数据自己发送访问请求

.{keyCode|keyAlias}的使用

监听键盘上某个按键的点击
1.监听所有的按键
keyup是按键抬起,keydown是按键按下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <input type="text" @keyup="keyUp">
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
        message:'Hello Vue'
    },
    methods:{
      keyUp(){
        console.log('keyUp');
      }
    }
  })
</script>
</body>
</html>

2.监听回车的事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <input type="text" @keyup.enter="keyUp">
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
        message:'Hello Vue'
    },
    methods:{
      keyUp(){
        console.log('keyUp');
      }
    }
  })
</script>
</body>
</html>

.native 在后期学习组件的时候再说

.once 的使用

只触发一次回调
演示:当按钮只能被按下一次时

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <button @click.once="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
        message:'Hello Vue'
    },
    methods:{
      btnClick(){
        console.log('btnClick');
      }
    }
  })
</script>
</body>
</html>

在这里插入图片描述
只有一次回调,再次点击按钮没有任何反应.

扔猿太膻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
十日谈 : Vue的事件监听v-on

十日谈 : Vue的事件监听v-on欢迎阅读我的Vue学习日记v-on介绍v-on基础和语法糖v-on的参数传递问题v-on的修饰符的使用.stop修饰符的使用.prevent的使用.{keyCode|keyAlias}的使用.native 在后期学习组件的时候再说.once 的使用欢迎阅读我的Vue学习日记v-on介绍1.作用:绑定事件监听器2.缩写@3.预期:Function|Inl...
复制链接

扫一扫