Vue3--vue事件绑定v-on

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-api
        data: 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>