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>'
})

最後

不知道有沒有漏的，若是有漏的麻煩在評論區告知一聲，有建議或者意見也能夠提一下，謝謝~