Ⅹ-12側(cè)邊導(dǎo)航欄制作Ⅹ-12側(cè)邊導(dǎo)航欄制作掌握阿里云矢量圖標(biāo)庫的引用及使用方法掌握Vue中computed、defineProps等方法使用掌握ElementPlus中el-scrollbar、el-menu、el-image等組件的使用掌握Vue中父子組件之間的通信掌握在Vue項(xiàng)目中使用JSX語法編寫代碼掌握Vue中slot插槽的使用編寫注冊表單Ⅹ-12側(cè)邊導(dǎo)航欄制作編寫注冊表單Vue內(nèi)置方法的使用；ElementPlus組件使用；Vue父子組件使用及通信；Vue中slot插槽的使用；JSX語法使用；項(xiàng)目頁面切換；阿里云矢量圖標(biāo)庫使用；Ⅹ-12側(cè)邊導(dǎo)航欄制作你是一名web前端工程師，主管給您分配了新的工作任務(wù)，在構(gòu)建的管理系統(tǒng)項(xiàng)目中為了確定當(dāng)前的位置，通過將功能結(jié)構(gòu)可視化的方法，實(shí)現(xiàn)側(cè)邊導(dǎo)航欄功能。側(cè)邊導(dǎo)航欄功能，需要您把在router文件中定義的路由一一展示，并添加路由跳轉(zhuǎn)功能，選中和非選中的路由需要有顏色的區(qū)分。Ⅹ-12側(cè)邊導(dǎo)航欄制作學(xué)習(xí)任務(wù)Ⅹ-12側(cè)邊導(dǎo)航欄制作學(xué)習(xí)任務(wù)Ⅹ-12-S1側(cè)邊導(dǎo)航欄配置學(xué)習(xí)任務(wù)Ⅹ-12-S2導(dǎo)航菜單制作Ⅹ-12側(cè)邊導(dǎo)航欄制作學(xué)習(xí)任務(wù)Ⅹ-12-S1側(cè)邊導(dǎo)航欄配置任務(wù)要求：1.獨(dú)立完成學(xué)習(xí)任務(wù)1的練習(xí)題，將完成的答案填到相應(yīng)的空格處。2.我們將以小組工作的方式完成這個學(xué)習(xí)任務(wù)。3.能夠獨(dú)立完成側(cè)邊導(dǎo)航欄配置。Ⅹ-12側(cè)邊導(dǎo)航欄制作學(xué)習(xí)任務(wù)Ⅹ-12-S1側(cè)邊導(dǎo)航欄配置學(xué)習(xí)成果展示：1.閱讀并獨(dú)立完成任務(wù)第1題。2.通過VisualStudioCode對HTML頁面進(jìn)行編程。3.以小組工作的方式，各小組形成統(tǒng)一答案。4.選出代表，進(jìn)行展示講解。5.共同討論答案。Ⅹ-12側(cè)邊導(dǎo)航欄制作學(xué)習(xí)任務(wù)Ⅹ-12-S1側(cè)邊導(dǎo)航欄配置1.填空題1）在Vue項(xiàng)目可以通過安裝

插件使項(xiàng)目支持JSX語法；2）填寫項(xiàng)目中使用阿里云圖表依賴的五個文件。

①

；

②

；

③

；

④

；

⑤

；3）在icon.scss中添加下圖代碼的作用是

。Ⅹ-12側(cè)邊導(dǎo)航欄制作學(xué)習(xí)任務(wù)Ⅹ-12-S1側(cè)邊導(dǎo)航欄配置1.填空題1）在Vue項(xiàng)目可以通過安裝

@vitejs/plugin-vue

插件使項(xiàng)目支持JSX語法；2）填寫項(xiàng)目中使用阿里云圖表依賴的五個文件。

①

iconfont.scss

；

②

iconfont.js

；

③

iconfont.ttf

；

④

iconfont.woff

；

⑤

iconfont.woff2

；3）在icon.scss中添加下圖代碼的作用是

在組件中可以直接通過class=“圖標(biāo)名稱”來顯示圖標(biāo)

