Vue 入门指北——modifier

前言

在我们在进行开发的时候，往往会对当前点击事件进行限制，比如当我们需要按下回车键触发相应的 method 事件，并阻止默认的换行操作的时候，可能需要通过JavaScript判断相应的keycode，并且通过event.preventDefault()阻止他的默认行为。虽然说我们可以很轻松的实现这点，但更好的方式：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。而这一点也是 vue 官方所想看到，因此他推出很多 modifier（修饰符），帮助我们更好的实现他，合理使用，事半功倍。

按键修饰符

• KeyDown：按下按键时触发

• KeyPress：按下按键，并且产生一个字符时触发

• KeyUp： 松开某一个按键时触发

按键别名： .enter，.tab，.delete，.esc，.space，.up，.down，.left，.right

注：.delete(捕获“删除”和“退格”键)

当我们想监听回车键按下执行 send 方式时：

<input @keyup.enter="send" />

当然还有鼠标键组合键等等，这里不做阐述，想了解更多功能请查阅官方文档。

事件修饰符

这里介绍下几个常用的修饰符：具体请参考官方文档。

• .stop：阻止事件冒泡

<a @click.stop="doThis"></a>

• .prevent：阻止事件默认行为

<form @submit.prevent="onSubmit"></form>

• .native：将原生事件绑定到组件

<components @click.native="onSend" />

当我们要做一个聊天页面，用户想在输入框输入消息后按下回车键，立即发送消息时，就可以通过 vue 提供的修饰符组合起来做的，而调用的方法只需要出处理相应业务就可以。

以 element 的 input 为例：

<el-input @keydown.enter.native.prevent="send" />

通过上文的按键修饰符加上相应的键名， native 和 prevent 事件修饰符就可以很轻松实现这种效果。