vue事件监听 v-on

在前端开发中，我们经常用到交互，在vue中如何监听事件呢，使用v-on

v-on介绍

作用：绑定事件监听器

缩写：@

参数：event

1、v-on基础用法#

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

const app = new Vue({
  el: "#app", //用于挂载要管理的元素
  data: {   //定义数据
    message: 'hello',
    counter: 0
  },
  methods: {
    increment(){
      this.counter++;
    },
    decrement(){
      this.counter--;
    }
  }
})

2、v-on 的参数问题#

1、事件调用的方法没有参数

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

btn1click(){
  console.log("btn1click");
}

2、在事件定义时，写函数时省略了小括号，但是方法本身是需要一个参数的,这个时候，Vue

会默认将浏览器产生的event事件对象作为参数传递到方法中

<button @click="btn2click">按钮2</button>

btn2click(abc){
  console.log('--------',abc);
}

3、方法定义时，我们需要event对象，同时也需要其他参数

在调用方法时，如何手动获取浏览器参数的event对象：$event

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

btn3click(abc,event){
  console.log('---++-----',abc,event);
}

3、v-on修饰符的使用#

1）stop修饰符的使用

阻止事件冒泡

<div @click="divclick">
  <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"> //监听enter键

4）once修饰符的使用

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