大家好，我是若川。最近組織了源碼共讀活動(dòng)，感興趣的可以加我微信?ruochuan12?參與，已進(jìn)行了三個(gè)多月，大家一起交流學(xué)習(xí)，共同進(jìn)步。

前言

vue簡(jiǎn)潔好用體現(xiàn)在很多個(gè)地方，比如其內(nèi)置了32+修飾符，可以很方便我們阻止冒泡、阻止默認(rèn)事件、鼠標(biāo)事件處理、系統(tǒng)鍵盤(pán)事件等等，讓我們可以快速搞定業(yè)務(wù)，簡(jiǎn)直不要太方便噢！！！

耽誤您15分鐘您可以收獲：

32+修飾符（包括事件修飾符、鼠標(biāo)修飾符、表單修飾符、系統(tǒng)修飾符等等）的含義和使用

如何利用webpack動(dòng)態(tài)注冊(cè)vue路由，再也不手寫(xiě)路由配置啦！

文章中例子都放在了github源碼上，也可以點(diǎn)擊直接看例子

如何動(dòng)態(tài)注冊(cè)路由？

文中的每個(gè)修飾符例子都由一個(gè)頁(yè)面承載，聰明的你肯定不想手動(dòng)引入幾十個(gè).vue文件并配置路由.

有什么辦法可以幫我們自動(dòng)完成路由注冊(cè)呢？

1. 文件目錄結(jié)構(gòu)

目錄結(jié)構(gòu)（已去除其他文件目錄）大概如下

├──?package.json └──?src├──?App.vue├──?main.js├──?router.js└──?views├──?About.vue├──?Home.vue└──?modifiers├──?capture.vue├──?once.vue├──?order.vue├──?passive.vue├──?prevent.vue├──?self.vue└──?stop.vue└──?...

2. 期望的路由配置

最終給到vue-router的配置大概長(zhǎng)下面這個(gè)樣子，每個(gè)配置最重要的部分分別是path、name和component

