Ⅹ-11登錄頁面制作Ⅹ-11登錄頁面制作掌握使用sass完成頁面布局掌握Vue.js中v-if、v-model、v-bind、v-on等指令的使用掌握在項目內(nèi)ElementPlus的引用以及el-form、el-input、el-button等內(nèi)置組件的使用掌握網(wǎng)絡數(shù)據(jù)請求掌握Vue項目內(nèi)路由切換和跳轉(zhuǎn)編寫注冊表單Ⅹ-11登錄頁面制作編寫注冊表單Vue指令、生命周期；ElementPlus組件；頁面布局、排版；數(shù)據(jù)雙向綁定網(wǎng)絡數(shù)據(jù)請求路由配置，頁面跳轉(zhuǎn)；Ⅹ-11登錄頁面制作你是一名web前端工程師，為了確保管理系統(tǒng)顯示的數(shù)據(jù)不會被所有人任意的查看，主管給您分配了新的任務，希望您能設計一個登錄界面，頁面有登錄表單，表單中包括用戶名、密碼、驗證碼等輸入框和登錄按鈕。您還需要設計登錄的流程以及校驗條件，只允許輸入了正確的用戶名、密碼和驗證碼后方可進入管理系統(tǒng)，確保系統(tǒng)的安全性。對輸入信息有誤的需給出相應的提示。Ⅹ-11登錄頁面制作學習任務Ⅹ-11登錄頁面制作學習任務Ⅹ-11-S1登錄頁面配置學習任務Ⅹ-11-S2登錄頁內(nèi)容、樣式制作學習任務Ⅹ-11-S3登錄功能實現(xiàn)Ⅹ-11登錄頁面制作學習任務Ⅹ-11-S1登錄頁面配置任務要求：1.獨立完成學習任務1的練習題，將完成的答案填到相應的空格處。2.我們將以小組工作的方式完成這個學習任務。3.能夠獨立完成登錄頁面配置。Ⅹ-11登錄頁面制作學習任務Ⅸ-1-S1HTML基本標簽應用學習成果展示：1.閱讀并獨立完成任務第1、2、3題。2.通過VisualStudioCode對HTML頁面進行編程。3.以小組工作的方式，各小組形成統(tǒng)一答案。4.選出代表，進行展示講解。5.共同討論答案。Ⅹ-11登錄頁面制作學習任務Ⅹ-11-S1登錄頁面配置1.補全下面登錄頁面路由，設置登錄頁為隱藏狀態(tài)。Ⅹ-11登錄頁面制作學習任務Ⅹ-11-S1登錄頁面配置2.根補全下面登錄API信息，設置請求方式為POST。Ⅹ-11登錄頁面制作學習任務Ⅹ-11-S1登錄頁面配置3.選擇題，選擇一個正確的答案，將相應字母填入題中括號內(nèi)。1）請求代碼應該寫在vuex的哪個屬性中？（）AstateBgettersCmutationsDactions2）下列選項中關(guān)于三元運算符的說法中，正確的是？（）A

三元運算符第一個表達式的結(jié)果必須是boolean類型值B

三元運算符第一個表達式的結(jié)果可以是任意類型的值C

三元運算符只能得到基本類型的結(jié)果D

以上說法都不對3）以下表達式返回結(jié)果是!0?1:2？（）A0BfalseC1D24）下列說法正確的是？（）A

使用JSON.parse()方法可以將任意字符串轉(zhuǎn)換為Json對象BJSON.stringify()方法可以將任意字符串轉(zhuǎn)換為Json對象CJSON.stringify()方法只能將Json對象轉(zhuǎn)換為字符串DJSON.stringify()方法只能將Json對象或者數(shù)組轉(zhuǎn)換為字符串Ⅹ-11登錄頁面制作學習任務Ⅹ-11-S1登錄頁面配置3.選擇題，選擇一個正確的答案，將相應字母填入題中括號內(nèi)。5）Vuex實例對象中類似于computed計算屬性功能的選項是？（）AstateBmutationsCgettersDactions6）關(guān)于Vuex說法錯誤的是？（

