架构师

您现在的位置是:首页 > 程序人生 > 前端别闹

前端别闹

Vue小案例:事件监听v-on参数和修饰符等基础用法

架构师小跟班 2020-04-30 前端别闹
事件监听在前端开发中,我们需要经常和用于交互。这个时候,我们就必须监听用户发生的时间,比如点击、拖拽、键盘事件等等。在Vue中如何监听事件呢?使用v-on指令(v-on:简化为@)v-on

事件监听

在前端开发中,我们需要经常和用于交互。这个时候,我们就必须监听用户发生的时间,比如点击、拖拽、键盘事件等等。在Vue中如何监听事件呢?使用v-on指令(v-on:简化为@)

v-on基础

这里,我们用一个监听按钮的点击事件,来简单看看v-on的使用,下面的代码中,我们使用了v-on:click="counter++”。另外,我们可以将事件指向一个在methods中定义的函数

<h1>当前数字为:{{counter}}</h1>
<!--直接写-->
<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>
<!--封装成方法-->
<button @click="add">+</button>
<button @click="sub">-</button>

v-on参数

当通过methods中定义方法,以供@click调用时,需要注意参数问题:

情况一:如果该方法不需要额外参数,并且是在事件监听时,方法后的()可以不添加。(注意:{{}}里的方法必须要加小括号)

但是注意:如果方法本身中有一个参数,那么会默认将原生事件event参数传递进去

情况二:如果需要同时传入某个参数,同时需要event时,可以通过$event传入事件。

v-on修饰符

在某些情况下,我们拿到event的目的可能是进行一些事件处理。Vue提供了修饰符来帮助我们方便的处理一些事件:

.stop - 调用 event.stopPropagation()。

.prevent - 调用 event.preventDefault()。

.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。@keyup.enter监听enter键

.native - 监听组件根元素的原生事件。

.once - 只触发一次回调。


文章评论