Vue中的事件处理

一,基本使用

1.使用v-on:事件名或者@事件名绑定事件

常见的事件有:

onclick, 鼠标单击事件; ondblclick, 鼠标双击事件;onmousedown,鼠标按下去的事件;onmouseup,鼠标弹起事件;

onmouseover,onmouseenter,onmouseout,onmouseleaveonmousemove 监控鼠标的移入移出,以及移动事件

onkeydownonkeyuponkeypress 监控键盘的按下和弹起。

这里把on改为@即可

2.eg:@click="show"这样的写法默认会传一个事件的参数,如果写成@click="show(a)",这样就会把默认的事件参数取消掉,如果还想再把event参数传过去,就必须使用@click="show(a,$event)"才可以

二,常用的事件修饰符

.stop 阻止事件继续传播。

#阻止事件冒泡
<a @click.stop="toNext">前往下一页</a>

.stop 相当于在 toNext 方法上执行了 e.stopPropagation && e.cancelBubble = true;

.prevent 阻止标签的默认事件。

#阻止默认事件行为。
<a @click.prevent="toNext">

.prevent 相当于在 toNext 方法上执行了 e.preventDefault(),IE: e.returnValue = false;

.capture 添加事件监听器使用事件捕获模式,即处理顺序从body->目标元素。

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

.self 判断event.target是自己触发的,还是子元素冒泡过来的。.self就只接受自己触发的事件。

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

.once 表示点击事件只触发一次。

#vue版本2.1.0 点击事件将只会触发一次. <a v-on:click.once="doThis"></a>

三,按键事件的常用键

猜你喜欢

转载自blog.csdn.net/weixin_59244784/article/details/131811570