vue - 事件监听（v-on的使用方法及修饰符）

一. v-on基本用法

v-on语法糖：@

data(){
	counter:0
},
methods(){
	add(){
		this.counter++;
	}
}

<h2>{{counter}}</h2>
<button @click='add'>+</button>

二. v-on参数传递问题

1. 事件调用的方法没有参数，可以加（），也可以不加（）

<button @click='add()'>+</button>
<button @click='add'>+</button>

2. 在事件定义时，如果方法本身需要一个参数，但是写方法时省略了参数和小括号，vue会默认将浏览器原生的event事件对象作为参数传递到方法中
   （1）如果传入了参数，传出传入的参数

<button @click='btnClick(123)'>点击我</button>

methods:{
	btnClick(abc){
		console.log(abc);
	}
}

（2）只添加小括号，没有传入参数，输出undefined

<button @click="btnClick()">点我</button>

methods: {
          btnClick(abc) {
            console.log(abc);
          },
        },

（3）省略参数和小括号，输出浏览器原生的event对象

<button @click="btnClick">点我</button>

methods: {
          btnClick(abc) {
            console.log(abc);
          },
        },

3. 在方法定义时，既需要其它参数，同时又需要event对象，在调用方法时，可以手动调用浏览器的event对象：$event
（1）不传入括号和参数，输出浏览器的event对象，会输出两个event对象

<button @click="btnClick">点我</button>

methods: {
          btnClick(abc) {
            console.log(abc, event);
          },
        },

（2）只传入其它参数，会输出两个值，一个是传入的参数，一个是event对象

<button @click="btnClick(123)">点我</button>

methods: {
          btnClick(abc) {
            console.log(abc, event);
          },
        },

（3）手动获取浏览器的event对象：$event，结果和2一样，一个传入的参数，一个event对象

<button @click="btnClick(123,$event)">点我</button>

methods: {
          btnClick(abc) {
            console.log(abc, event);
          },
        },

如果我们改变传入参数的位置

<button @click="btnClick($event,123)">点我</button>

 methods: {
          btnClick(abc) {
            console.log(event, abc);
          },
        },

结果为输出了两个event对象

三. v-on修饰符的使用

1. .stop阻止事件冒泡

<div @click='divClick'>
      aaaaaa
      <button @click='btnClick'>ANNIU</button>
    </div>

methods: {
        divClick() {
          console.log('aaaaaa');
        },
        btnClick() {
          console.log('btnClick');
        }
      }

当我点击按钮，事件开始向上传递，会依次输出 btnClick 和 aaaaaa，这就是事件冒泡
如果我们不想打印 aaaaaa ，可以通过 .stop阻止事件冒泡

<div @click='divClick'>
      aaaaaa
      <button @click.stop='btnClick'>ANNIU</button>
    </div>

2. .prevent阻止默认事件

<form action="js">
        <button type="submit" value="js">
          提交
        </button>
      </form>

  formClick() {
            console.log("formClick");
          },

当点击按钮会自动跳转
如果不想让它自动跳转，可以使用 .prevent 阻止默认事件

<form action="js">
        <button type="submit" value="js" @click.prevent="formClick">
          提交
        </button>
      </form>

提交后不跳转

3. .enter监听某个键盘的键帽

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

keyup() {
            console.log("keyup");
          },

4. .once只触发一次回调

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

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