[{"path":?"/home","name":?"home","component":?{"name":?"Home","methods":?{},"staticRenderFns":?[],"_compiled":?true,"_scopeId":?"data-v-fae5bece","beforeCreate":?[null],"beforeDestroy":?[null],"__file":?"src/views/Home.vue"}},{"path":?"/modifiers/capture","name":?"modifiersCapture","component":?{"name":?"capture","methods":?{},"staticRenderFns":?[],"_compiled":?true,"_scopeId":?"data-v-63b4eeee","beforeCreate":?[null],"beforeDestroy":?[null],"__file":?"src/views/modifiers/capture.vue"}},...?//?其他路由配置 ]

3. require.context實(shí)現(xiàn)動(dòng)態(tài)注冊(cè)路由

借助webpack require.context 的能力，可以非常方便地實(shí)現(xiàn)上面目錄到路由配置的映射工作，源碼如下

const?registerRoutes?=?()?=>?{const?contextInfo?=?require.context('./views',?true,?/.vue$/)const?routes?=?contextInfo.keys().map((filePath)?=>?{//?filePath?形如?./Home.vue、./modifiers/capture.vue//?path我們希望是/home、/modifiers/capture//?所以需要把開(kāi)頭的./和.vue都替換為空const?path?=?filePath.toLowerCase().replace(/^\.|\.vue/g,?'')//?name的話將/home、/modifiers/capture轉(zhuǎn)成小駝峰即可//?把開(kāi)頭的/先替換掉，再把第一個(gè)/后的單詞變成大寫(xiě)就可以了const?name?=?path.replace(/^\//,?'').replace(/\/(\w)/,?($0,?$1)?=>?$1.toUpperCase())//?通過(guò)require去讀取.vue文件內(nèi)容const?component?=?require(`./views${filePath.replace(/^\./,?'')}`).defaultreturn?{path,name,component}})return?routes }

效果

經(jīng)過(guò)上面的簡(jiǎn)單處理，動(dòng)態(tài)注冊(cè)路由就完成啦！您也可以點(diǎn)擊vue-demos查看效果

事件修飾符

1. 阻止冒泡的兩種方式

<template><div?class="parent"?@click="onClickParent">我是爸爸<div?class="child"?@click="onClickChild">我是兒子</div></div>? </template>export?default?{name:?'stop',methods:?{onClickParent?()?{console.log('我是爸爸')},onClickChild?()?{console.log('我是兒子')}} }

點(diǎn)擊子節(jié)點(diǎn)的時(shí)候因?yàn)槭录芭莸木壒什粌H會(huì)打印出我是兒子還會(huì)打印我是爸爸。有什么辦法可以阻止子節(jié)點(diǎn)的事件冒泡呢？

stop2.gif

1 .stop

只要加.stop修飾符即可，阻止事件冒泡的及簡(jiǎn)方式，很方便是不是。

當(dāng)添加上.stop修飾符時(shí)，只會(huì)出現(xiàn)我是兒子

<template><div?class="parent"?@click="onClickParent">我是爸爸<div?class="child"?@click.stop="onClickChild">我是兒子</div></div>? </template>stop.gif

2. event.stopPropagation

當(dāng)然了，我們也可以通過(guò)調(diào)用event.stopPropagation來(lái)阻止冒泡。不過(guò)更加推薦修飾符的做法，這樣你的函數(shù)會(huì)更加專注在邏輯處理上，而不用關(guān)心DOM事件細(xì)節(jié)

export?default?{name:?'stop',methods:?{onClickChild?(event)?{console.log('我是兒子')event.stopPropagation()}} }stop.gif

2. 阻止默認(rèn)事件的兩種方式

vue中阻止冒泡有兩種方式，那阻止默認(rèn)事件呢？

1 .prevent

<template><div?class="prevent"><a?href="https://juejin.cn/"?@click="onNoPrevent">點(diǎn)擊跳轉(zhuǎn)掘金</a><br?/><br?/><a?href="https://juejin.cn/"?@click.prevent="onPrevent">阻止默認(rèn)事件，無(wú)法跳轉(zhuǎn)掘金</a></div> </template>export?default?{name:?'prevent',methods:?{onNoPrevent?()?{console.log('未阻止默認(rèn)事件')},onPrevent?()?{console.log('阻止默認(rèn)事件')}} }

只要添加.prevent輕松實(shí)現(xiàn)阻止默認(rèn)事件

prevent.gif

2.event.preventDefault()

和阻止冒泡一樣，我們也可以通過(guò)調(diào)用事件對(duì)象的preventDefault方法來(lái)阻止默認(rèn)事件

export?default?{name:?'prevent',methods:?{onPrevent?(event)?{console.log('阻止默認(rèn)事件')event.preventDefault()}} }

3 .capture

默認(rèn)情況下，事件流是以冒泡(由里向外)的形式傳遞的，如果想以捕獲（由外向里）的形式應(yīng)該怎么辦呢？

<template><div?class="capture?parent"?@click.capture="onClickParent">父節(jié)點(diǎn)<div?class="child"?@click.capture="onClickChild">自節(jié)點(diǎn)</div></div> </template>export?default?{name:?'capture',methods:?{onClickParent?()?{console.log('我是父節(jié)點(diǎn)')},onClickChild?()?{console.log('我是子節(jié)點(diǎn)')}} }

不加catpture修飾符，點(diǎn)擊子節(jié)點(diǎn)會(huì)陸續(xù)打印我是父節(jié)點(diǎn)以及我是子節(jié)點(diǎn)，加了之后，則是反過(guò)來(lái)了

capture.gif

4 .self

只有當(dāng)event.target是當(dāng)前元素自身時(shí)才會(huì)觸發(fā)事件回調(diào)函數(shù)

<template><div?class="self"?@click.self="onClickSelf"><div?class="inner"?@click="onClickInner"></div></div> </template>export?default?{name:?'self',methods:?{onClickSelf?()?{console.log('我是self節(jié)點(diǎn)')},onClickInner?()?{console.log('我是inner節(jié)點(diǎn)')}} }

不加self修飾符的話，點(diǎn)擊inner節(jié)點(diǎn)也會(huì)觸發(fā)self的事件，加了之后只有觸發(fā)事件的元素本身是self，才會(huì)打印出我是self節(jié)點(diǎn)

self.gif

暫停一下：修飾符的順序如何理解？

已經(jīng)回顧了4個(gè)修飾符，單獨(dú)使用的時(shí)候很容易理解，但是注意官網(wǎng)有這么一句話

image.png

怎么理解呢？我們來(lái)看兩個(gè)栗子

<template><div?class="order"><div?class="order-0"><a?href="https://juejin.cn/"?class="order-parent"?@click.self.prevent="onClickParent">我是父節(jié)點(diǎn)，會(huì)跳轉(zhuǎn)掘金<br?/><span?class="order-child"?@click="onClickChild">我是子節(jié)點(diǎn)</span></a><hr?/></div><div?class="order-2"><a?href="https://juejin.cn/"?class="order-parent"?@click.prevent.self="onClickParent">我是父節(jié)點(diǎn)，無(wú)法跳轉(zhuǎn)掘金<br?/><span?class="order-child"?@click="onClickChild">我是子節(jié)點(diǎn)</span></a></div></div>? </template>export?default?{name:?'order',methods:?{onClickParent?()?{console.log('我是父節(jié)點(diǎn)')},onClickChild?()?{console.log('我是子節(jié)點(diǎn)')}} }

您可以猜一下，上面的代碼會(huì)發(fā)生什么，以下三點(diǎn)是可以明確的？

首先可以明確的是點(diǎn)擊上面和下面的子節(jié)點(diǎn)都不會(huì)觸發(fā)父節(jié)點(diǎn)的點(diǎn)擊事件

點(diǎn)擊下面的父節(jié)點(diǎn)會(huì)打印出我是父節(jié)點(diǎn)，但是不會(huì)跳轉(zhuǎn)掘金

點(diǎn)擊上面的父節(jié)點(diǎn)會(huì)打印出我是父節(jié)點(diǎn),也不會(huì)跳轉(zhuǎn)掘金

但是點(diǎn)擊上面的子節(jié)點(diǎn)，父節(jié)點(diǎn)會(huì)不會(huì)跳轉(zhuǎn)至掘金呢？答案是會(huì)

為什么？

a@click.self.prevent="onClickParent"的意思是當(dāng)點(diǎn)擊的元素是a元素本身時(shí)，會(huì)阻止默認(rèn)事件（可以解釋3，不會(huì)發(fā)生跳轉(zhuǎn)），并且執(zhí)行onClickParent回調(diào)。

而點(diǎn)擊span元素時(shí)，由于冒泡的緣故，點(diǎn)擊事件會(huì)傳遞給a，但是此時(shí)a會(huì)判斷出該事件不是由自身觸發(fā)的也就不會(huì)阻止默認(rèn)事件(此時(shí)也就發(fā)生跳轉(zhuǎn)了)，當(dāng)然也不會(huì)觸發(fā)onClickParent回調(diào)

同理來(lái)我們分析一下a@click.prevent.self="onClickParent"

不管是子節(jié)點(diǎn)還是自身點(diǎn)擊，都是先阻止默認(rèn)事件，只有當(dāng)觸發(fā)點(diǎn)擊事件是a元素本身時(shí)才會(huì)執(zhí)行onClickParent回調(diào)函數(shù)。

order.gif

回過(guò)頭看，你理解事件的順序含義了嗎？

image.png

5. once

顧名思義，事件只會(huì)觸發(fā)一次

<template><div?class="once"?@click.once="onClickOnce">只觸發(fā)一次</div> </template>export?default?{name:?'once',methods:?{onClickOnce?()?{console.log('once，我只會(huì)觸發(fā)一次點(diǎn)擊事件回調(diào)')}} }

觸發(fā)一次點(diǎn)擊之后，任我再怎么點(diǎn)，回調(diào)怎也不會(huì)觸發(fā)了。

once.gif

6 .native

我們知道在自定義組件上，只能監(jiān)聽(tīng)自定義事件，一些原生事件（比如click）是沒(méi)有辦法直接觸發(fā)的，但是使用.native修飾符可以幫我們辦到這點(diǎn)

native.vue

<template><div?class="native-custom"><input?type="text"?@keydown="onKeydown"></div> </template>export?default?{name:?'nativeCustom',methods:?{onKeydown?()?{this.$emit('onKeydown')}} }

custom.vue

<template><div?class="native"><!--?加上.native之后原生事件才得以監(jiān)聽(tīng)成功?--><NativeCustom?@onKeydown="onKeydown"?@click.native="onClick"?/></div> </template>import?NativeCustom?from?'../../components/native.vue'export?default?{name:?'native',components:?{NativeCustom},methods:?{onKeydown?()?{console.log('onKeydown')},onClick?()?{console.log('onClick')}} }native.gif

7 .passive

vue對(duì)應(yīng)?addEventListener?中的?passive?選項(xiàng)提供了?.passive?修飾符

<!--?滾動(dòng)事件的默認(rèn)行為?(即滾動(dòng)行為)?將會(huì)立即觸發(fā)?-->? <!--?而不會(huì)等待?`onScroll`?完成?-->? <!--?這其中包含?`event.preventDefault()`?的情況?-->?<div?v-on:scroll.passive="onScroll">...</div>

這個(gè)修飾符對(duì)于滾動(dòng)性能的提升，一直沒(méi)找到合適的例子，跪求廣大掘友有例子啊

這個(gè)修飾符對(duì)于滾動(dòng)性能的提升，一直沒(méi)找到合適的例子，跪求廣大掘友有例子啊

這個(gè)修飾符對(duì)于滾動(dòng)性能的提升，一直沒(méi)找到合適的例子，跪求廣大掘友有例子啊

v-bind修飾符

8 .sync

當(dāng)我們想要在父組件和子組件之間對(duì)某個(gè)屬性值進(jìn)行雙向綁定時(shí),有什么便捷的方式？是的只要.sync修飾符即可辦到

父組件

<template><div?class="sync-parent">我是父組件:?{{?text?}}<Child?:text.sync="text"?/></div> </template>import?Child?from?'./child.vue'export?default?{name:?'SyncParent',data?()?{return?{text:?'parent'}},components:?{Child,} }

子組件

<template><div?class="child">我是子組件:?<input?type="text"?v-model="value"?@input="onInput"></div> </template>export?default?{name:?'child',props:?{text:?{type:?String}},data?()?{return?{value:?this.text}},methods:?{onInput?()?{//?注意這里，必須是update:xxx的形式xxx即屬性propthis.$emit('update:text',?this.value)}} }sync.gif

9 .camel

.camel?修飾符允許在使用 DOM 模板時(shí)將?v-bind?property 名稱駝峰化，例如 SVG 的?viewBox?property：

<svg?:view-box.camel="viewBox"></svg>

10 .prop

關(guān)于.prop修飾符官網(wǎng)只有這句話 .prop? 作為一個(gè) DOM property 綁定而不是作為 attribute 綁定。`。

有啥作用？

通過(guò)自定義屬性存儲(chǔ)變量，避免暴露數(shù)據(jù)

防止污染 HTML 結(jié)構(gòu)

比如有以下代碼

<template><div?class="prop"><div?class="prop-item"?:my-name="prop"></div>//?最終變成了?<div?my-name="hello?prop"?class="prop-item"></div><div?class="prop-item"?:my-name.prop="prop2"></div>//?最終變成了<div?class="prop-item"></div><button?@click="onGetResult">獲取結(jié)果</button></div> </template>export?default?{name:?'prop',data?()?{return?{prop:?'hello?prop',prop2:?'hello?prop2'}},methods:?{onGetResult?()?{const?$refProp?=?this.$refs.propconst?$refProp2?=?this.$refs.prop2console.log($refProp.getAttribute('my-name'))?//?hello?propconsole.log($refProp2.getAttribute('my-name'))?//?null}} }

從示例上可以看出未使用.prop修飾符的my-name屬性會(huì)綁定到dom節(jié)點(diǎn)的attribute，從而出現(xiàn)暴露的情況。

prop.gif

鼠標(biāo)修飾符

當(dāng)咱們想監(jiān)聽(tīng)用戶點(diǎn)擊了左鍵、右鍵或者中鍵時(shí)也有修飾符可以快捷使用，分別是.left、.right、middle，來(lái)看個(gè)例子試試

根據(jù)MDN MouseEvent.button，介紹。

image.png

在最外層div.mouse監(jiān)聽(tīng)mousedown事件，看下用戶點(diǎn)擊的是鼠標(biāo)哪個(gè)鍵，三個(gè)button分別用三個(gè)修飾符快捷方式監(jiān)聽(tīng)左鍵、中鍵、右鍵并打印出left、middle、right

<template><div?class="mouse"?@mousedown="onMousedown"><button?@click.left="onClickBtn('left')">left</button><button?@click.middle="onClickBtn('middle')">middle</button><button?@click.right="onClickBtn('right')">right</button></div> </template>export?default?{name:?'mouse',mounted?()?{},methods:?{onClickBtn?(msg)?{console.log(msg)},onMousedown?(event)?{const?mosueMsgMap?=?{0:?'鼠標(biāo)左鍵',1:?'鼠標(biāo)中鍵',2:?'鼠標(biāo)右鍵'}console.log('點(diǎn)擊了',?mosueMsgMap[event.button])}} }

沒(méi)有帶鼠標(biāo)回來(lái)，中鍵點(diǎn)擊暫時(shí)不能演示，后續(xù)會(huì)補(bǔ)上

mouse.gif

11 .left

同上例子，監(jiān)聽(tīng)鼠標(biāo)左鍵點(diǎn)擊

12 .right

同上例子，監(jiān)聽(tīng)鼠標(biāo)右鍵點(diǎn)擊

13 .middle

同上例子，監(jiān)聽(tīng)鼠標(biāo)中鍵點(diǎn)擊

表單相關(guān)修飾符

14 .trim

對(duì)于輸入的內(nèi)容，希望可以過(guò)濾首尾空格應(yīng)該怎么做呢？

<template><div?class="trim"><div?class="trim-item"><input?type="text"?v-model="name"><p>用戶名：<span>{{?name?}}</span></p></div><div?class="trim-item"><input?type="text"?v-model.trim="name2"><p>用戶名2：<span>{{?name2?}}</span></p></div></div> </template>export?default?{name:?'trim',data?()?{return?{name:?'',name2:?'',}},watch:?{name?(newVal)?{console.log(`'----${newVal}----'`)},name2?(newVal)?{console.log(`'----${newVal}----'`)},} }

.trim修飾符可以很方便做到

trim.gif

15 .lazy

v-model大家都很熟悉，默認(rèn)情況下，每次input事件觸發(fā)的時(shí)候都會(huì)將輸入框的值與其綁定的數(shù)據(jù)進(jìn)行實(shí)時(shí)同步。但是如果想要實(shí)現(xiàn)光標(biāo)離開(kāi)的時(shí)候再更新數(shù)據(jù)如何實(shí)現(xiàn)呢？

思路1： 綁定change事件，在事件回調(diào)中手動(dòng)獲取target的值

思路2： 直接使用.lazy修飾符即可達(dá)到效果

<template><div?class="lazy"><div?class="lazy-item"><input?type="text"?v-model="text"><p>無(wú).lazy:?{{?text?}}</p></div><div?class="lazy-item"><input?type="text"?v-model.lazy="text2"><p>.lazy:?{{?text2?}}</p></div></div> </template>export?default?{name:?'lazy',data?()?{return?{text:?'',text2:?''}} }

可以看到添加了.lazy修飾符之后，第二個(gè)輸入框輸入的值不會(huì)實(shí)時(shí)反應(yīng)在下面，而是光標(biāo)離開(kāi)實(shí)，text2的數(shù)據(jù)才更新了

lazy.gif

16 .number

我們知道input輸入框的type哪怕是number得到的值的類型也是string，如果我們想直接拿到number類型的數(shù)據(jù)，有不想麻煩的手動(dòng)轉(zhuǎn)換應(yīng)該怎么辦呢？

<template><div?class="number"><div?class="number-item"><p>無(wú).number?</p><input?type="number"?v-model="number"></div><div?class="number-item"><p>type:text?.number?</p><input?type="text"?v-model.number="number1"></div><div?class="number-item"><p>type:number?.number?</p><input?type="number"?v-model.number="number2"></div></div> </template>export?default?{name:?'lazy',data?()?{return?{number:?0,number1:?'',number2:?'',}},watch:?{number?(newVal)?{console.log(typeof?newVal,?newVal)},number1?(newVal)?{console.log(typeof?newVal,?newVal)},number2?(newVal)?{console.log(typeof?newVal,?newVal)},} }

第一個(gè)輸入框的類型是number，但是得到的值是string

第二個(gè)輸入框的類型是text,但是添加了number修飾符，得到的值可以是number（如果這個(gè)值無(wú)法被?parseFloat()?解析，則會(huì)返回原始的值。）

第三個(gè)輸入框的類型是number，最后得到的值也是number

number.gif

系統(tǒng)修飾符

當(dāng)點(diǎn)擊事件或者鍵盤(pán)事件需要系統(tǒng)鍵同時(shí)按下才觸發(fā)時(shí).ctrl、.alt、.shift、.meta可以幫大忙噢！

如下代碼

全局監(jiān)聽(tīng)keydown事件，嘗試看.ctrl、.alt、.shift、.meta是否被按下

分別給四個(gè)按鈕加上 .ctrl、.alt、.shift、.meta修飾符并配合點(diǎn)擊事件，驗(yàn)證是否同時(shí)按下指定按鍵，再點(diǎn)擊才會(huì)生效

注明：電腦ctrl鍵 + 點(diǎn)擊估計(jì)和瀏覽器快捷配置沖突了，導(dǎo)致沒(méi)觸發(fā)

<template><div?class="system"><p>{{?msg?}}</p><div?class="buttons"><button?@click.ctrl="onClickButon('ctrl')">ctrl</button><button?@click.alt="onClickButon('alt')">alt</button><button?@click.shift="onClickButon('shift')">shift</button><button?@click.meta="onClickButon('meta')">meta</button></div></div>?? </template>export?default?{name:?'system',data?()?{return?{msg:?''}},mounted?()?{this.onListenSystemKeyDown()},methods:?{onListenSystemKeyDown?()?{document.addEventListener('keydown',?(event)?=>?{let?msg?=?'按下了'if?(event.ctrlKey)?{msg?+=?'ctrl鍵'}?else?if?(event.altKey)?{msg?+=?'alt鍵'}?else?if?(event.shiftKey)?{msg?+=?'shift鍵'}?else?if?(event.metaKey)?{msg?+=?'meta鍵'}?else?{msg?+=?'其他鍵'}this.msg?=?msg},?false)},onClickButon?(key)?{console.log(`只有同時(shí)按下${key}鍵，點(diǎn)擊事件才會(huì)發(fā)生`)}} }system.gif

17 .ctrl

僅在按下ctrl按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤(pán)事件的監(jiān)聽(tīng)器，詳細(xì)例子請(qǐng)看上面

18 .alt

僅在按下alt按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤(pán)事件的監(jiān)聽(tīng)器，詳細(xì)例子請(qǐng)看上面

19 .shift

僅在按下shift按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤(pán)事件的監(jiān)聽(tīng)器，詳細(xì)例子請(qǐng)看上面

20 .meta

僅在按下meta按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤(pán)事件的監(jiān)聽(tīng)器，詳細(xì)例子請(qǐng)看上面

21 .exact

嚴(yán)格來(lái)說(shuō)這.exact不屬于系統(tǒng)修飾符，只是上面例子的寫(xiě)法有一個(gè)現(xiàn)象，同時(shí)按下幾個(gè)系統(tǒng)修飾鍵（例如alt和shift）既可以觸發(fā).alt也可以觸發(fā).shift。

還是用上面的例子，看一下下面的gif, 此時(shí)我同時(shí)按下了alt和shift，對(duì)應(yīng)的兩個(gè)事件都可以觸發(fā)

system2.gif

只想某個(gè)系統(tǒng)修飾鍵按下時(shí)才觸發(fā)點(diǎn)擊

沒(méi)有任何系統(tǒng)修飾符被按下的時(shí)候才觸發(fā)點(diǎn)擊

要實(shí)現(xiàn)上面的需求.exact就派上用場(chǎng)了，用上面的例子稍作改造

<template><div?class="extra"><p>{{?msg?}}</p><div?class="buttons"><button?@click.ctrl.exact="onClickButon('ctrl')">ctrl</button><button?@click.alt.exact="onClickButon('alt')">alt</button><button?@click.shift.exact="onClickButon('shift')">shift</button><button?@click.meta.exact="onClickButon('meta')">meta</button><button?@click.exact="onClickButon('非系統(tǒng)鍵')">非系統(tǒng)鍵</button></div></div>?? </template>export?default?{name:?'extra',data?()?{return?{msg:?''}},mounted?()?{this.onListenSystemKeyDown()},methods:?{onListenSystemKeyDown?()?{document.addEventListener('keydown',?(event)?=>?{let?msg?=?'按下了'if?(event.ctrlKey)?{msg?+=?'ctrl鍵'}?else?if?(event.altKey)?{msg?+=?'alt鍵'}?else?if?(event.shiftKey)?{msg?+=?'shift鍵'}?else?if?(event.metaKey)?{msg?+=?'meta鍵'}?else?{msg?+=?'其他鍵'}this.msg?=?msg},?false)},onClickButon?(key)?{console.log(`只有同時(shí)按下${key}鍵，點(diǎn)擊事件才會(huì)發(fā)生`)}} }extra.gif

按鍵修飾符

在監(jiān)聽(tīng)鍵盤(pán)事件時(shí)，我們經(jīng)常需要檢查詳細(xì)的按鍵再執(zhí)行對(duì)應(yīng)的邏輯，vue也為我們內(nèi)置了至少11+的按鍵修飾符。

如下代碼，我們分別給enter、tab、delete等按鍵指定了keydown事件，當(dāng)在指定的輸入框中按下指定的鍵盤(pán)，會(huì)打印出enter、tab、delete等，其他按鍵在輸入框中無(wú)法觸發(fā)該console

<template><div?class="key-modifiers"><div?class="key-modifiers-item">enter:<input?type="text"?@keydown.enter="onKeydown('enter')"></div><div?class="key-modifiers-item">tab:<input?type="text"?@keydown.tab="onKeydown('tab')"></div>??<div?class="key-modifiers-item">delete:<input?type="text"?@keydown.delete="onKeydown('delete')"></div>??<div?class="key-modifiers-item">esc:<input?type="text"?@keydown.esc="onKeydown('esc')"></div>??<div?class="key-modifiers-item">space:<input?type="text"?@keydown.space="onKeydown('space')"></div>?<div?class="key-modifiers-item">up:<input?type="text"?@keydown.up="onKeydown('up')"></div>??<div?class="key-modifiers-item">down:<input?type="text"?@keydown.down="onKeydown('down')"></div>?<div?class="key-modifiers-item">left:<input?type="text"?@keydown.left="onKeydown('left')"></div>??<div?class="key-modifiers-item">right:<input?type="text"?@keydown.right="onKeydown('right')"></div>??<div?class="key-modifiers-item">page-down:<input?type="text"?@keydown.page-down="onKeydown('page-down')"></div>??<div?class="key-modifiers-item">page-up:<input?type="text"?@keydown.page-up="onKeydown('page-up')"></div>??</div> </template>export?default?{name:?'keyModifiers',methods:?{onKeydown?(keyName)?{console.log(keyName)}} }key-modifiers.gif

22 .enter

在按下enter按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤(pán)事件的監(jiān)聽(tīng)器，詳細(xì)例子請(qǐng)看上面

23 .tab

在按下tab按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤(pán)事件的監(jiān)聽(tīng)器，詳細(xì)例子請(qǐng)看上面

24 .delete

在按下delete按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤(pán)事件的監(jiān)聽(tīng)器，詳細(xì)例子請(qǐng)看上面

25 .esc

在按下esc按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤(pán)事件的監(jiān)聽(tīng)器，詳細(xì)例子請(qǐng)看上面

26 .space

在按下space按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤(pán)事件的監(jiān)聽(tīng)器，詳細(xì)例子請(qǐng)看上面

27 .up

在按下up按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤(pán)事件的監(jiān)聽(tīng)器，詳細(xì)例子請(qǐng)看上面

28 .down

在按下down按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤(pán)事件的監(jiān)聽(tīng)器，詳細(xì)例子請(qǐng)看上面

29 .left

在按下left按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤(pán)事件的監(jiān)聽(tīng)器，詳細(xì)例子請(qǐng)看上面

30 .right

在按下right按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤(pán)事件的監(jiān)聽(tīng)器，詳細(xì)例子請(qǐng)看上面

31 .page-down

在按下(fn + down)按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤(pán)事件的監(jiān)聽(tīng)器，詳細(xì)例子請(qǐng)看上面

32 .page-up

在按下(fn + up)按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤(pán)事件的監(jiān)聽(tīng)器，詳細(xì)例子請(qǐng)看上面

如何自定義按鍵修飾符

vue本身給我們內(nèi)置了很多實(shí)用的按鍵修飾符，大部分情況下可以滿足我們的日常需求了，那么有沒(méi)有辦法可以自定義按鍵修飾符呢？

通過(guò)以下配置即可定義一個(gè)屬于我們自己的按鍵修飾符, 比如我們定義q為按下q的快捷鍵。

Vue.config.keyCodes?=?{q:?81 }<div?class="custom"><input?type="text"?@keydown.q="f1Keydown"> </div>export?default?{name:?'custom',methods:?{f1Keydown?()?{console.log('按下了q')}} }custom.gif

---

最近組建了一個(gè)江西人的前端交流群，如果你是江西人可以加我微信?ruochuan12?私信 江西?拉你進(jìn)群。

推薦閱讀

1個(gè)月，200+人，一起讀了4周源碼
我歷時(shí)3年才寫(xiě)了10余篇源碼文章，但收獲了100w+閱讀

老姚淺談：怎么學(xué)JavaScript？

我在阿里招前端，該怎么幫你（可進(jìn)面試群）

·················?若川簡(jiǎn)介?·················

你好，我是若川，畢業(yè)于江西高校?，F(xiàn)在是一名前端開(kāi)發(fā)“工程師”。寫(xiě)有《學(xué)習(xí)源碼整體架構(gòu)系列》10余篇，在知乎、掘金收獲超百萬(wàn)閱讀。
從2014年起，每年都會(huì)寫(xiě)一篇年度總結(jié)，已經(jīng)寫(xiě)了7篇，點(diǎn)擊查看年度總結(jié)。
同時(shí)，最近組織了源碼共讀活動(dòng)，幫助1000+前端人學(xué)會(huì)看源碼。公眾號(hào)愿景：幫助5年內(nèi)前端人走向前列。

識(shí)別上方二維碼加我微信、拉你進(jìn)源碼共讀群

今日話題

略。歡迎分享、收藏、點(diǎn)贊、在看我的公眾號(hào)文章~

總結(jié)

以上是生活随笔為你收集整理的【建议收藏】面试官贼喜欢问的 32+ vue 修饰符，你掌握几种啦？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。