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>