Vue.js巧妙運(yùn)用修飾符，完成更好的交互，并且?guī)湍愫笃诰S護(hù)代碼省下大量的時(shí)間

Vue.js中的修飾符

引言

正文

一、事件修飾符

.stop

.prevent

.capture

.self

.once

.passive

修飾符的組合使用

二、按鍵修飾符

三、系統(tǒng)修飾鍵

四、鼠標(biāo)按鈕修飾符

五、其他修飾符

.sync

.native

結(jié)束語(yǔ)

引言

其實(shí)我們?cè)谄綍r(shí)總會(huì)用到一些方法去處理我們的事件函數(shù)，比如阻止事件的默認(rèn)行為 、阻止事件冒泡等等。那在Vue.js中，對(duì)這些操作進(jìn)行了一個(gè)很簡(jiǎn)易的處理，那就是在我們綁定的事件后面加一個(gè)事件修飾符，這樣能讓我們一眼就能看出，該組件綁定了什么事件 、對(duì)事件做了什么處理，好了，我們來了解一下吧。

不定時(shí)有送書活動(dòng)，記得關(guān)注~

關(guān)注后回復(fù)對(duì)應(yīng)文字領(lǐng)取：【面試題】、【前端必看電子書】、【數(shù)據(jù)結(jié)構(gòu)與算法完整代碼】、【前端技術(shù)交流群】

正文

在本文我就不詳細(xì)介紹Vue.js是如何給組件綁定事件了的，大家都知道是通過v-on:事件="事件名" 或者它的語(yǔ)法糖 @事件="事件名"。

Vue.js為我們提供了很多不同種類的修飾符，例如事件修飾符 、按鍵修飾符 、鼠標(biāo)按鍵修飾符，我們就對(duì)這三種修飾符進(jìn)行詳細(xì)的介紹。

一、事件修飾符

首先，來看一下Vue.js為我們提供的事件修飾符有哪些吧。

.stop

未使用修飾符 .stop 的情況：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

當(dāng)我們點(diǎn)擊類名為grandson的div標(biāo)簽時(shí)，會(huì)打印以下內(nèi)容

div1被點(diǎn)擊 div2被點(diǎn)擊 div3被點(diǎn)擊

1

2

3

我們?cè)賮砜匆幌率褂昧诵揎椃?.stop 是什么樣子的：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

這時(shí)我們進(jìn)行同樣的操作，打印結(jié)果如下：

div1被點(diǎn)擊 div2被點(diǎn)擊

1

2

類名為father的div標(biāo)簽上的click事件并沒有被觸發(fā)，其實(shí)是因?yàn)樾揎椃?stop 相當(dāng)于 stopPropagation()的作用，阻止了事件繼續(xù)向上傳遞

.prevent

該修飾符就不多做掩飾了，相當(dāng)于 preventDefault() 的作用

.capture

該修飾符是將事件觸發(fā)順序提前，來繼續(xù)看上面那個(gè)例子，我們用了該修飾符后，是怎么樣一個(gè)情況

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

我們點(diǎn)擊最中間的元素，看看結(jié)果如何：

div1被點(diǎn)擊 div3被點(diǎn)擊 div2被點(diǎn)擊

1

2

3

我們可以看到，最外層的div使用了修飾符 .capture ，所以當(dāng)我們點(diǎn)擊最里面的div時(shí)，本應(yīng)該由內(nèi)向外依次觸發(fā)事件，但此時(shí)卻先觸發(fā)了最外層的div的事件，然后再按原本的順序依次觸發(fā)

.self

該修飾符根據(jù)字面意思也很好理解，就是只有當(dāng)自身觸發(fā)該事件才會(huì)調(diào)用處理的函數(shù)，我們來接著上面的例子來看

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

我們先來點(diǎn)擊類名為grandson的div，結(jié)果如下

div3被點(diǎn)擊 div1被點(diǎn)擊

1

2

我們?cè)賮睃c(diǎn)擊一下類名為child的div，結(jié)果如下

div2被點(diǎn)擊 div1被點(diǎn)擊

1

2

我們可以看到，當(dāng)點(diǎn)擊了最里面的div時(shí)，事件冒泡到中間的div，但因?yàn)槭褂昧诵揎椃?.self，所以它并沒有調(diào)用事件的處理函數(shù)

.once

該修飾符表示事件只能被觸發(fā)一次，我們來看例子

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

我們來對(duì)類名為grandson的div進(jìn)行第一次點(diǎn)擊，結(jié)果如下

