按鍵修飾符
在監(jiān)聽鍵盤事件時抒寂，我們經(jīng)常需要檢查詳細的按鍵臊泰。Vue 允許為 v-on 在監(jiān)聽鍵盤事件時添加按鍵修飾符：
常用的按鍵別名：
- .entrer
- .tab
- .esc
- .space
- .delete（捕獲“刪除”和”退格“鍵）
- .up
- .down
- .left
- .right
用法上和事件修飾符一樣澳淑，掛載在v-on:后面皆怕，語法：v-on:keyup.xxx=’yyy’
<input class = 'aaa' v-model="inputValue" @keyup.delete="onKey"/>
系統(tǒng)修飾符
可以用如下修飾符來實現(xiàn)僅在按下相應按鍵時才觸發(fā)鼠標或鍵盤事件的監(jiān)聽器
- .ctrl
- .alt
- .shift
- .meta
注意：在 Mac 系統(tǒng)鍵盤上宪巨，meta 對應 command 鍵 (?)轴术。在 Windows 系統(tǒng)鍵盤 meta 對應 Windows 徽標鍵 (?)。在 Sun 操作系統(tǒng)鍵盤上巫玻，meta 對應實心寶石鍵 (◆)丛忆。在其他特定鍵盤上，尤其在 MIT 和 Lisp 機器的鍵盤仍秤、以及其后繼產品熄诡，比如 Knight 鍵盤、space-cadet 鍵盤诗力，meta 被標記為“META”凰浮。在 Symbolics 鍵盤上，meta 被標記為“META”或者“Meta”苇本。
用法：
<input @keyup.alt.66="clear">
上面是當按下alt+b （66為b對應的keyCodes碼） 的時候出發(fā)clear函數(shù)
<div @click.ctrl="doSomething">Do something</div>
這個例子意思是 ctrl+鼠標單擊 觸發(fā)dosomething函數(shù)
請注意修飾鍵與常規(guī)按鍵不同袜茧，在和 keyup 事件一起用時，事件觸發(fā)時修飾鍵必須處于按下狀態(tài)瓣窄。換句話說笛厦，只有在按住 ctrl 的情況下釋放其它按鍵，才能觸發(fā) keyup.ctrl俺夕。而單單釋放 ctrl 也不會觸發(fā)事件裳凸。如果你想要這樣的行為，請為 ctrl 換用 keyCode：keyup.17劝贸。
.exact
.exact 修飾符允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件
<!-- 即使 Alt 或 Shift 被一同按下時也會觸發(fā) -->
<button @click.ctrl="onClick">A</button>
這種方式是不管按下幾個鍵姨谷，只要ctrl和鼠標左鍵按下 就一定會觸發(fā)onClick函數(shù)
<!-- 有且只有 Ctrl 被按下的時候才觸發(fā) -->
<button @click.ctrl.exact="onCtrlClick">A</button>
加上.exact修飾后，只有ctrl和鼠標左鍵按下才會觸發(fā)
<!-- 沒有任何系統(tǒng)修飾符被按下的時候才觸發(fā) -->
<button @click.exact="onClick">A</button>
注意：.exact 只對系統(tǒng)修飾符有效果映九，也就是說第二第三種情況菠秒，多按一個A,B,F什么的也是會觸發(fā)的
鼠標按鈕修飾符
- .left
- .right
- .middle
這些修飾符會限制處理函數(shù)僅響應特定的鼠標按鈕。
使用方法：
<button @click.middle ="onClick">A</button>
鼠標滾輪單擊觸發(fā)
Click默認是鼠標左鍵單擊
其他修飾符
- .lazy
在默認情況下氯迂，v-model在每次input事件觸發(fā)后將輸入框的值與數(shù)據(jù)進行同步 践叠，我們可以添加lazy修飾符，從而轉變?yōu)槭褂?change事件進行同步：
<!-- 在“change”時而非“input”時更新 -->
<input v-model.lazy="msg" >
- .number
如果想自動將用戶的輸入值轉為數(shù)值類型嚼蚀，可以給v-model添加.number修飾符：
<input v-model.number="age" type="number">
這通常很有用禁灼，因為即使在type="number"時，HTML 輸入元素的值也總會返回字符串轿曙。如果這個值無法被 parseFloat()解析弄捕，則會返回原始的值僻孝。
- .trim
如果要自動過濾用戶輸入的首尾空白字符，可以給 v-model 添加 trim 修飾符：
<input v-model.trim="msg">
同樣前面都有空格加上.trim后 將前后空格都去掉了
