事件修飾符的使用

<button @click.stop='func'>按鈕</button>

• stop 阻止冒泡(兼容) 等同于event.stopPropagation() 或 event.cancelBubble = true
• prevent 阻止默認(rèn)行為 等同于event.preventDefault()
• capture 設(shè)置事件在捕獲階段執(zhí)行
• once 事件只執(zhí)行一次,相當(dāng)于addEventListener的第三個(gè)參數(shù)的passive設(shè)置為true
• passive 設(shè)置過passive之后不會再阻止事件的默認(rèn)行為,即使有event.stopPropagation,相當(dāng)于設(shè)置addEventListener的第三個(gè)參數(shù)的passive為true
• self 當(dāng)target===this的時(shí)候執(zhí)行,即當(dāng)前元素本身觸發(fā)點(diǎn)擊事件時(shí)才執(zhí)行

按鍵修飾符

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

• .enter
• .tab
• .delete
• .esc
• .space
• .up
• .down
• .left
• .right

<input @keyup.enter='func'/>

只有按下enter鍵的時(shí)候函數(shù)才會執(zhí)行

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

系統(tǒng)鍵修飾符

• .ctrl
• .alt
• .shift
• .meta 對應(yīng)window的win鍵合mac的commond鍵

//shit + c
<input @keyup.shift.67='func'/>
//click + ctrl
<div @click.ctrl='func'>點(diǎn)擊</div>

系統(tǒng)修飾鍵可以與點(diǎn)擊事件keyCode一同使用

.exact修飾符用來精準(zhǔn)的控制系統(tǒng)按鍵的執(zhí)行方式

 //摁住shift + 任意鍵進(jìn)行點(diǎn)擊都會執(zhí)行
<div @click.shift='func'>點(diǎn)擊</div>
//有且僅有shift鍵被按下的時(shí)候才執(zhí)行
<div @click.shift.exact='func'></div>
//沒有任何系統(tǒng)修飾符時(shí)候才執(zhí)行
<div @click.exact='func'></div>

鼠標(biāo)按鍵修飾符

• .left
• .right
• .middle

 //鼠標(biāo)左鍵執(zhí)行
 <div @click.left="childClick"></div>
 //鼠標(biāo)右鍵執(zhí)行,并阻止默認(rèn)行為(取消右鍵菜單)
 <div @click.right="childClick"></div>
 //摁下鼠標(biāo)滾輪執(zhí)行
 <div @click.middle="childClick"></div>

表單修飾符

.lazy 用于優(yōu)化v-model,將數(shù)據(jù)更新延遲至失去焦點(diǎn),減少數(shù)據(jù)更新的頻率。

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

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

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

.trim 去除文本輸入中多余的空格,相當(dāng)于字符串的trim方法

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

總結(jié)

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

到此這篇關(guān)于Vue修飾符的使用詳解的文章就介紹到這了,更多相關(guān)Vue修飾符內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論