vue事件修饰符源码分析

本篇内容主要讲解“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

，刚开始并不明白是什么原因，查证一番，发现是因为vue 使用的是一套自己的事件传递机制，例如

@click

等事件是经过 vue 封装的。如果想在某个组件的根元素上监听一个原生事件，就要使用 v-on 的修饰符

.native

在上面的代码片段中

@keyup.enter

是写在一个封装好的组件上（项目中用的的 iView组件 ），因此，在一些实际上处理 DOM 原生事件的上需要添加额外的标识符

.native

，如果是直接在

input

上使用就不需要添加了。

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

1、事件修饰符

.stop

阻止单击事件继续传播

.prevent

提交事件不再重载页面

.capture

添加事件监听器时使用事件捕获模式， 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理

.self

只当在 event.target 是当前元素自身时触发处理函数 ，即事件不是从内部元素触发的

.once

点击事件将只会触发一次

.passive

滚动事件的默认行为 (即滚动行为) 将会立即触发 ，包含 event.preventDefault() 的情况

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

@click.prevent.self

会阻止所有的点击，而

@click.self.prevent

只会阻止对元素自身的点击。

2、按键修饰符

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

.enter

回车键

.tab

制表空格键

.delete

(捕获“删除”和“退格”键)

.esc

退出

.space

空格键

.up

向上键

.down

向下键

.left

向左键

.right

向右键

3、系统修饰键

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

.ctrl

.alt

.shift

.meta

以上就是vue事件修饰符源码分析的详细内容，更多关于vue事件修饰符源码分析的资料请关注九品源码其它相关文章！