）Aactions通過commit觸發(fā)mutations中的方法進行狀態(tài)變更BVuex是單項數(shù)據(jù)流變更數(shù)據(jù)Cajax一般放在mutations中，把獲取到的數(shù)據(jù)存儲state中DVuex可以實現(xiàn)組件間的傳值Ⅹ-11登錄頁面制作學習任務Ⅹ-11-S1登錄頁面配置1.補全下面登錄頁面路由，設置登錄頁為隱藏狀態(tài)。Ⅹ-11登錄頁面制作學習任務Ⅹ-11-S1登錄頁面配置2.根補全下面登錄API信息，設置請求方式為POST。Ⅹ-11登錄頁面制作學習任務Ⅹ-11-S1登錄頁面配置3.選擇題，選擇一個正確的答案，將相應字母填入題中括號內(nèi)。1）請求代碼應該寫在vuex的哪個屬性中？（D）AstateBgettersCmutationsDactions2）下列選項中關(guān)于三元運算符的說法中，正確的是？（

A

）A

三元運算符第一個表達式的結(jié)果必須是boolean類型值B

三元運算符第一個表達式的結(jié)果可以是任意類型的值C

三元運算符只能得到基本類型的結(jié)果D

以上說法都不對3）以下表達式返回結(jié)果是!0?1:2？（

C

）A0BfalseC1D24）下列說法正確的是？（A）A

使用JSON.parse()方法可以將任意字符串轉(zhuǎn)換為Json對象BJSON.stringify()方法可以將任意字符串轉(zhuǎn)換為Json對象CJSON.stringify()方法只能將Json對象轉(zhuǎn)換為字符串DJSON.stringify()方法只能將Json對象或者數(shù)組轉(zhuǎn)換為字符串Ⅹ-11登錄頁面制作學習任務Ⅹ-11-S1登錄頁面配置3.選擇題，選擇一個正確的答案，將相應字母填入題中括號內(nèi)。5）Vuex實例對象中類似于computed計算屬性功能的選項是？（C）AstateBmutationsCgettersDactions6）關(guān)于Vuex說法錯誤的是？（

C

）Aactions通過commit觸發(fā)mutations中的方法進行狀態(tài)變更BVuex是單項數(shù)據(jù)流變更數(shù)據(jù)Cajax一般放在mutations中，把獲取到的數(shù)據(jù)存儲state中DVuex可以實現(xiàn)組件間的傳值Ⅹ-11登錄頁面制作學習任務Ⅹ-11-S1登錄頁面配置學習成果展示：1.閱讀并獨立完成任務第4、5題。2.通過VisualStudioCode對HTML頁面進行編程。3.以小組工作的方式，各小組形成統(tǒng)一答案。4.選出代表，進行展示講解。5.共同討論答案。Ⅹ-11登錄頁面制作學習任務Ⅹ-11-S1登錄頁面配置4.填空題。1）Vuex中儲存狀態(tài)在

中，通過

觸發(fā)

中的函數(shù)來改變儲存狀態(tài)；2）在promise中，resolve，reject分別表示的意思是什么？resolve:

；

reject:

；3）mutations中的事件處理函數(shù)可以接受

作為參數(shù)，即初始數(shù)據(jù)；5.判斷題。1）actions中的事件方法接收參數(shù)只能是commit對象，主要是用來完成狀態(tài)提交（）2）Vuex的狀態(tài)存儲是響應式的，當store中數(shù)據(jù)狀態(tài)發(fā)生變化，那么頁面中的store數(shù)據(jù)也發(fā)生相應變化（）Ⅹ-11登錄頁面制作學習任務Ⅹ-11-S1登錄頁面配置4.填空題。1）Vuex中儲存狀態(tài)在

state

中，通過

commit

觸發(fā)

mutations

中的函數(shù)來改變儲存狀態(tài)；2）在promise中，resolve，reject分別表示的意思是什么？resolve:

異步操作執(zhí)行成功后的回調(diào)函數(shù)

；

reject:

異步操作執(zhí)行失敗后的回調(diào)函數(shù)

；3）mutations中的事件處理函數(shù)可以接受

state

