Vue修飾符的使用詳解

Posted on by

事件修飾符的使用

<button @click.stop='func'>按鈕</button>
  • stop 阻止冒泡(兼容) 等同於event.stopPropagation() 或 event.cancelBubble = true
  • prevent 阻止默認行為 等同於event.preventDefault()
  • capture 設置事件在捕獲階段執行
  • once 事件隻執行一次,相當於addEventListener的第三個參數的passive設置為true
  • passive 設置過passive之後不會再阻止事件的默認行為,即使有event.stopPropagation,相當於設置addEventListener的第三個參數的passive為true
  • self 當target===this的時候執行,即當前元素本身觸發點擊事件時才執行

按鍵修飾符

vue提供瞭一些按鍵修飾符,如space、arrawLeft、arrawright、enter、esc等。使用這些修飾符隻有按下指定按鍵才會執行對應的事件,其它的key可以通過keycode自行判斷。

  • .enter
  • .tab
  • .delete
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
<input @keyup.enter='func'/>

隻有按下enter鍵的時候函數才會執行

有一些按鍵在ie9中有不同的key值,按鍵修飾符對此做瞭兼容

系統鍵修飾符

  • .ctrl
  • .alt
  • .shift
  • .meta 對應window的win鍵合mac的commond鍵
//shit + c
<input @keyup.shift.67='func'/>
//click + ctrl
<div @click.ctrl='func'>點擊</div>

系統修飾鍵可以與點擊事件keyCode一同使用

.exact修飾符用來精準的控制系統按鍵的執行方式

 //摁住shift + 任意鍵進行點擊都會執行
<div @click.shift='func'>點擊</div>
//有且僅有shift鍵被按下的時候才執行
<div @click.shift.exact='func'></div>
//沒有任何系統修飾符時候才執行
<div @click.exact='func'></div>

鼠標按鍵修飾符

  • .left
  • .right
  • .middle
 //鼠標左鍵執行
 <div @click.left="childClick"></div>
 //鼠標右鍵執行,並阻止默認行為(取消右鍵菜單)
 <div @click.right="childClick"></div>
 //摁下鼠標滾輪執行
 <div @click.middle="childClick"></div>

表單修飾符

.lazy 用於優化v-model,將數據更新延遲至失去焦點,減少數據更新的頻率。

<input v-model.lazy='val'/>

.number 將輸入的文本類型轉為數字,不合法的值會在失去焦後被清除(與type=number效果相同)

<input type='text' v-model.number='val'/>

.trim 去除文本輸入中多餘的空格,相當於字符串的trim方法

<input type='text' v-model.trim='val'/>

總結

  • Vue的修飾符包含瞭事件修飾符、按鍵修飾符、系統鍵修飾符、exact修飾符、鼠標按鍵修飾符、表單修飾符。
  • 事件修飾符包含stop、once、capture、prevent等,按鍵修飾符包含enter、esc、delete、left等,系統鍵修飾符包含alt、ctrl、shift、meta(系統鍵,win或command),鼠標按鍵修飾符包含left、right、middle,表單修飾符包含lazy、trim、number。
  • exact用於更精準的控制系統鍵。
  • lazy在表單輸入元素失去焦點的時候才會更新vue的數據。
  • 能使用修飾符的時候盡量使用修飾符,修飾符具有兼容性。
  • 修飾符可以使用多個,順序不同效果也不同。

到此這篇關於Vue修飾符的使用詳解的文章就介紹到這瞭,更多相關Vue修飾符內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：