1.事件修飾符
vue為v-on提供了事件修飾符某残,通過點(.)表示的指令后綴來調(diào)用修飾符。
阻止點擊事件冒泡侣集。等同于JavaScript中的event.stopPropagation()
.prevent
防止執(zhí)行預(yù)設(shè)的行為(如果事件可取消谣殊,則取消該事件澄惊,而不停止事件的進(jìn)一步傳播)箩言,等同于JavaScript中的event.preventDefault()硬贯,prevent等同于JavaScript的event.preventDefault(),用于取消默認(rèn)事件陨收。
.capture
與事件冒泡的方向相反饭豹,事件捕獲由外到內(nèi),捕獲事件:嵌套兩三層父子關(guān)系鸵赖,然后所有都有點擊事件,點擊子節(jié)點拄衰,就會觸發(fā)從外至內(nèi) 父節(jié)點-》子節(jié)點的點擊事件
.self
只會觸發(fā)自己范圍內(nèi)的事件它褪,不包含子元素
.once
只執(zhí)行一次,如果我們在@click事件上添加.once修飾符翘悉,只要點擊按鈕只會執(zhí)行一次茫打。
.passive
Vue 還對應(yīng) addEventListener 中的 passive 選項提供了 .passive 修飾符
?.passive 修飾符尤其能夠提升移動端的性能。不要把 .passive 和 .prevent 一起使用妖混,因為 .prevent 將會被忽略老赤,同時瀏覽器可能會向你展示一個警告。請記住源葫,.passive 會告訴瀏覽器你不想阻止事件的默認(rèn)行為。
事件修飾符還可以串聯(lián)
注:使用修飾符時砖瞧,順序很重要息堂;相應(yīng)的代碼會以同樣的順序產(chǎn)生。因此块促,用 v-on:click.prevent.self 會阻止所有的點擊荣堰,而 v-on:click.self.prevent 只會阻止對元素自身的點擊。
2.鍵盤修飾符
在JavaScript事件中除了前面所說的事件竭翠,還有鍵盤事件振坚,也經(jīng)常需要監(jiān)測常見的鍵值。在Vue中允許v-on在監(jiān)聽鍵盤事件時添加關(guān)鍵修飾符斋扰。記住所有的keyCode比較困難渡八,所以Vue為最常用的鍵盤事件提供了別名:
.enter:回車鍵
.tab:制表鍵
.delete:含delete和backspace鍵
.esc:返回鍵
.space: 空格鍵
.up:向上鍵
.down:向下鍵
.left:向左鍵
.right:向右鍵
3.系統(tǒng)修飾鍵
可以用如下修飾符來實現(xiàn)僅在按下相應(yīng)按鍵時才觸發(fā)鼠標(biāo)或鍵盤事件的監(jiān)聽器。
.ctrl
.alt
.shift
.meta
注意:在 Mac 系統(tǒng)鍵盤上传货,meta 對應(yīng) command 鍵 (?)屎鳍。在 Windows 系統(tǒng)鍵盤 meta 對應(yīng) Windows 徽標(biāo)鍵 (?)。在 Sun 操作系統(tǒng)鍵盤上问裕,meta 對應(yīng)實心寶石鍵 (◆)逮壁。在其他特定鍵盤上,尤其在 MIT 和 Lisp 機器的鍵盤粮宛、以及其后繼產(chǎn)品窥淆,比如 Knight 鍵盤、space-cadet 鍵盤巍杈,meta 被標(biāo)記為“META”忧饭。在 Symbolics 鍵盤上,meta 被標(biāo)記為“META”或者“Meta”筷畦。
.exact修飾符
.exact 修飾符允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件眷昆。
鼠標(biāo)按鈕修飾符
鼠標(biāo)修飾符用來限制處理程序監(jiān)聽特定的滑鼠按鍵。常見的有:
.left
.right
.middle
這些修飾符會限制處理函數(shù)僅響應(yīng)特定的鼠標(biāo)按鈕。
自定義按鍵修飾符別名
在Vue中可以通過config.keyCodes自定義按鍵修飾符別名亚斋。
4.修飾符
在改變后才觸發(fā)(也就是說只有光標(biāo)離開input輸入框的時候值才會改變)
(2).number
將輸出字符串轉(zhuǎn)為Number類型·(雖然type類型定義了是number類型作媚,但是如果輸入字符串,輸出的是string)
(3).trim
自動過濾用戶輸入的首尾空格