本篇内容主要讲解“vue事件修饰符源码分析”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue事件修饰符源码分析”吧!

在项目开发中遇到了vue的键盘事件，以下是项目的代码片段：

<div class="query-form-left">
   <i-Form :model="formItem" inline>
       <form-item  >
           <i-input style="width:200px"  placeholder="名称" v-model="formItem.name" @keyup.enter.native="queryTableDataByAction"></i-Input>
       </form-item>
       <form-item>
           <i-input placeholder="负责人" v-model="formItem.ownerUserName" @keyup.enter.native="queryTableDataByAction"></i-Input>
       </form-item>
       <form-item>    
           <i-Button type="ghost" @click="queryTableDataByAction">查询</i-Button>
       </form-item>
   </i-Form></div>

在代码片段中，发现键盘事件后面总是有

.naitvie

@click

.native

在上面的代码片段中

@keyup.enter

.native

input

此外，vue 提供了很多的 修饰符。

1、事件修饰符

.stop

.prevent

.capture

.self

.once

.passive

注：修饰符可以串联 ,使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用

@click.prevent.self

@click.self.prevent

2、按键修饰符

可以直接用keycode，但是较难记全，所以Vue提供 了常用的按键别名

.enter

.tab

.delete

.esc

.space

.up

.down

.left

.right

3、系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl

.alt

.shift

.meta