div3被點(diǎn)擊 div2被點(diǎn)擊 div1被點(diǎn)擊

1

2

3

那我們對(duì)它進(jìn)行第二次點(diǎn)擊，結(jié)果如下

div2被點(diǎn)擊 div1被點(diǎn)擊

1

2

我們可以看到，因?yàn)樽顑?nèi)部的div使用了修飾符 .once，所以只有在第一次點(diǎn)擊它的時(shí)候，它才會(huì)調(diào)用事件處理函數(shù)，之后再點(diǎn)擊，就不會(huì)觸發(fā)了

.passive

這個(gè)修飾符也就不多做演示了，作用呢，就是使事件立即觸發(fā)默認(rèn)行為。比如我們給一個(gè)表單提交事件 submit設(shè)置了event.preventDefault()，阻止了表單提交的默認(rèn)行為，但我們對(duì)該事件使用了修飾符 .passive，點(diǎn)擊提交表單的時(shí)候，event.preventDefault() 就會(huì)失效，即仍然進(jìn)行表單提交的默認(rèn)行為。

注意

：但這里一定要注意，修飾符.prevent和修飾符 .passive不能一起使用，系統(tǒng)會(huì)忽略前者。接下來我們會(huì)介紹到修飾符的組合使用。

修飾符的組合使用

修飾符是可以組合使用的，類似這樣的.stop.once。我們來看看修飾符.stop 和修飾符.once一起使用會(huì)有什么效果

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

我們來點(diǎn)擊類名為grandson的div，結(jié)果如下

div3被點(diǎn)擊 div2被點(diǎn)擊

1

2

這里，因?yàn)閐iv2使用了修飾符 .stop，所以點(diǎn)擊事件沒有向上繼續(xù)傳遞。然后我們?cè)賮睃c(diǎn)擊一下，看看結(jié)果如何

div3被點(diǎn)擊 div1被點(diǎn)擊

1

2

因?yàn)閐iv2使用了修飾符 .once，所以第二次點(diǎn)擊以及接下來的點(diǎn)擊都不會(huì)觸發(fā)它的事件處理函數(shù)了。

二、按鍵修飾符

我們可以對(duì) keyup 或 keydown等鍵盤按鍵的事件進(jìn)行修飾符的使用。Vue.js給我們提供了一些常用按鍵的修飾符，我們來看一下

.enter //回車鍵 .tab //tab鍵 .delete //delete鍵和退格鍵 .esc //esc鍵 .space //空格鍵 .up //↑鍵 .down //↓鍵 .left //←鍵 .right //→鍵

1

2

3

4

5

6

7

8

9

我們只需要在事件的后面跟上一個(gè)按鍵修飾符就可以規(guī)定按哪個(gè)鍵才會(huì)觸發(fā)事件了。

鍵盤上那么多鍵，我們?nèi)绻?guī)定按別的鍵怎么辦？其實(shí)我們只需要自己對(duì)別的鍵進(jìn)行配置一下就可以了，例如

Vue.config.keyCodes.f1 = 112

1

這樣給全局配置完以后，我們就可以使用按鍵修飾符 .f1了

1

三、系統(tǒng)修飾鍵

我們?cè)谄綍r(shí)見過這樣一個(gè)需求，按住ctrl + f1，就可以觸發(fā)某些操作，所以Vue.js還提供了一些修飾鍵來幫助我們完成這樣的需求。

.ctrl .alt .shift .meta //該修飾鍵是作用于Mac系統(tǒng)的電腦的 .exact

1

2

3

4

5

修飾鍵可以配合事件使用，例如@click.ctrl='btnClick' 表示要按住 ctrl去點(diǎn)擊才會(huì)觸發(fā)事件；同時(shí)修飾鍵還能跟按鍵修飾符一起使用，例如 @keyup.alt.enter='keyUp' 表示按住alt的同時(shí)按住回車鍵才會(huì)觸發(fā)該事件。

但其實(shí)使用時(shí)我們會(huì)發(fā)現(xiàn)這樣一個(gè)情況，@keyup.alt.enter='keyUp'，我們按住 alt ，再按住一個(gè)空格鍵或者tab鍵，然后按住回車鍵，也可以觸發(fā)該事件。所以Vue.js新增了一個(gè)修飾符.exact，用來完成按鍵的精確觸發(fā)。

@keyup.alt.enter.exact='keyUp'，這樣使用了修飾符.exact以后，我們必須只有在按住alt和回車鍵時(shí)，才能觸發(fā)該事件了，再多按了一個(gè)鍵都不能觸發(fā)。

