vue的事件绑定

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

  • 语法

v-on:事件名.修饰符 = 方法名() | 方法名 | 简单的JS表达式
简写： @事件名.修饰符 = 方法名() | 方法名 | 简单的JS表达式

事件名： click|keydown|keyup|mouseover|mouseout|自定义事件名
修饰符： .stop | .prevent | .once | .self | .left | .right | .middle | .up| .down | .keyCode | .keyAlias | .native | .passive

  • 事件绑定类型

//单事件、单方法
v-on:事件名.修饰符 = "方法名()" | "方法名" | "简单的JS表达式"
//单事件、多方法
v-on:事件名.修饰符 = "[方法名1(), 方法名2()]"
//多事件、多方法
v-on:事件名1.修饰符=方法名1 v-on:事件名2.修饰符=方法名2 
v-on = "{\'事件名1\':方法名1， \'事件名2\':方法名2}"

  • 原理： 既不是属性赋值，也不是事件监听，完成的是事件的回调

<p id="p2" v-on:click="show()">vue事件解释</p>
 //v-on会默认为绑定事件提供一个默认函数，事件赋值只是将赋值的函数作为默认函数的内部的回调函数进行执行
 //为了让事件和vue对象产生关联
let pDom2=document.getElementById("p2");
pDom2.addEventListener("click",function(){
   show();
})

  • 参数传递

    • 事件的参数传递: 遵循JS的方法传参规则，同时可取vue实例仓库的变量

    • 页面方法绑定时的 参数 this：会被vue直接重写为指向于 window的对象

    • vue 将事件源对象 封装成了 $event，事件源为$event.target

<input type="button" value="传递参数event" v-on:click="printEvent($event)">

 

以上是 vue的事件绑定 的全部内容， 来源链接： utcz.com/z/377850.html

回到顶部