vue修飾符（搜集大全，表單、事件、鼠標按鍵等）

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

目錄

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

表單修飾符

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

• .lazy

<div> <input type="text" v-model="value"> <p>{{value}}</p> </div>

從這里我們可以看到，我們還在輸入的時候，光標還在的時候，下面的值就已經出來了，可以說是非常地實時。
但是有時候我們希望，在我們輸入完所有東西，光標離開才更新視圖。

<div> <input type="text" v-model.lazy="value"> <p>{{value}}</p> </div>

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

• .trim

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

<input type="text" v-model.trim="value">

為了讓你更清楚的看到，我改了一下樣式，不過問題不大，相信你已經清楚看到這個大大的hello左右兩邊沒有空格，盡管你在input框里敲爛了空格鍵。
需要注意的是，它只能過濾首尾的空格！首尾，中間的是不會過濾的

• .number

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

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

事件修飾符

• .stop

由於事件冒泡的機制，我們給元素綁定點擊事件的時候，也會觸發父級的點擊事件。

<div @click="shout(2)"> <button @click="shout(1)">ok</button> </div> //js shout(e){ console.log(e) } //1 //2

一鍵阻止事件冒泡，簡直方便得不行。相當於調用了event.stopPropagation()方法。

<div @click="shout(2)"> <button @click.stop="shout(1)">ok</button> </div> //只輸出1

• .prevent

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

<!-- 提交事件不再重載頁面 --> <form v-on:submit.prevent="onSubmit"></form>

注意：修飾符可以同時使用多個,但是可能會因為順序而有所不同。
用 v-on:click.prevent.self 會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。
也就是從左往右判斷~

• .self

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

<div class="blue" @click.self="shout(2)"> <button @click="shout(1)">ok</button> </div>

• .once

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

//鍵盤按壞都只能shout一次 <button @click.once="shout(1)">ok</button>

• .capture

從上面我們知道了事件的冒泡，其實完整的事件機制是：捕獲階段--目標階段--冒泡階段。
默認的呢，是事件觸發是從目標開始往上冒泡。
當我們加了這個.capture以后呢，我們就反過來了，事件觸發從包含這個元素的頂層開始往下觸發。

   <div @click.capture="shout(1)"> obj1 <div @click.capture="shout(2)"> obj2 <div @click="shout(3)"> obj3 <div @click="shout(4)"> obj4 </div> </div> </div> </div> // 1 2 4 3 

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

• .passive

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

<!-- 滾動事件的默認行為 (即滾動行為) 將會立即觸發 --> <!-- 而不會等待 `onScroll` 完成 --> <!-- 這其中包含 `event.preventDefault()` 的情況 --> <div v-on:scroll.passive="onScroll">...</div>

• .native

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

<My-component @click="shout(3)"></My-component>

必須使用.native來修飾這個click事件（即<My-component @click.native="shout(3)"></My-component>），可以理解為該修飾符的作用就是把一個vue組件轉化為一個普通的HTML標簽，
注意：使用.native修飾符來操作普通HTML標簽是會令事件失效的

鼠標按鈕修飾符

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

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

<button @click.right="shout(1)">ok</button> 

鍵值修飾符

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

• .keyCode

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

<input type="text" @keyup.keyCode="shout(4)">

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

//普通鍵 .enter .tab .delete //(捕獲“刪除”和“退格”鍵) .space .esc .up .down .left .right 

//系統修飾鍵 .ctrl .alt .meta .shift

可以通過全局 config.keyCodes 對象自定義按鍵修飾符別名：

// 可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112

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

<input type="text" @keyup.ctrl="shout(4)">

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

<input type="text" @keyup.ctrl.67="shout(4)">

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

      <button @mouseover.ctrl="shout(1)">ok</button> <button @mousedown.ctrl="shout(1)">ok</button> <button @click.ctrl.67="shout(1)">ok</button> 

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

• .exact (2.5新增)

我們上面說了這個系統修飾鍵，當我們像這樣<button type="text" @click.ctrl="shout(4)"></button>綁定了click鍵按下的事件，驚奇的是，我們同時按下幾個系統修飾鍵，比如ctrl shift點擊，也能觸發，可能有些場景我們只需要或者只能按一個系統修飾鍵來觸發（像制作一些快捷鍵的時候），而當我們按下ctrl和其他鍵的時候則無法觸發。那就這樣寫。
注意：這個只是限制系統修飾鍵的，像下面這樣書寫以后你還是可以按下ctrl + c，ctrl+v或者ctrl+普通鍵 來觸發，但是不能按下ctrl + shift +普通鍵來觸發。

<button type="text" @click.ctrl.exact="shout(4)">ok</button>

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

<input type="text" @keydown.enter.exact="shout('我被觸發了')">

v-bind修飾符

• .sync(2.3.0+ 新增)

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

//父親組件 <comp :myMessage="bar" @update:myMessage="func"></comp> //js func(e){ this.bar = e; }

//子組件js func2(){ this.$emit('update:myMessage',params); }

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

//父組件 <comp :myMessage.sync="bar"></comp> //子組件 this.$emit('update:myMessage',params);

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

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 }”，是無法正常工作的，因為在解析一個像這樣的復雜表達式的時候，有很多邊緣情況需要考慮。

• .prop

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

Property：節點對象在內存中存儲的屬性，可以訪問和設置。
Attribute：節點對象的其中一個屬性( property )，值是一個對象。
可以通過點訪問法 document.getElementById('xx').attributes 或者 document.getElementById('xx').getAttributes('xx') 讀取，通過 document.getElementById('xx').setAttribute('xx',value) 新增和修改。 在標簽里定義的所有屬性包括 HTML 屬性和自定義屬性都會在 attributes 對象里以鍵值對的方式存在。

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

//這里的id,value,style都屬於property //index屬於attribute //id、title等既是屬性，也是特性。修改屬性，其對應的特性會發生改變；修改特性，屬性也會改變 <input id="uid" title="title1" value="1" :index="index"> //input.index === undefined //input.attributes.index === this.index

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

• 通過自定義屬性存儲變量，避免暴露數據
• 防止污染 HTML 結構

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

<input id="uid" title="title1" value="1" :index.prop="index"> //input.index === this.index //input.attributes.index === undefined

• .camel

由於HTML 特性是不區分大小寫的。

<svg :viewBox="viewBox"></svg>

實際上會渲染為

<svg viewbox="viewBox"></svg>

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

new Vue({ template: '<svg :viewBox="viewBox"></svg>' })

最后

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