vue事件绑定v-on
一.基础用法
完整写法
<div class="box" v-on:click="divClick"></div>
语法糖写法
<div class="box" @click="divClick"></div>
绑定的方法位置, 也可以写成一个表达式
<button @click="increment">+1</button><button @click="counter++">+1</button>
绑定其他方法
<div class="box" @mousemove="divMousemove"></div>
元素绑定多个事件
<div class="box" @click="divClick" @mousemove="divMousemove"></div>
基础代码
const app = Vue.createApp({//data:options-apidata: function () {return {counter: 0,};},methods: {divClick() {console.log("divClick");},increment() {this.counter++;},divMousemove() {console.log("divMousemove");},},});app.mount("#app");
二. 绑定事件传递参数
如在绑定事件的时候 没有传递任何参数 那么event对象会被默认传递进来
<button @click="btn1Click">按钮1</button>...btn1Click() {console.log("btn1Click", event);},
明确参数传递
<button @click="btn2Click('nihao',age)">按钮2</button>...btn2Click(name, age) {console.log("btn2Click:", name, age)},
在模板想要明确的获取event对象 ,需要主传入$event
<button @click="btn3Click('nihao',age,$event)">按钮2</button>...btn3Click(name, age, event) {console.log("btn3Click:", name, age, event)},
三. 绑定事件的修饰符
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyAlias} - 仅当事件是从特定键触发时才触发回调。
.once - 只触发一次回调。
.left - 只当点击鼠标左键时触发。
.right - 只当点击鼠标右键时触发。
.middle - 只当点击鼠标中键时触发。
.passive - { passive: true } 模式添加侦听器
.stop相当于调用event.stopPropagation 阻止冒泡 .event相当于调用event.preventDefault 阻止默认事件 例如a连接跳转
<button @click.stop="btnClick">按钮</button>