VUE 常用修飾符

.lazy

.number

.trim

'other'
>
v-model.trim
='trim'
>
ref=
'tr'
>
}p>
@click
='getstr'
>
獲取button
>
div>
>
newvue(,
methods:}}
)script
>

在事件處理程式中呼叫 event.preventdefault() 或 event.stoppropagation() 是非常常見的需求。儘管我們可以在方法中輕鬆實現這點，但更好的方式是：方法只有純粹的資料邏輯，而不是去處理 dom 事件細節。

修飾符：


@click.stop
="dothis"
>
button
>
@click.prevent
="dothis"
>
button
>
v-on:submit.prevent
="onsubmit"
>
form
>
v-on:submit.prevent
="onsubmit"
>
form
>
@click.stop.prevent
="dothis"
>
button
>
v-on:click.capture
="dothis"
>
...div
>
v-on:click.self
="dothat"
>
...div
>
@keyup.enter
="onenter"
>
@keyup.13
="onenter"
>
v-on:click.once
="dothis"
>
button
>
v-on=""
>
button
>

注意：

vue 允許為 v-on 在監聽鍵盤事件時新增按鍵修飾符進行鍵值檢查，省去查詢常用按鍵對應的 code值的麻煩：

// keycode 對應enter // 縮寫語法

全部的按鍵別名：

.enter => // enter鍵
.tab => // tab鍵
.delete  => // 刪除鍵
.esc => // 取消鍵
.space => // 空格鍵
.up => // 上
.down => // 下
.left => // 左
.right => // 右

實現僅在按下相應按鍵時才觸發滑鼠或鍵盤事件的***。

.ctrl .alt .shift

.meta

注意：在 mac 系統鍵盤上，meta 對應 command 鍵 (⌘)。在 windows 系統鍵盤 meta 對應 windows 徽標鍵 (⊞)。


@keyup.alt.67
="clear"
>
@click.ctrl
="dosomething"
>
do somethingdiv
>

注意：修飾鍵與常規按鍵不同，在和 keyup 事件一起用時，事件觸發時修飾鍵必須處於按下狀態。

按鍵keycode

0-948-57

a-z/a-z

65-90

f1-f24

112-135

backspace（退格）

8tab

9enter(回車)

13caps_lock(大寫鎖定)

20space（空格鍵）

32left(左箭頭)

37up(上箭頭)

38right(右箭頭)

39down(下箭頭)

vue常用修飾符

在開發的過程中,如果我們能夠熟練掌握vue的修飾符,就可以大大提高我們的開發效率每次資料改變,檢視都會發生改變只有游標離開之後,資料才會發生改變在進行傳遞引數或者登陸註冊的時候,經常會出現空格耽誤事的問題,這個修飾符就會很好的解決這一問題當輸入 name x name x 可以限制輸入框是數字...

vue修飾符與事件修飾符

前言在乙個控制項中使用修飾符可以對控制項或操作做出一定的改變或者約束修飾符作用 lazy v model在input事件秀實況中轉變為在change事件中同步 number 將使用者舒服的值轉換為number型別 trim 自動過濾使用者輸入的首尾空格 stop 阻止冒泡 prevent 阻止...

vue學習 vue修飾符

vue為v on或者的方式提供了事件修飾符，通過點表示的指令字尾來呼叫修飾符。如v on click.stop。stop 阻止事件向外冒泡 prevent 阻止預設行為 capture 將事件冒泡改為事件捕獲的方式 self 只會觸發自己的預設行為，也就是說只有在e.target e.curre...

VUE 常用修飾符

vue常用修飾符

vue修飾符與事件修飾符

vue學習 vue修飾符

相關推薦