。Ⅹ-12側(cè)邊導(dǎo)航欄制作學(xué)習(xí)任務(wù)Ⅹ-12-S2導(dǎo)航菜單欄制作任務(wù)要求：1.獨(dú)立完成學(xué)習(xí)任務(wù)2的練習(xí)題，將完成的答案填到相應(yīng)的空格處。2.我們將以小組工作的方式完成這個學(xué)習(xí)任務(wù)。3.能夠獨(dú)立完成導(dǎo)航菜單欄制作。Ⅹ-12側(cè)邊導(dǎo)航欄制作學(xué)習(xí)任務(wù)Ⅹ-12-S2導(dǎo)航菜單欄制作學(xué)習(xí)成果展示：1.閱讀并獨(dú)立完成任務(wù)第1、2題。2.通過VisualStudioCode對HTML頁面進(jìn)行編程。3.以小組工作的方式，各小組形成統(tǒng)一答案。4.選出代表，進(jìn)行展示講解。5.共同討論答案。Ⅹ-12側(cè)邊導(dǎo)航欄制作學(xué)習(xí)任務(wù)Ⅹ-12-S2導(dǎo)航菜單欄制作1.選擇題，選擇一個正確的答案，將相應(yīng)字母填入題中括號內(nèi)。1）下列指令中，不能實(shí)現(xiàn)條件判斷的是？（

）Av-ifBv-elseCv-showDv-bind2）下列指令中，可以對表單元素進(jìn)行雙向數(shù)據(jù)綁定的是？

（）A

v-modelB

v-onC

v-bindDv-show3）下列選項(xiàng)中，關(guān)于computed屬性說法錯誤的是（

）A支持緩存，只有依賴數(shù)據(jù)發(fā)生改變，才會重新進(jìn)行計算B

每次使用計算屬性都會觸發(fā)回調(diào)函數(shù)的重新計算Ccomputed中的函數(shù)必須用return返回Dcomputed內(nèi)部的函數(shù)在調(diào)用時不需要加()4）下列CSS選擇器優(yōu)先級最高的是？（）A#idB.classNameC!importantDstyle=””Ⅹ-12側(cè)邊導(dǎo)航欄制作學(xué)習(xí)任務(wù)Ⅹ-12-S2導(dǎo)航菜單欄制作1.選擇題，選擇一個正確的答案，將相應(yīng)字母填入題中括號內(nèi)。5）v-for="(item,index)indatas",該循環(huán)中表示數(shù)組下標(biāo)的是（

）AitemBindexCdatas[item]Ddatas[index]6）下列選項(xiàng)中用來接受父組件傳值的方法是？

（）A

propsB

definePropsC

defineEmitsDemit7）動態(tài)組件經(jīng)常使用在路由控制或選項(xiàng)卡切換中，通過使用<component>元素，動態(tài)綁定到它的（

）屬性AnameB

srcCisDslot8）在Vue中，<slot>標(biāo)簽是組件內(nèi)部的？（）A

對象BHTML元素C屬性D占位符Ⅹ-12側(cè)邊導(dǎo)航欄制作學(xué)習(xí)任務(wù)Ⅹ-12-S2導(dǎo)航菜單欄制作1.選擇題，選擇一個正確的答案，將相應(yīng)字母填入題中括號內(nèi)。9）在組件內(nèi)實(shí)現(xiàn)路由切換需要使用（

）組件A<component>B<template>C<router-link>D<router-view>10）插槽（Slot）主要是在Vue的（

）中使用A

兄弟組件中B

父子組件中C

任意選項(xiàng)中D以上說法都錯誤Ⅹ-12側(cè)邊導(dǎo)航欄制作學(xué)習(xí)任務(wù)Ⅹ-12-S2導(dǎo)航菜單欄制作2.填空題。1）filter()是用于過濾數(shù)組的方法，返回新數(shù)組，原數(shù)組

；2）填寫下面Elementplus庫中el-menu菜單組件內(nèi)各屬性的作用。default-active：

；collapse：

；

collapse-transition：

；background-color：

；

text-color：

；active-text-color：

；

