5、VUE常用的事件处理
2022-04-01 12:19:24 0 举报AI智能生成
登录查看完整内容
为你推荐
查看更多
vue学习
作者其他创作
大纲/内容
原理是 DOM2 级事件绑定
用来实现事件绑定的指令
@
简写
v-on：
指令
v-on:事件类型 = ‘函数’
@事件类型 = ‘函数’
语法
@click='fn'
v-on:click='fn'
例如
绑定的函数，从是否传参、是否需要事件源，可分为下面几种情况
不需要传递实参时，小括号可以省略
fn
需要传递实参时，注意形参和实参个数相对应
实参中 $event 位置不限，无论在第几个都代表事件对象
需要使用事件对象的时候，用 $event 接收事件对象，且只能用其接收
注意
使用
相当于原生：preventDefault
阻止了默认行为
@xxx.prevent='函数名'
相当于原生：stopPropergation
阻止冒泡传播
@xxx.stop = '函数名'
当前函数只会执行一次
@xxx.once = '函数名'
只有点击元素本身才会触发这个函数
@xxx.self = '函数名'
控制函数在捕获阶段执行
@xxx.capture = '函数名'
passive : true 优先执行默认
先执行默认 后执行函数
@xxx.passive = '函数名'
例如：<a v-on:click.stop.prevent=\"doThat\"></a>
修饰符可以串联
用 v-on:click.prevent.self 会阻止所有的点击
而 v-on:click.self.prevent 只会阻止对元素自身的点击。
使用修饰符串联时，顺序很重要
常规修饰符
@keydown.按键（或键盘码） = ‘函数名’
支持以下按键、及其对应的键盘码 @keydown.按键 = ‘函数名’ 操作
.right
.left
.down
.up
.space
.esc
.delete (捕获“删除”和“退格”键)
.tab
.enter
按键修饰符
VUE 中的事件处理
0 条评论
回复 删除
下一页
