一文淺析部分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官方文檔

#每天總結一點點…每天收穫一點點…每天進步一點點…(＾ －＾)

vue.js影片教學

》

以上是一文淺析部分vue事件修飾符的詳細內容。更多資訊請關注PHP中文網其他相關文章！