四、鼠標(biāo)按鈕修飾符

當(dāng)然了，鼠標(biāo)上還有三個(gè)鍵呢，即左鍵 、右鍵 、滾輪鍵，他們也有對(duì)應(yīng)的修飾符，分別是 .left 、.right 、.middle，這里也就不做多余的演示了。

五、其他修飾符

除了以上提到的修飾符，還有一些其它修飾符用于特定的情況，我們來了解一下

.sync

要了解該修飾符的作用，我們先來回顧一下父子組件之間通信的一個(gè)例子

子組件情況

展示父組件傳遞過來的變量title，并在點(diǎn)擊時(shí)，向父組件發(fā)送一個(gè)名為changeValue的事件，同時(shí)也傳遞過去了一個(gè)值。

//我們創(chuàng)建了個(gè)名為child-cpn的組件

…… props: ['title'], methods: { divClick() { this.$emit('changeValue', '我是改變后的值') } }

1

2

3

4

5

6

7

8

9

父組件情況

父組件將自己的變量origin_title傳遞給子組件，同時(shí)接收子組件傳遞過來的事件changeValue事件以及數(shù)據(jù)。

//父組件使用了子組件child-cpn …… data() { return { origin_title: '我是原始值' } }, methods: { changeValue(info) { this.origin_title = info } }

1

2

3

4

5

6

7

8

9

10

11

12

13

我們都知道父組件傳遞給子組件的數(shù)據(jù)是單向變化的，即只有當(dāng)父組件的數(shù)據(jù)改變，子組件獲得的數(shù)據(jù)才會(huì)跟著改變。所以這個(gè)例子中，子組件想改變這個(gè)值，通過子組件向父組件通信的方式，告訴父組件，你快把這個(gè)值給改一下，修改后的值我也發(fā)給你了。就這樣，父組件還需要監(jiān)聽子組件傳遞過來的事件，再用一個(gè)方法去處理該事件，就顯得很麻煩。

通過了解上面這個(gè)例子的需求，我們來引入我們的修飾符.sync，看看使用了這個(gè)修飾符，代碼會(huì)變得多簡(jiǎn)潔

子組件情況

子組件在向父組件通信時(shí)，傳遞的事件名需要改為這樣的格式：update:需要改變的變量名

//我們創(chuàng)建了個(gè)名為child-cpn的組件

…… props: ['title'], methods: { divClick() { this.$emit('update:title', '我是改變后的值') } }

1

2

3

4

5

6

7

8

9

父組件情況

父組件只需要在傳遞給子組件變量時(shí)，在變量名后面加一個(gè)修飾符.sync，這樣的話父組件中的origin_title就會(huì)直接改變成子組件傳遞過來的參數(shù)了。

//父組件使用了子組件child-cpn …… data() { return { origin_title: '我是原始值' } }

1

2

3

4

5

6

7

8

細(xì)心的小伙伴一定發(fā)現(xiàn)了，父組件在使用了修飾符.sync后，省去了@changeValue='changeValue' 和 changeValue(info) {this.origin_title = info}這兩部分代碼，變得十分的簡(jiǎn)潔。

注意

：

這里我還是要強(qiáng)調(diào)一遍哦，子組件在想父組件通信的時(shí)候，傳遞的事件參數(shù)必須是 unpdate:需要改變的變量名 這樣的格式，這是規(guī)定好的。

在我們使用了修飾符 .sync后，傳遞給子組件數(shù)據(jù)時(shí)，不能使用表達(dá)式的形式，例如這樣 :title.sync="origin_title + '哈哈' "，這樣是會(huì)報(bào)錯(cuò)的。

.native

該修飾符的作用比較簡(jiǎn)單，我就幾句話描述一下吧

//父組件使用了一個(gè)名為child-cpn的子組件，并監(jiān)聽他的click事件，結(jié)果是沒作用的

1

2

有經(jīng)驗(yàn)的人會(huì)知道，在組件的根元素上綁定原始的事件，是沒有作用的，不信你們可以自己動(dòng)手試一下。

但只要我們?cè)谠撌录竺媸褂眯揎椃?.natvie 就可以綁定上原始的事件了

//父組件使用了一個(gè)名為child-cpn的子組件，并監(jiān)聽他的click事件，成功綁定

1

2

結(jié)束語(yǔ)

修飾符的好處我都寫在文章的標(biāo)題上啦，謝謝大家的閱讀，我是Lpyexplore前端，喜歡的點(diǎn)個(gè)關(guān)注哦~

javaScript Vue

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。