监听事件(v-on指令监听DOM事件)
格式:v-on: click、v-on: keyup 简写:@click、@keyup
(@scroll、@mousewheel、@blur、@focus 等....)
事件处理方法
许多事件处理逻辑会很复杂,所以直接把 JavaScript 代码写在 v-on
指令中是不可行的(但如果是自增自减等简单的逻辑也是可以的)。因此 v-on
还可以接收一个需要调用的方法名称。(比如:@click="change()")
1.常见的监听事件的修饰符:
@click.prevent使标签的默认事件不执行,
标签的默认事件:比如
a标签的href元素指向的地址;
<form action="http..."><button type="submit"></form> 中submit元素会跳转至form指向的地址;
@click.once事件只触发一次
@click.self当且仅当事件起始于自身时,才会触发
@click.stop阻止事件冒泡(当前方法执行完毕后结束,不会再往上冒泡了也就是不会再执行父元素的@click了)
2.按键修饰符:
@keyup.space="change" 键盘按下space键触发事件