Vue修飾符

事件修飾符

• .prevent修飾符
• .stop修飾符
• .once修飾符

prevent修飾符

• 用於阻止默認事件行爲,至關於event.preventDefault()，例如a標籤默認跳轉

  <div id="app">
  <a @click.prevent="fn" href="https://kaiwu.lagou.com/">連接</a> // 能夠添加fn方法也能夠不加
  <a @click.prevent href="https://kaiwu.lagou.com/">連接</a>
  </div>

  ---

  stop修飾符

• 用於阻止事件傳播，至關於event.stopPropagation()。
• 元素在事件觸發後默認會產生事件冒泡，事件冒泡會致使，當前元素觸發後向上傳遞給父元素，並依次向外傳遞，若是外部某元素也存在相同事件時也會被觸發

點擊按鈕時，div的點擊事件也會觸發

正確寫法

<div @click="fn1">
  <button @click.stop="fn2">按鈕</button>
</div>

修飾符的結合使用

<div @click="fn1">
  <a @click.prevent.stop="fn2" href="xxx">連接</a>
</div>

---

once修飾符

• 用於設置事件只會觸發一次

  <div id="app">
  <button @click.once="fn2">按鈕</button>
  </div>

  ---

  passive修飾符

• passive這個修飾符會執行默認方法。大家可能會問，明明默認執行爲何會設置這樣一個修飾符。這就要說一下這個修飾符的本意了
• 【瀏覽器只有等內核線程執行到事件監聽器對應的JavaScript代碼時，才能知道內部是否會調用preventDefault函數來阻止事件的默認行爲，因此瀏覽器自己是沒有辦法對這種場景進行優化的。這種場景下，用戶的手勢事件沒法快速產生，會致使頁面沒法快速執行滑動邏輯，從而讓用戶感受到頁面卡頓。】
• 通俗點說就是每次事件產生，瀏覽器都會去查詢一下是否有preventDefault阻止該次事件的默認動做。咱們加上passive就是爲了告訴瀏覽器，不用查詢了，咱們沒用preventDefault阻止默認動做
• 通常用在滾動監聽，@scoll，@touchmove，由於滾動監聽過程當中，移動每一個像素都會產生一次事件，每次都使用內核線程查詢prevent會使滑動卡頓。咱們經過passive將內核線程查詢跳過，能夠大大提高滑動的流暢度

• 注：passive和prevent衝突，不能同時綁定在一個監聽器上

  self修飾符

• 只當在 event.target 是當前元素自身時觸發處理函數

  <div v-on:click.self="doThat">...</div>

  更多事件修飾符來自官網

---

按鍵修飾符

• 按鍵碼：按鍵碼指的是將 按鍵的按鍵碼 做爲修飾符使用，以標識按鍵的操做方式。

  <div id="app">
  <input type="text" @keyup="fn"> // 指定按鍵鬆開會觸發
  </div>

  var vm = new Vue({
  data:{
  },
  methods:{
    fn(event){
      console.log(event) // 內有code，key，keycode(被廢棄)
    }
  }
  }).$mount("#app")

  添加按鍵碼修飾符

  <div id="app">
  <input type="text" @keyup.49="fn"> // 只有keycode49能夠觸發
  </div>

  若是按鍵是字母,能夠修改成字母修飾符

  <div id="app">
  <input type="text" @keyup.a="fn"> // 只有a字母能夠觸發
  </div>

• 特殊按鍵：指的是鍵盤中相似esc、enter、delete等功能按鍵，爲了更好的兼容性,應首選內置別名。

• 不一樣設備keycode可能不一致，特殊按鍵用別名

  <div id="app">
  <input type="text" @keyup.esc="fn"> // 只有 esc 能夠觸發
  </div>

• 按鍵碼的修飾符組合

  <div id="app">
  <input type="text" @keyup.a.b.c="fn"> // a 或者 b 或者 c 均可以觸發
  </div>

更多按鍵修飾符來自官網

---

系統修飾符

• 系統按鍵指的是ctrl、alt 、shift、meta（windows鍵）等按鍵。
• 系統按鍵不單獨使用
• 系統按鍵一般與其餘按鍵組合使用，例如配合ctrl+c 來使用

<div id="app">
  <input type="text" @keyup.ctrl="fn"> // 點擊 ctrl+c
</div>

<div id="app">
  <input type="text" @keyup.ctrl.q ="fn"> // 只有 ctrl+q 才能觸發
</div>

---

鼠標按鍵修飾符

• 用於設置點擊事件由鼠標哪一個按鍵來完成。
• .left修飾符
• .right修飾符
• .middle修飾符（滾輪）

<div id="app">
  <input type="text" @keyup.left ="fn"> // 左鍵 才能觸發
</div>

---

v-model修飾符

• .trim修飾符
• .lazy修飾符
• .number修飾符

trim修飾符

• 用於自動過濾用戶輸入內容首尾兩端的空格。（input，textarea）

  <div id="app">
  <input type="text" v-model.trim="inputVal"> // input中首尾空格會被trim移除
  <p>{{ inputVal }}</p>
  </div>

  ---

  lazy修飾符

• 用於將v-model的觸發方式由 input事件 觸發更改成 change事件 觸發。

• 每次輸入完畢失去交點時才進行檢測，觸發

  <div id="app">
  <input type="text" v-model.lazy="inputVal"> // input只有失去焦點纔會更新
  <p>{{ inputVal }}</p>
  </div>

  ---

  number修飾符

• 用於自動將用戶輸入的值轉換爲數值類型，如沒法被parseFloat()轉換，則返回原始內容。
• input標籤輸入123，實際獲取的 vm.inputVal = "123",可使用 .number修飾符進行轉換