作為參數(shù)，即初始數(shù)據(jù)；5.判斷題。1）actions中的事件方法接收參數(shù)只能是commit對象，主要是用來完成狀態(tài)提交（錯誤）2）Vuex的狀態(tài)存儲是響應式的，當store中數(shù)據(jù)狀態(tài)發(fā)生變化，那么頁面中的store數(shù)據(jù)也發(fā)生相應變化（正確）Ⅹ-11登錄頁面制作學習任務Ⅹ-11-S2登錄頁面內(nèi)容、樣式制作任務要求：1.獨立完成學習任務2的練習題，將完成的答案填到相應的空格處。2.我們將以小組工作的方式完成這個學習任務。3.能夠獨立完成登錄頁面制作。Ⅹ-11登錄頁面制作學習任務Ⅹ-11-S2登錄頁面內(nèi)容、樣式制作學習成果展示：1.閱讀并獨立完成任務第1、2題。2.通過VisualStudioCode對HTML頁面進行編程。3.以小組工作的方式，各小組形成統(tǒng)一答案。4.選出代表，進行展示講解。5.共同討論答案。Ⅹ-11登錄頁面制作學習任務Ⅹ-11-S2登錄頁面內(nèi)容、樣式制作1.選擇題，選擇一個正確的答案，將相應字母填入題中括號內(nèi)。1）<stylescoped>語句中scoped屬性的作用是？（）A指定樣式是否生效B指定樣式的引入方式C

三元運算符只能得到基本類型的結(jié)果D以上說法都不對2）雙向綁定v-model修飾符中（

）可以將用戶輸入的內(nèi)容轉(zhuǎn)換為數(shù)值AtrimBnumberClazy3）下列關(guān)于v-model的說法，哪項是不正確的?（

）Av-model能實現(xiàn)雙向綁定Bv-model它負責監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)Cv-model是內(nèi)置指令，不能用在自定義組件上D對input使用v-model，實際上是指定其:value和:input4）v-if指令用于條件性地渲染內(nèi)容，內(nèi)容只會在指令的表達式返回（

）值時被渲染A0B1CtrueDfalseⅩ-11登錄頁面制作學習任務Ⅹ-11-S2登錄頁面內(nèi)容、樣式制作3.選擇題，選擇一個正確的答案，將相應字母填入題中括號內(nèi)。1）<stylescoped>語句中scoped屬性的作用是？（D）A指定樣式是否生效B指定樣式的引入方式C

三元運算符只能得到基本類型的結(jié)果D以上說法都不對2）雙向綁定v-model修飾符中（B

）可以將用戶輸入的內(nèi)容轉(zhuǎn)換為數(shù)值AtrimBnumberClazy3）下列關(guān)于v-model的說法，哪項是不正確的?（

C

