vue3事件处理
事件处理
一、事件监听:
我们可以使用 v-on
指令 (简写为 @
) 来监听 DOM 事件,并在事件触发时执行对应的 JavaScript。
语法结构,v-on=" { 事件名:回调函数 | 表达式,对象,数组}
注意:vue2语法中,取值是对象形式时,v-on 不支持 @缩写关键字
1.v-on="回调函数"形式
注意:取值的回调函数可以加(),也可以不加,需要传参时,加小括号
<input type="button" value="@click提示-不带()" @click="showInfo">
2.v-on="表达式的形式"
注意:当事件的逻辑比较简单时,可以直接以表达式的形式直接书写在取值内容中
//比如这里点击事件只需要对flag进行取反操作,这种简单的逻辑,可以直接写在v-on取值内容中
<input type="button" value="flag=!flag" @click=" flag = !flag; flag1 = !flag; ">
3.v-on="对象的形式"
通过对象的形式可以同时绑定不同类型的事件,
对象以{ 事件名1:回调函数,事件名2:回调函数,.....}
(1)通过object对象的形式可绑定多个事件,以对象的形式书写
<input type="text" placeholder="input&change" v-on=" { input:callbackA,change:callbackB } ">
<script type="module">
methods: {
callbackA() {
console.log("input事件触发");
},
callbackB() {
console.log("change事件触发");
},
},
</script>
(2)事件的取值,可以通过读取data数据仓库中的数据,再数据中以对象的形式编写回调函数
<input type="text" placeholder="input&change" v-on="events">
<script>
let vm = new Vue({
el: "#app",
data() {
// console.log(this);
return {
events: {
input: this.callbackA,
change: this.callbackB
},
}
},
}
</script>
4.v-on="数组的形式"
注意:以数组的形式是绑定单一事件,给单一事件取值不同的回调函数,不可以同时绑定多个不同类型的事件
<input type="button" value="绑定两个回调" @click="[ callbackC,callbackD ]">
二、绑定事件的传参
1.匿名参数
匿名参数包括:匿名的字符串,对象,数值,布尔值,数组,构造函数实例对象,集合等;
<input type="button" value="事件匿名参数"
@click="printArgs('字符串',123,false,[1,2],{a:1},new Date(),new Set([1,2]) )"
>
2.vue数据仓库中的数据
注意:参数需要符合 JS 规范;
<input type="button" value="事件仓库变量参数"
@click="printArgs( msg,info,`仓库变量msg的值是:${msg}` )"
>
3.事件源对象($event)
注意:JS 中的事件源对象是 event 关键字,vue中为了和 变量名区分,必须加$event
<input type="button" value="点击事件源对象" @click="printEvent( $event )">
4.注意在vue中的doom树上的this的指向问题
在vue3的doom中,this指向当前与vue实例挂载的vue实例对象;
在vue2中doom中,this指向window;
所以,当我们需要获取当前容器标签时,想通过原生js中this指向js的doom对象来获取事件对象行不通了;如果需要获取事件源对象,需要通过$event来获取,事件源对象的数据信息全部在$event身上;
比如:我们需要获取input框的输入内容时,可以通过事件源对象身上的target.value来获取;
当然也可以通过 v-model 数据的双向绑定(数据与data仓库中的变量双向变绑定)来获取值
<input type="text" @input="getInputNewValue( $event.target.value )">
三、事件修饰符
事件修饰符:vue为v-on绑定的事件提供了内置定义好的事件行为模式的代码,用于简化代码开发,这种事件修饰功能,在开发中称为 语法糖;
vue3中的事件修饰符,可以对绑定的事件起到限定作用;
事件修饰符 | 功能 |
.prevent | 阻止默认行为;比如,默认的鼠标右击行为 |
.once | 一次性修饰符,事件只执行一次 |
.stop | 阻止事件传播修饰符(包括事件冒泡和捕获机制) |
.native | 解析js原生事件 |
.{keyAlias} | 按键修饰符;只有触发某些按键的事件才触发事件;如@keydown.Enter="function(){}" |
.self | 只有事件从元素本身发出才触发处理函数。事件冒泡捕获机制都不能触发添加了.self修饰的事件; |
.capture | 在捕获模式添加事件监听器。 |
1.动态绑定事件
vue2.6^ 版本提供 事件绑定时事件名描述关键字 [] , [] 中定义名字将被作为仓库变量进行加载
<input type="text" v-on:[en]=" msg = $event.target.value ">
<script type="module">
createApp({
data(){
return {
msg:"",
en:"input",
ce:"click",
num:5
}
})
</script>
可以通过切换data数据仓库中的en值,来修改事件类型
更多推荐
所有评论(0)