目录
一、v-on的基本用法
使用v-on:click给button绑定监听事件以及回调函数，@是v-on:的缩写，也就是简写也可以使用@click。方法一般是需要写方法名加上()，在@click中可以省掉，如上述的加。
二、v-on的参数传递
三、v-on的修饰词
.stop的使用，btn的click事件不会传播，不会冒泡到上层，调用event.stopPropagation()。
.prevent 调用event.preeventDefault阻止默认行为。
.enter监听键盘事件;
.once 事件只触发一次（常用）；
.capture 使用事件的捕获模式；
.self 只有event.target是当前操作的元素时才触发事件；
.passive 事件的默认行为立即执行，无需等待事件回调执行完毕；
一、v-on的基本用法
使用v-on:click给button绑定监听事件以及回调函数，@是v-on:的缩写，也就是简写也可以使用@click。方法一般是需要写方法名加上()，在@click中可以省掉，如上述的加。
以简单的计数器为例
<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>
二、v-on的参数传递
在methods中定义的方法，我们可以进行调用，可以带上（），也可以不带（）
如下的btnClick的调用中，加了（）想要调用，里面必须要有值，如果不加小括号,就只会调用事件对象。
btnClick3想要传入event，需要在调用时写$event,才能调用事件对象。
<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="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>
事件没传参，可以省略()
事件调用方法传参了，写函数时候省略了小括号，但是函数本身是需要传递一个参数的，这个参数就是原生事件event参数传递进去
如果同时需要传入某个参数，同时需要event是，可以通过$event传入事件。
三、v-on的修饰词
.stop的使用，btn的click事件不会传播，不会冒泡到上层，调用event.stopPropagation()。
.prevent 调用event.preeventDefault阻止默认行为。
.enter监听键盘事件;
once 事件只触发一次（常用）；
capture 使用事件的捕获模式；
self 只有event.target是当前操作的元素时才触发事件；
passive 事件的默认行为立即执行，无需等待事件回调执行完毕；
<style> .div { height:80px; background:#f00; } </style> </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. 监听键盘的事件 --> <form @submit.prevent=''> 账号<input type="text" name="user"/> 密码<input type="text" name="password" @keyup.enter="submit"/> <input type="submit" value="登录"/> </form> <!--4. 事件只触发一次（常用） --> <button @click.once="showInfo">点我提示信息</button> <!--5. capture使用事件的捕获模式 --> <div class="box1" @click.capture="show(111)"> div1外面 <div class="box2" @click="show(222)"> div2里面 </div> </div> <!-- 6.只有event.target是当前操作的元素时才触发事件 --> <div class="div" @click.self="showself"> <button @click="showself">点我</button> </div> <!-- 7.passive事件的默认行为立即执行，无需等待事件回调执行完毕 --> </div> <script src="vue.js"></script> <script> const app = new Vue({ el:"#app", methods:{ btnClick(){ console.log("点击button"); }, divClick(){ console.log("点击div"); }, submitClcik(){ console.log("提交被阻止了") }, submit(){ console.log("keyup点击") }, showInfo(){ alert('web学习真有趣') }, show(msg){ console.log(msg) }, showself(e){ console.log(e.target); }, } }) </script> </body>