）Av-model能實現(xiàn)雙向綁定Bv-model它負責監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)Cv-model是內(nèi)置指令，不能用在自定義組件上D對input使用v-model，實際上是指定其:value和:input4）v-if指令用于條件性地渲染內(nèi)容，內(nèi)容只會在指令的表達式返回（C）值時被渲染A0B1CtrueDfalseⅩ-11登錄頁面制作學習任務Ⅹ-11-S1登錄頁面配置2.根據(jù)活頁式教材登錄表單效果圖，對下面代碼按說明進行補充1）對表單容器進行樣式設計，設置容器定位，距離頂部50%，距離左邊25%，配置表單水平居中，寬度為275px，配置盒子模型，容器圓角設置為圓角半徑為10px。Ⅹ-11登錄頁面制作學習任務Ⅹ-11-S1登錄頁面配置2.根據(jù)活頁式教材登錄表單效果圖，對下面代碼按說明進行補充1）對表單容器進行樣式設計，設置容器定位，距離頂部50%，距離左邊25%，配置表單水平居中，寬度為275px，配置盒子模型，容器圓角設置為圓角半徑為10px。Ⅹ-11登錄頁面制作學習任務Ⅹ-11-S1登錄頁面配置2.根據(jù)活頁式教材登錄表單效果圖，對下面代碼按說明進行補充2）對標題區(qū)域進行CSS樣式設計，設置字體大小為30px，顏色為#37a59d，字體加粗，外邊距距底20px。3）對驗證碼區(qū)域進行CSS樣式設計，外層容器設置flex布局，驗證碼圖片設置寬度110px，內(nèi)邊距距左10px。Ⅹ-11登錄頁面制作學習任務Ⅹ-11-S1登錄頁面配置2.根據(jù)活頁式教材登錄表單效果圖，對下面代碼按說明進行補充4）對登錄按鈕區(qū)域進行CSS樣式設計，設置寬度為100%，背景色為#37a59d。Ⅹ-11登錄頁面制作學習任務Ⅹ-11-S3登錄功能實現(xiàn)任務要求：1.獨立完成學習任務3的練習題，將完成的答案填到相應的空格處。2.我們將以小組工作的方式完成這個學習任務。3.能夠獨立完成用戶登錄功能。Ⅹ-11登錄頁面制作學習任務Ⅹ-11-S3登錄功能實現(xiàn)學習成果展示：1.閱讀并獨立完成任務第1、2題。2.通過VisualStudioCode對HTML頁面進行編程。3.以小組工作的方式，各小組形成統(tǒng)一答案。4.選出代表，進行展示講解。5.共同討論答案。Ⅹ-11登錄頁面制作學習任務Ⅹ-11-S3登錄功能實現(xiàn)1.選擇題，選擇一個正確的答案，將相應字母填入題中括號內(nèi)。1）關(guān)于vue.js中ref的說明，以下選項中描述錯誤的是？（）A在模板內(nèi)使用時要加上value屬性B返回一個響應式且可改變的ref對象C

接受一個參數(shù)值Dref必須要從Vue中引用才能使用2）下列生命周期選項中，表示Vue實例被掛在后執(zhí)行的是？（）AonMountedBonActivatedConBeforeMountDonUpdated3）下面選項中，可以實現(xiàn)actions中事件處理函數(shù)狀態(tài)分發(fā)的是？（

）AmutationsBactions()Ccommit()Ddispatch()Ⅹ-11登錄頁面制作學習任務Ⅹ-11-S1登錄頁面配置2.填空題。1）Element-plus中，form組件提供了表單驗證的功能，只需要通過

屬性傳入約定的驗證規(guī)則，并將form-Item的

屬性設置為需校驗的字段名即可。2）使用axios發(fā)送請求時，用于處理請求失敗地回調(diào)函數(shù)的方法是

方法；3）在項目組件內(nèi)調(diào)用vuex中action的方法，根據(jù)提示補全代碼

①引入vuex中的useStore函數(shù)

；

②定義store變量存儲useStore函數(shù)的信息

；

③調(diào)用user模塊的login方法

；

Ⅹ-11登錄頁面制作學習任務Ⅹ-11-S3登錄功能實現(xiàn)1.選擇題，選擇一個正確的答案，將相應字母填入題中括號內(nèi)。1）關(guān)于vue.js中ref的說明，以下選項中描述錯誤的是？（D）A在模板內(nèi)使用時要加上value屬性B返回一個響應式且可改變的ref對象C

接受一個參數(shù)值Dref必須要從Vue中引用才能使用2）下列生命周期選項中，表示Vue實例被掛在后執(zhí)行的是？（A

）AonMountedBonActivatedConBeforeMountDonUpdated3）下面選項中，可以實現(xiàn)actions中事件處理函數(shù)狀態(tài)分發(fā)的是？（

D

）AmutationsBactions()Ccommit()Ddispatch()Ⅹ-11登錄頁面制作學習任務Ⅹ-11-S3登錄功能實現(xiàn)2.填空題。1）Element-plus中，form組件提供了表單驗證的功能，只需要通過

rules

屬性傳入約定的驗證規(guī)則，并將form-Item的

prop

屬性設置為需校驗的字段名即可。2）使用axios發(fā)送請求時，用于處理請求失敗地回調(diào)函數(shù)的方法是

.catch

方法；3）在項目組件內(nèi)調(diào)用vuex中action的方法，根據(jù)提示補全代碼

①引入vuex中的useStore函數(shù)

import{useStore}from"vuex"

；

②定義store變量存儲useStore函數(shù)的信息