vue @click 多个事件_VUE学习记录3

v-on的基本使用

在前面的计数器案例中使用了v-on:click监听单击事件。这里在回顾一下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><title>Document</title>
</head>
<body><div id="app"><h2>{{count}}</h2><!-- <button v-on:click="count++">加</button><button v-on:click="count--">减</button> --><button @click="increment">加</button><button @click="decrement()">减</button></div><script>const app = new Vue({el:"#app",data:{count:0},methods: {increment(){this.count++},decrement(){this.count--}}})</script>
</body>
</html>

使用v-on:click给button绑定监听事件以及回调函数，@是v-on:的语法糖，也就是简写也可以使用@click。方法一般是需要写方法名加上()，在@click中可以省掉，如上述的<button @click="increment">加</button>。

v-on的参数传递

了解了v-on的基本使用，现在需要了解参数传递。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><div id="app"><!-- 事件没传参 --><button @click="btnClick">按钮1</button><button @click="btnClick()">按钮2</button><!-- 事件调用方法传参，写函数时候省略小括号，但是函数本身需要传递一个参数 --><button @click="btnClick2(123)">按钮3</button><button @click="btnClick2()">按钮4</button><button @click="btnClick2">按钮5</button><!-- 事件调用时候需要传入event还需要传入其他参数 --><button @click="btnClick3($event,123)">按钮6</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><script>const app = new Vue({el:"#app",methods:{btnClick(){console.log("点击XXX");},btnClick2(value){console.log(value+"----------");},btnClick3(event,value){console.log(event+"----------"+value);}}})</script>
</body>
</html>

事件没传参，可以省略()
事件调用方法传参了，写函数时候省略了小括号，但是函数本身是需要传递一个参数的，这个参数就是原生事件event参数传递进去
如果同时需要传入某个参数，同时需要event是，可以通过$event传入事件。

按钮4调用btnClick2(value){}，此时undefined。按钮5调用时省略了()，会自动传入原生event事件，如果我们需要event对象还需要传入其他参数，可以使用$event对象。

6.3 v-on的修饰词

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>v-on的修饰符</title>
</head>
<body><div id="app"><!--1. .stop的使用，btn的click事件不会传播，不会冒泡到上层，调用event.stopPropagation() --><div @click="divClick"><button @click.stop="btnClick">按钮1</button></div><!-- 2. .prevent 调用event.preeventDefault阻止默认行为  --><form action="www.baidu.com"><button type="submit" @click.prevent="submitClick">提交</button></form><!--3. 监听键盘的事件 --><input type="text" @click.enter="keyup"></div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><script>const app = new Vue({el:"#app",methods:{btnClick(){console.log("点击button");},divClick(){console.log("点击div");},submitClcik(){console.log("提交被阻止了")},keyup(){console.log("keyup点击")}}})</script>
</body>
</html>