Ⅹ-13頂部導(dǎo)航欄制作Ⅹ-13頂部導(dǎo)航欄制作掌握Vue中defineEmits等方法使用掌握ElementPlus中el-dropdown、el-breadcrumb等組件的使用掌握面包屑導(dǎo)航功能的實現(xiàn)掌握Vue中父子組件之間的通信編寫注冊表單Ⅹ-13頂部導(dǎo)航欄制作編寫注冊表單側(cè)邊導(dǎo)航欄縮放；面包屑導(dǎo)航實現(xiàn)；下拉菜單實現(xiàn)；退出登錄功能實現(xiàn)；Ⅹ-13頂部導(dǎo)航欄制作您是一名web前端工程師，主管給您分配了新的任務(wù)，需要您在管理系統(tǒng)中實現(xiàn)頂部導(dǎo)航欄功能，導(dǎo)航欄中需要顯示當前頁面的名稱，顯示頭像和退出登錄功能，還可以實現(xiàn)對側(cè)邊導(dǎo)航欄的折疊功能。Ⅹ-13頂部導(dǎo)航欄制作學(xué)習(xí)任務(wù)Ⅹ-13頂部導(dǎo)航欄制作學(xué)習(xí)任務(wù)Ⅹ-13-S1頂部導(dǎo)航欄配置學(xué)習(xí)任務(wù)Ⅹ-13-S2導(dǎo)航欄制作Ⅹ-13頂部導(dǎo)航欄制作學(xué)習(xí)任務(wù)Ⅹ-13-S1頂部導(dǎo)航欄配置任務(wù)要求：1.獨立完成學(xué)習(xí)任務(wù)1的練習(xí)題，將完成的答案填到相應(yīng)的空格處。2.我們將以小組工作的方式完成這個學(xué)習(xí)任務(wù)。3.能夠獨立完成頂部導(dǎo)航欄配置。Ⅹ-13頂部導(dǎo)航欄制作學(xué)習(xí)任務(wù)Ⅹ-13-S1頂部導(dǎo)航欄配置學(xué)習(xí)成果展示：1.閱讀并獨立完成任務(wù)第1、2題。2.通過VisualStudioCode對HTML頁面進行編程。3.以小組工作的方式，各小組形成統(tǒng)一答案。4.選出代表，進行展示講解。5.共同討論答案。Ⅹ-13頂部導(dǎo)航欄制作學(xué)習(xí)任務(wù)Ⅹ-13-S1頂部導(dǎo)航欄配置1.填空題1）在項目中創(chuàng)建

文件存放全局變量信息，在組件中使用

調(diào)用，通過settings.”變量名”獲取定義的值；2.根據(jù)說明，補充以下代碼。1）在Vuex模塊中，定義count屬性為0，定義addCount方法，每次觸發(fā)該方法修改count屬性的值+1。Ⅹ-13頂部導(dǎo)航欄制作學(xué)習(xí)任務(wù)Ⅹ-13-S1頂部導(dǎo)航欄配置1.填空題1）在項目中創(chuàng)建

settings.js

文件存放全局變量信息，在組件中使用

importsettingsfrom“@/settings”

調(diào)用，通過settings.”變量名”獲取定義的值；2.根據(jù)說明，補充以下代碼。1）在Vuex模塊中，定義count屬性為0，定義addCount方法，每次觸發(fā)該方法修改count屬性的值自增+1。Ⅹ-13頂部導(dǎo)航欄制作學(xué)習(xí)任務(wù)Ⅹ-13-S2導(dǎo)航欄制作任務(wù)要求：1.獨立完成學(xué)習(xí)任務(wù)2的練習(xí)題，將完成的答案填到相應(yīng)的空格處。2.我們將以小組工作的方式完成這個學(xué)習(xí)任務(wù)。3.能夠獨立完成導(dǎo)航欄制作。Ⅹ-13頂部導(dǎo)航欄制作學(xué)習(xí)任務(wù)Ⅹ-13-S2導(dǎo)航欄制作學(xué)習(xí)成果展示：1.閱讀并獨立完成任務(wù)第1題。2.通過VisualStudioCode對HTML頁面進行編程。3.以小組工作的方式，各小組形成統(tǒng)一答案。4.選出代表，進行展示講解。5.共同討論答案。Ⅹ-13頂部導(dǎo)航欄制作學(xué)習(xí)任務(wù)Ⅹ-13-S2導(dǎo)航欄制作1.選擇題，選擇一個正確的答案，將相應(yīng)字母填入題中括號內(nèi)。1）下面選項中能夠?qū)崿F(xiàn)頁面單擊事件綁定的代碼是？（

