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事件修飾符源碼分析”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！