為了方便大家寫代碼，vue.js給大家提供了很多方便的修飾符，比如我們經常用到的取消冒泡，阻止默認事件等等~，

目錄

• 表單修飾符
• 事件修飾符
• 滑鼠按鍵修飾符
• 鍵值修飾符
• v-bind修飾符（實在不知道叫啥名字）

表單修飾符

填寫表單，最常用的是什么？input！v-model~而我們的修飾符正是為了簡化這些東西而存在的

1.lazy

從這里我們可以看到，我們還在輸入的時候，游標還在的時候，下面的值就已經出來了，可以說是非常地實時，

但是有時候我們希望，在我們輸入完所有東西，游標離開才更新視圖，

這樣即可~這樣只有當我們游標離開輸入框的時候，它才會更新視圖，相當于在onchange事件觸發更新，

2.trim

在我們的輸入框中，我們經常需要過濾一下一些輸入完密碼不小心多敲了一下空格的兄弟輸入的內容，

為了讓你更清楚的看到，我改了一下樣式，不過問題不大，相信你已經清楚看到這個大大的hello左右兩邊沒有空格，盡管你在input框里敲爛了空格鍵，

需要注意的是，它只能過濾首尾的空格！首尾，中間的是不會過濾的

3.number

看這個名字就知道，應該是限制輸入數字或者輸入的東西轉換成數字，but不是辣么干的，

如果你先輸入數字，那它就會限制你輸入的只能是數字，
如果你先輸入字串，那它就相當于沒有加.number

事件修飾符

1.stop

由于事件冒泡的機制，我們給元素系結點擊事件的時候，也會觸發父級的點擊事件，

一鍵阻止事件冒泡，簡直方便得不行，相當于呼叫了event.stopPropagation()方法，

2.prevent

用于阻止事件的默認行為，例如，當點擊提交按鈕時阻止對表單的提交，相當于呼叫了event.preventDefault()方法，

注意：修飾符可以同時使用多個,但是可能會因為順序而有所不同，

用 v-on:click.prevent.self 會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊，

也就是從左往右判斷~

3.self

只當事件是從事件系結的元素本身觸發時才觸發回呼，像下面所示，剛剛我們從.stop時候知道子元素會冒泡到父元素導致觸發父元素的點擊事件，當我們加了這個.self以后，我們點擊button不會觸發父元素的點擊事件shout，只有當點擊到父元素的時候（藍色背景）才會shout~從這個self的英文翻譯過來就是‘自己，本身’可以看出這個修飾符的用法

4.once

這個修飾符的用法也是和名字一樣簡單粗暴，只能用一次，系結了事件以后只能觸發一次，第二次就不會觸發，

5.capture

從上面我們知道了事件的冒泡，其實完整的事件機制是：捕獲階段--目標階段--冒泡階段，

默認的呢，是事件觸發是從目標開始往上冒泡，

當我們加了這個.capture以后呢，我們就反過來了，事件觸發從包含這個元素的頂層開始往下觸發，

從上面這個例子我們點擊obj4的時候，就可以清楚地看出區別，obj1，obj2在捕獲階段就觸發了事件，因此是先1后2，后面的obj3，obj4是默認的冒泡階段觸發，因此是先4然后冒泡到3~

6.passive

當我們在監聽元素滾動事件的時候，會一直觸發onscroll事件，在pc端是沒啥問題的，但是在移動端，會讓我們的網頁變卡，因此我們使用這個修飾符的時候，相當于給onscroll事件整了一個.lazy修飾符

7.native

我們經常會寫很多的小組件，有些小組件可能會系結一些事件，但是，像下面這樣系結事件是不會觸發的

必須使用.native來修飾這個click事件（即），可以理解為該修飾符的作用就是把一個vue組件轉化為一個普通的HTML標簽，
注意：使用.native修飾符來操作普通HTML標簽是會令事件失效的

滑鼠按鈕修飾符

剛剛我們講到這個click事件，我們一般是會用左鍵觸發，有時候我們需要更改右鍵選單啥的，就需要用到右鍵點擊或者中間鍵點擊，這個時候就要用到滑鼠按鈕修飾符

• .left 左鍵點擊
• .right 右鍵點擊
• .middle 中鍵點擊
  

鍵值修飾符

其實這個也算是事件修飾符的一種，因為它都是用來修飾鍵盤事件的，
比如onkeyup，onkeydown啊

1.keyCode