3.判斷題。1）在項(xiàng)目中可以通過useRoute()函數(shù)中的push方法來實(shí)現(xiàn)頁面跳轉(zhuǎn)（）；2）defineProps聲明的props的值是只讀的，不能修改（）；3）在組件內(nèi)使用defineProps，必須要先進(jìn)行導(dǎo)入才可以使用（）；Ⅹ-12側(cè)邊導(dǎo)航欄制作學(xué)習(xí)任務(wù)Ⅹ-12-S2導(dǎo)航菜單欄制作1.選擇題，選擇一個正確的答案，將相應(yīng)字母填入題中括號內(nèi)。1）下列指令中，不能實(shí)現(xiàn)條件判斷的是？（

D）Av-ifBv-elseCv-showDv-bind2）下列指令中，可以對表單元素進(jìn)行雙向數(shù)據(jù)綁定的是？

（C）A

v-modelB

v-onC

v-bindDv-show3）下列選項(xiàng)中，關(guān)于computed屬性說法錯誤的是（

B

）A支持緩存，只有依賴數(shù)據(jù)發(fā)生改變，才會重新進(jìn)行計算B

每次使用計算屬性都會觸發(fā)回調(diào)函數(shù)的重新計算Ccomputed中的函數(shù)必須用return返回Dcomputed內(nèi)部的函數(shù)在調(diào)用時不需要加()4）下列CSS選擇器優(yōu)先級最高的是？（C）A#idB.classNameC!importantDstyle=””Ⅹ-12側(cè)邊導(dǎo)航欄制作學(xué)習(xí)任務(wù)Ⅹ-12-S2導(dǎo)航菜單欄制作1.選擇題，選擇一個正確的答案，將相應(yīng)字母填入題中括號內(nèi)。5）v-for="(item,index)indatas",該循環(huán)中表示數(shù)組下標(biāo)的是（

B）AitemBindexCdatas[item]Ddatas[index]6）下列選項(xiàng)中用來接受父組件傳值的方法是？

（B）A

propsB

definePropsC

defineEmitsDemit7）動態(tài)組件經(jīng)常使用在路由控制或選項(xiàng)卡切換中，通過使用<component>元素，動態(tài)綁定到它的（C

）屬性AnameB

srcCisDslot8）在Vue中，<slot>標(biāo)簽是組件內(nèi)部的？（D）A

對象BHTML元素C屬性D占位符Ⅹ-12側(cè)邊導(dǎo)航欄制作學(xué)習(xí)任務(wù)Ⅹ-12-S2導(dǎo)航菜單欄制作1.選擇題，選擇一個正確的答案，將相應(yīng)字母填入題中括號內(nèi)。9）在組件內(nèi)實(shí)現(xiàn)路由切換需要使用（C

）組件A<component>B<template>C<router-link>D<router-view>10）插槽（Slot）主要是在Vue的（B

）中使用A

兄弟組件中B

父子組件中C

任意選項(xiàng)中D以上說法都錯誤Ⅹ-12側(cè)邊導(dǎo)航欄制作學(xué)習(xí)任務(wù)Ⅹ-12-S2導(dǎo)航菜單欄制作2.填空題。1）filter()是用于過濾數(shù)組的方法，返回新數(shù)組，原數(shù)組

不改變

；2）填寫下面Elementplus庫中el-menu菜單組件內(nèi)各屬性的作用。default-active：

默認(rèn)激活菜單的index

；collapse：

是否水平折疊收起菜單

；

collapse-transition：

是否開啟折疊動畫

；background-color：

菜單的背景色

；

text-color：

菜單的文字顏色

；active-text-color：

當(dāng)前激活菜單的文字顏色

；

3.判斷題。1）在項(xiàng)目中可以通過useRoute()函數(shù)中的push方法來實(shí)現(xiàn)頁面跳轉(zhuǎn)（錯誤）；2）defineProps聲明的props的值是只讀的，不能修改（正確）；3）在組件內(nèi)使用defineProps，必須要先進(jìn)行導(dǎo)入才可以使用（錯誤）；側(cè)邊導(dǎo)航欄制作請各小組討論，根據(jù)項(xiàng)目任務(wù)需求，制定項(xiàng)目實(shí)施流程圖，并將小組討論最終結(jié)果進(jìn)行案例展示。根