image.png
具有父子关系的重叠元素,事件触发的顺序和机制你都搞清楚了吗???
0.url
键盘状态码:https://blog.csdn.net/woshishui6501/article/details/8282579
1.问题
v-on用于绑定事件,但是不能直接赋值给绑定的事件,要将事件触发回调函数的名称赋值给绑定事件,这里的回调函数,是在Vue实例对象中定义的方法
2.作用
用于给指定元素绑定事件
3.格式
v-on:事件名称="事件被触发回调函数的名称"
@事件名称="事件被触发回调函数的名称"
4.定义回调函数
在Vue实例对象传递对象中定义methods属性
methods:{
函数名称:function(){}
}
5.v-on修饰符
5.1 .once
默认情况下,绑定的事件可以执行多次,加上.once修饰符后,绑定的事件只能执行一次
5.2 .prevent
阻止HTML标签的默认行为,比如a标签的页面跳转
5.3 .stop
默认情况下,父子元素之间会出现事件冒泡,也就是给子元素绑定的事件触发时,父元素也会跟着执行该操作绑定的事件,stop修饰符就是为了阻止事件冒泡
5.4 .self
不会阻止事件冒泡/捕获,但是会跳过当前冒泡,也就是只有当前元素被触发才会执行对应的方法
5.5 .capture
添加事件监听时使用捕获模式,也就是子元素监听事件触发,会先触发父元素相同绑定的事件,事件从外到里执行
6.v-on参数
6.1 绑定的方法名称,可以写(),也可以不写()
6.2 绑定方法名称的时候,可以给方法传递参数
6.3 如果在methods定义的方法中想访问M中的数据,必须加this,否则会报错
7.v-on按键修饰符
7.1用于监听键盘的按键事件
7.2用法:
监听系统提供的按键
@keyup.enter="myFn"
监听自定义的按键
@keyup.113="myFn"
自定义按键修饰符
Vue.config.keyCodes.f2=113
@keyup.113="myFn"
7.代码验证
image.png
image.png
image.png