如果不用keyCode修飾符，那我們每次按下鍵盤都會觸發shout，當我們想指定按下某一個鍵才觸發這個shout的時候，這個修飾符就有用了，具體鍵碼查看鍵碼對應表https://zhidao.baidu.com/question/266291349.html

為了方便我們使用，vue給一些常用的鍵提供了別名

可以通過全域 config.keyCodes 物件自定義按鍵修飾符別名：

我們從上面看到，鍵分成了普通常用的鍵和系統修飾鍵，區別是什么呢？
當我們寫如下代碼的時候,我們會發現如果僅僅使用系統修飾鍵是無法觸發keyup事件的，

那該如何呢？我們需要將系統修飾鍵和其他鍵碼鏈接起來使用，比如

這樣當我們同時按下ctrl+c時，就會觸發keyup事件，
另，如果是滑鼠事件，那就可以單獨使用系統修飾符，

大概是什么意思呢，就是你不能單手指使用系統修飾鍵的修飾符（最少兩個手指，可以多個），你可以一個手指按住系統修飾鍵一個手指按住另外一個鍵來實作鍵盤事件，也可以用一個手指按住系統修飾鍵，另一只手按住滑鼠來實作滑鼠事件，

2.exact (2.5新增)

我們上面說了這個系統修飾鍵，當我們像這樣系結了click鍵按下的事件，驚奇的是，我們同時按下幾個系統修飾鍵，比如ctrl shift點擊，也能觸發，可能有些場景我們只需要或者只能按一個系統修飾鍵來觸發（像制作一些快捷鍵的時候），而當我們按下ctrl和其他鍵的時候則無法觸發，那就這樣寫，

注意：這個只是限制系統修飾鍵的，像下面這樣書寫以后你還是可以按下ctrl + c，ctrl+v或者ctrl+普通鍵 來觸發，但是不能按下ctrl + shift +普通鍵來觸發，

然后下面這個你可以同時按下enter+普通鍵來觸發，但是不能按下系統修飾鍵+enter來觸發，相信你已經能聽懂了8~

v-bind修飾符

1.sync(2.3.0+ 新增)

在有些情況下，我們可能需要對一個 prop 進行“雙向系結”，不幸的是，真正的雙向系結會帶來維護上的問題，因為子組件可以修改父組件，且在父組件和子組件都沒有明顯的改動來源，我們通常的做法是

現在這個.sync修飾符就是簡化了上面的步驟

這樣確實會方便很多，但是也有很多需要注意的點

1、使用sync的時候，子組件傳遞的事件名必須為update:value，其中value必須與子組件中props中宣告的名稱完全一致(如上例中的myMessage，不能使用my-message)

2、注意帶有 .sync 修飾符的 v-bind 不能和運算式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是無效的)，取而代之的是，你只能提供你想要系結的屬性名，類似 v-model，

3將 v-bind.sync 用在一個字面量的物件上，例如 v-bind.sync=”{ title: doc.title }”，是無法正常作業的，因為在決議一個像這樣的復雜運算式的時候，有很多邊緣情況需要考慮，

2.prop

要學習這個修飾符，我們首先要搞懂兩個東西的區別，

其實attribute和property兩個單詞，翻譯出來都是屬性，但是《javascript高級程式設計》將它們翻譯為特性和屬性，以示區分

從上面我們可以看到如果直接使用v-bind系結，則默認會系結到dom節點的attribute，
為了

• 通過自定義屬性存盤變數，避免暴露資料
• 防止污染 HTML 結構

我們可以使用這個修飾符，如下

3.camel

由于HTML 特性是不區分大小寫的，

實際上會渲染為

這將導致渲染失敗，因為 SVG 標簽只認 viewBox，卻不知道 viewbox 是什么，
如果我們使用.camel修飾符，那它就會被渲染為駝峰名，
另，如果你使用字串模版，則沒有這些限制，

最后

不知道有沒有漏的，如果有漏的麻煩在評論區告知一聲，有建議或者意見也可以提一下，謝謝~

為此，為了學好前端，創建了一個學習交流裙，能夠與大家一起學習、交流，大家免費領取面試題，電子書籍，特效專案原始碼等干貨，

先奉上一些資料圖：

更多學習資料查看地址：web前端小白進階方法筆記,學習資料,面試題和視頻,專案原始碼免費領取（持續更新）

標籤：JavaScript

上一篇：Deno會在短期內取代Node嗎？

下一篇：Ref實作導航滾動定位