）Av-on:enterBv-on:clickC

v-on:mouseenterDv-on:doubleclick2）下列選項中能夠監(jiān)聽狀態(tài)變化的參數(shù)是？

（）A

filtersB

watchC

computedDcomponents3）v-for指令需要為每一項提供一個唯一（

）屬性AkeyBvalueCobjectDindex4）關(guān)于Flex布局主軸描述錯誤的是？（）A

Flex布局默認的主軸是X軸Bflex-direction取值為row，可以將主軸設(shè)置為X軸Cflex-direction取值為column，可以將主軸設(shè)置為Y軸Dflex-direction默認取值是columnⅩ-13頂部導(dǎo)航欄制作學(xué)習(xí)任務(wù)Ⅹ-13-S2導(dǎo)航欄制作1.選擇題，選擇一個正確的答案，將相應(yīng)字母填入題中括號內(nèi)。5）關(guān)于Vuex說法錯誤的是（

）Aactions通過commit觸發(fā)mutations中的方法進行狀態(tài)更新Bmutation中的方法按照規(guī)定最好不要涉及異步方法Cdatas[item]Ddatas[index]7）運行下面代碼，頁面中輸出的結(jié)果是（）A

一等B

二等C三等D四等Ⅹ-13頂部導(dǎo)航欄制作學(xué)習(xí)任務(wù)Ⅹ-13-S2導(dǎo)航欄制作1.選擇題，選擇一個正確的答案，將相應(yīng)字母填入題中括號內(nèi)。1）下面選項中能夠?qū)崿F(xiàn)頁面單擊事件綁定的代碼是？（

B）Av-on:enterBv-on:clickC

v-on:mouseenterDv-on:doubleclick2）下列選項中能夠監(jiān)聽狀態(tài)變化的參數(shù)是？

（B）A

filtersB

watchC

computedDcomponents3）v-for指令需要為每一項提供一個唯一（A

）屬性AkeyBvalueCobjectDindex4）關(guān)于Flex布局主軸描述錯誤的是？（D）A

Flex布局默認的主軸是X軸Bflex-direction取值為row，可以將主軸設(shè)置為X軸Cflex-direction取值為column，可以將主軸設(shè)置為Y軸Dflex-direction默認取值是columnⅩ-13頂部導(dǎo)航欄制作學(xué)習(xí)任務(wù)Ⅹ-13-S2導(dǎo)航欄制作1.選擇題，選擇一個正確的答案，將相應(yīng)字母填入題中括號內(nèi)。5）關(guān)于Vuex說法錯誤的是（

C

）Aactions通過commit觸發(fā)mutations中的方法進行狀態(tài)更新Bmutation中的方法按照規(guī)定最好不要涉及異步方法Cajax一般放在mutations中，把獲取到的數(shù)據(jù)存儲到state中DVuex的狀態(tài)存儲是響應(yīng)式的7）運行下面代碼，頁面中輸出的結(jié)果是（C）A

一等B

二等C三等D四等Ⅹ-13頂部導(dǎo)航欄制作學(xué)習(xí)任務(wù)Ⅹ-13-S2導(dǎo)航欄制作學(xué)習(xí)成果展示：1.閱讀并獨立完成任務(wù)第2、3題。2.通過VisualStudioCode對HTML頁面進行編程。3.以小組工作的方式，各小組形成統(tǒng)一答案。4.選出代表，進行展示講解。5.共同討論答案。Ⅹ-13頂部導(dǎo)航欄制作學(xué)習(xí)任務(wù)Ⅹ-13-S2導(dǎo)航欄制作2.填空題。1）更改Vuex的store中的狀態(tài)的唯一方法是提交

mutations

；2）在Vue組件內(nèi)通過

defineEmits

實現(xiàn)子組件向父組件的事件傳遞；3）在頁面中通過CSS中

transform

屬性，實現(xiàn)元素的旋轉(zhuǎn)、縮放、移動等操作；4）在Vuex中user模塊內(nèi)定義了name屬性，在組件內(nèi)可以通過

獲取name屬性的值；5）在CSS中給元素設(shè)置

cursor:pointer

屬性實現(xiàn)鼠標經(jīng)過或點擊有小手樣式；6）在Vue組件內(nèi)通過設(shè)置

transition

標簽實現(xiàn)元素組件的過渡和動畫效果；3.判斷題。1）子組件向父組件傳值，通過defineEmits觸發(fā)父組件的自定義事件進行傳值（正確）；2）在使用flex布局中設(shè)置justify-content:space-between可以使容器內(nèi)元素兩端對齊（正確）；Ⅹ-13頂部導(dǎo)航欄制作學(xué)習(xí)任務(wù)Ⅹ-13-S2導(dǎo)航欄制作學(xué)習(xí)成果展示：1.閱讀并獨立完成任務(wù)第4題。2.通過VisualStudioCode對HTML頁面進行編程。3.以小組工作的方式，各小組形成統(tǒng)一答案。4.選出代表，進行展示講解。5.共同討論答案。Ⅹ-13頂部導(dǎo)航欄制作學(xué)習(xí)任務(wù)Ⅹ-13-S2導(dǎo)航欄制作4.根據(jù)提示完成下面代碼補充。1）在Vue組件內(nèi)可以通過route.path來獲取當前路由信息，可以通過watch來完成數(shù)據(jù)監(jiān)聽，可以通過console.log()完成數(shù)據(jù)打印

①監(jiān)聽頁面路由變化，并把打印當前路由信息Ⅹ-13頂部導(dǎo)航欄制作學(xué)習(xí)任務(wù)Ⅹ-13-S2導(dǎo)航欄制作4.根據(jù)提示完成下面代碼補充。1）在Vue組件內(nèi)可以通過route.path來獲取當前路由信息，可以通過watch來完成數(shù)據(jù)監(jiān)聽，可以通過console.log()完成數(shù)據(jù)打印

①監(jiān)聽頁面路由變化，并把打印當前路由信息頂部導(dǎo)航欄制作請各小組討論，根據(jù)項目任務(wù)需求，制定項目實施流程圖，并將小組討論最終結(jié)果進行案例展示。根據(jù)上述所學(xué)，完成注冊表單設(shè)計，并使用CSS對注冊表單進行美化。限時20min將小組討論結(jié)果謄寫到工作頁中，注意要鉛筆（流程圖要橫平豎直）限時10min頂部導(dǎo)航欄制作根據(jù)項目實施流程圖，有些步驟內(nèi)容等內(nèi)容需要進行實現(xiàn)方式確認，請每組進行站立會議，根據(jù)計劃對項目步驟流程進行細化，根據(jù)步驟設(shè)計實現(xiàn)方式,填寫工作頁中《站立決策卡》。限時30min頂部導(dǎo)航欄制作根據(jù)計劃及決策內(nèi)容，對項目進行實施，填寫實施步驟，對實施步驟的結(jié)果進行選擇是否實現(xiàn)，并根據(jù)自身情況填寫工作頁《項目實施卡》。限時120min頂部導(dǎo)航欄制作頁面檢查完成開發(fā)工作后，使用瀏覽器打開HTML文件，請根據(jù)頁面檢查表，對各自頁面進行目檢，將檢查結(jié)果填入表中序號檢查內(nèi)容檢查結(jié)果附注1頁面內(nèi)容是否缺失是〇

否〇

2頁面內(nèi)布局是否合理是〇

否〇

3頁面是否符合任務(wù)需求是〇