day11_電商項目_項目實戰(zhàn)day5

1、Vue_day11,Contents,目,錄,參數(shù)管理 商品列表 添加商品,Contents,目,錄,參數(shù)管理 商品列表 添加商品,了解attr_vals就是可選項，并了解如何渲染,要點提示,分類參數(shù)-渲染參數(shù)下的可選項,掌握程度：了解,1.1 渲染參數(shù)下的可選項,了解如何解決attr_vals為空字符串的問題,要點提示,分類參數(shù)-解決attr_vals為空字符串時候的小問題,掌握程度：了解,1.2 解決attr_vals為空字符串時候的小問題,了解通過inputVisible來切換控制按鈕與文本框的顯示,要點提示,分類參數(shù)-控制按鈕與文本框的切換顯示,掌握程度：了解,1.3 控制按鈕與文本框

2、的切換顯示,了解通過給獲取到attr_vals項添加inputVisible和inputValue屬性的方式綁定每一個可選項的值,要點提示,分類參數(shù)-為每一行數(shù)據(jù)提供單獨的inputVisible和inputValue,掌握程度：了解,1.4 單獨提供值,了解$nextTick的含義,要點提示,分類參數(shù)-讓文本框自動獲得焦點,掌握程度：了解,1.5 讓文本框自動獲得焦點,練習(xí),完成可選項的展示 為每一行數(shù)據(jù)添加單獨的inputVisible和inputValue 當點擊+NewTag按鈕變成文本框時為文本框自動添加焦點,提示,按照步驟完成可選項的展示 A.通過遍歷將動態(tài)參數(shù)中的可選項attr_

3、vals進行處理，按空格分隔，給每一行數(shù)據(jù)添加單獨的inputVisible和inputValue B.循環(huán)生成el-tag,并在el-tag后臺添加el-input和el-button并使用inputVisible屬性控制輸入框和按鈕的顯示 C.在點擊按鈕的時候，讓輸入框顯示并自動獲取焦點,10分鐘,1.5 讓文本框自動獲得焦點,案例：完成可選項的展示,了解當文本框中沒有輸入內(nèi)容的時候重置inputValue，并隱藏文本框,要點提示,分類參數(shù)-實現(xiàn)文本框與按鈕的切換顯示,掌握程度：了解,1.6 實現(xiàn)文本框與按鈕的切換顯示,了解如何添加可選項,要點提示,分類參數(shù)-完成參數(shù)可選項的添加操作,掌握

4、程度：了解,1.7 完成參數(shù)可選項的添加操作,了解如何刪除可選項,要點提示,分類參數(shù)-刪除參數(shù)下的可選項,掌握程度：了解,1.8 刪除參數(shù)下的可選項,了解在沒有選對分類時應(yīng)該清空表格數(shù)據(jù),要點提示,分類參數(shù)-清空表格數(shù)據(jù),掌握程度：了解,1.9 清空表格數(shù)據(jù),了解靜態(tài)屬性表格中的展開行如何處理,要點提示,分類參數(shù)-完成靜態(tài)屬性表格中的展開行效果,掌握程度：了解,1.10 完成靜態(tài)屬性表格中的展開行效果,練習(xí),完成添加可選項的操作 完成刪除可選項的操作 參照動態(tài)參數(shù)完成靜態(tài)屬性可選項的相應(yīng)操作,提示,按照步驟完成操作 A.當用戶在文本框中輸入內(nèi)容并按enter時將用戶輸入的數(shù)據(jù)通過請求進行可選項

5、的添加操作 B.當用戶點擊el-tag右側(cè)的“X”時發(fā)送請求刪除可選項 C.參考動態(tài)參數(shù)可選項，完成靜態(tài)屬性可選項的展示，添加，刪除功能,10分鐘,1.10 完成靜態(tài)屬性表格中的展開行效果,案例：完成動態(tài)參數(shù)和靜態(tài)屬性的可選項,了解如何推送代碼以及合并子分支,要點提示,分支操作-將本地goods_params分支的代碼提交并推送到碼云,掌握程度：了解,1.11 將本地goods_params分支的代碼提交并推送到碼云,了解創(chuàng)建子分支goods_list并推送到碼云,要點提示,分支操作-創(chuàng)建goods_list子分支并推送到碼云,掌握程度：了解,1.12 創(chuàng)建goods_list子分支并推送到碼

6、云,Contents,目,錄,參數(shù)管理 商品列表 添加商品,了解添加路由，路由規(guī)則以及頁面基本布局操作,要點提示,商品列表-通過路由加載商品列表組件,掌握程度：了解,2.1 通過路由加載商品列表組件,了解如何發(fā)送請求獲取商品列表數(shù)據(jù),要點提示,商品列表-獲取商品列表數(shù)據(jù),掌握程度：了解,2.2 商品列表-獲取商品列表數(shù)據(jù),了解如何將數(shù)據(jù)渲染到表格中展示,要點提示,商品列表-渲染商品表格數(shù)據(jù),掌握程度：了解,2.3 渲染商品表格數(shù)據(jù),理解如何添加過濾器實現(xiàn)時間的顯示,要點提示,商品列表-自定義格式化時間的全局過濾器,掌握程度：了解,2.4 商品列表-自定義格式化時間的全局過濾器,了解如何使用el

7、-pagination實現(xiàn)分頁功能,要點提示,商品列表-實現(xiàn)商品列表的分頁功能,掌握程度：了解,2.5 商品列表-實現(xiàn)商品列表的分頁功能,了解數(shù)據(jù)搜索和清空功能該如何實現(xiàn),要點提示,商品列表-實現(xiàn)搜索與清空的功能,掌握程度：了解,2.6 實現(xiàn)搜索與清空的功能,練習(xí),完成商品列表展示，分頁 完成數(shù)據(jù)搜索功能,提示,按照步驟完成商品列表 A.添加商品列表組件以及規(guī)則，基本組件布局 B.發(fā)送請求獲取商品列表數(shù)據(jù) C.將數(shù)據(jù)渲染展示在表格中，并添加過濾器展示時間數(shù)據(jù) D.使用el-pagination實現(xiàn)分頁功能 E.當用戶點擊放大鏡時重新發(fā)送請求獲取商品列表數(shù)據(jù),8分鐘,2.6 實現(xiàn)搜索與清空的功能

8、,案例：完成商品列表展示，分頁，數(shù)據(jù)搜索,了解如何通過id刪除商品數(shù)據(jù),要點提示,商品列表-根據(jù)Id刪除商品數(shù)據(jù),掌握程度：了解,2.7 商品列表-根據(jù)Id刪除商品數(shù)據(jù),了解如何通過編程式導(dǎo)航跳轉(zhuǎn)到/goods/add,要點提示,商品列表-通過編程式導(dǎo)航跳轉(zhuǎn)到商品添加頁面,掌握程度：了解,2.8 通過編程式導(dǎo)航跳轉(zhuǎn)到商品添加頁面,上午復(fù)習(xí),Vue第十一天-上午復(fù)習(xí),在el-input中，我們可以通過硬keyup.enter.native屬性添加用戶按下Enter觸發(fā)的事件 如果想要讓文本框渲染展示之后自動獲取焦點，我們可以通過硬this.$nextTick(_=this.$refs.saveT

9、agInput.$refs.input.focus()實現(xiàn) 我們可以通過硬Vue.filter(dateFormat,function(originVal)實現(xiàn)添加過濾器，通過硬Vue.filter(dateFormat,function(originVal)使用過濾器,上午復(fù)習(xí),Vue第十一天-上午復(fù)習(xí),在el-input中，我們可以通過keyup.enter.native屬性添加用戶按下Enter觸發(fā)的事件 如果想要讓文本框渲染展示之后自動獲取焦點，我們可以通過this.$nextTick(_=this.$refs.saveTagInput.$refs.input.focus()實現(xiàn) 我們

10、可以通過Vue.filter(過濾器名,過濾器具體實現(xiàn))實現(xiàn)添加過濾器，通過數(shù)據(jù) | 過濾器名使用過濾器,Contents,目,錄,參數(shù)管理 商品列表 添加商品,了解添加商品的基本頁面結(jié)構(gòu),要點提示,商品添加-渲染添加頁面的基本結(jié)構(gòu),掌握程度：了解,3.1 商品添加-渲染添加頁面的基本結(jié)構(gòu),了解如何美化步驟條組件，比如添加align-center屬性設(shè)置居中效果,要點提示,商品添加-美化步驟條組件,掌握程度：了解,3.2 美化步驟條組件,了解如何以左右結(jié)構(gòu)渲染tab欄 :tab-position=left,要點提示,商品添加-渲染tab欄區(qū)域,掌握程度：了解,3.3 商品添加-渲染tab欄區(qū)域

11、,通過將步驟條和tab欄綁定同一個activeIndex的方式讓步驟條和tab欄同步,要點提示,商品添加-實現(xiàn)步驟條和tab欄的數(shù)據(jù)聯(lián)動效果,掌握程度：了解,3.4 商品添加-實現(xiàn)步驟條和tab欄的數(shù)據(jù)聯(lián)動效果,了解表單由哪些部分組成,要點提示,商品添加-分析表單的組成部分,掌握程度：了解,3.5 分析表單的組成部分,了解如何繪制表單,要點提示,商品添加-繪制基本信息面板的UI結(jié)構(gòu),掌握程度：了解,3.6 商品添加-繪制基本信息面板的UI結(jié)構(gòu),練習(xí),繪制添加商品頁面基本結(jié)構(gòu) 繪制添加商品頁面中的步驟條和tab欄 繪制添加商品頁面的基本信息表單,提示,按照步驟完成操作 A.創(chuàng)建Add.vue子組

12、件，并添加規(guī)則 B.繪制組件基本布局 C.添加步驟條和tab欄組件 D.讓步驟條和tab欄組件綁定同一個activeIndex，使他們形成聯(lián)動效果 E.在tabs外面添加表單，在第一個tab-pane中添加基本信息的表單元素,8分鐘,3.6 商品添加-繪制基本信息面板的UI結(jié)構(gòu),案例：繪制添加商品頁面,了解如何發(fā)送請求獲取分類數(shù)據(jù),要點提示,商品添加-獲取商品分類數(shù)據(jù),掌握程度：了解,3.7 獲取商品分類數(shù)據(jù),了解如何使用級聯(lián)選擇器展示分類數(shù)據(jù),要點提示,商品添加-繪制商品分類的級聯(lián)選擇器,掌握程度：了解,3.8 商品添加-繪制商品分類的級聯(lián)選擇器,了解如何判斷長度來限制用戶只能選擇三級分類,

13、要點提示,商品添加-只允許選中三級商品分類,掌握程度：了解,3.9 商品添加-只允許選中三級商品分類,了解使用beforeTabLeave事件來阻止頁簽切換的操作，也就是基本信息填寫不完整的情況下，不允許用戶切換tab欄,要點提示,商品添加-阻止頁簽切換,掌握程度：了解,3.10 商品添加-阻止頁簽切換,了解如何發(fā)送請求獲取動態(tài)參數(shù)列表數(shù)據(jù),要點提示,商品添加-獲取動態(tài)參數(shù)列表數(shù)據(jù),掌握程度：了解,3.11 商品添加-獲取動態(tài)參數(shù)列表數(shù)據(jù),練習(xí),使用級聯(lián)選擇器展示分類信息 當用戶選擇了分類之后，發(fā)送請求獲取分類對應(yīng)的參數(shù)數(shù)據(jù),提示,按照步驟完成操作 A.發(fā)送請求獲取所有的分類數(shù)據(jù) B.將分類數(shù)

14、據(jù)放在級聯(lián)選擇器中展示 C.在beforeTabLeave事件中判斷如果用戶沒有選中三級分類，不允許切換到其他tab欄 D.當用戶選中了三級分類，根據(jù)三級分類獲取對應(yīng)的參數(shù)數(shù)據(jù),8分鐘,3.11 商品添加-獲取動態(tài)參數(shù)列表數(shù)據(jù),案例：展示分類信息以及分類對應(yīng)的參數(shù),了解如何通過循環(huán)生成復(fù)選框,要點提示,商品添加-繪制商品參數(shù)面板中的復(fù)選框組,掌握程度：掌握,3.12 繪制商品參數(shù)面板中的復(fù)選框組,了解如何通過樣式美化復(fù)選框,要點提示,商品添加-優(yōu)化復(fù)選框的樣式,掌握程度：掌握,3.13 商品添加-優(yōu)化復(fù)選框的樣式,了解如何發(fā)送請求根據(jù)三級分類獲取靜態(tài)屬性,要點提示,商品添加-獲取靜態(tài)屬性列表數(shù)

15、據(jù),掌握程度：掌握,3.14 獲取靜態(tài)屬性列表數(shù)據(jù),了解如何通過循環(huán)展示商品屬性信息,要點提示,商品添加-渲染商品屬性面板的UI結(jié)構(gòu),掌握程度：了解,3.15 渲染商品屬性面板的UI結(jié)構(gòu),練習(xí),完成動態(tài)參數(shù)和靜態(tài)屬性的展示,提示,按照步驟完成操作 A.根據(jù)獲取的動態(tài)參數(shù)數(shù)據(jù)循環(huán)生成復(fù)選框并美化復(fù)選框 B.根據(jù)三級分類獲取對應(yīng)的靜態(tài)屬性 C.根據(jù)靜態(tài)屬性循環(huán)生成展示靜態(tài)屬性信息,8分鐘,3.15 渲染商品屬性面板的UI結(jié)構(gòu),案例：完成動態(tài)參數(shù)和靜態(tài)屬性的展示,今日復(fù)習(xí),在el-input中，我們可以通過keyup.enter.native屬性添加用戶按下Enter觸發(fā)的事件 如果想要讓文本框渲染

16、展示之后自動獲取焦點，我們可以通過this.$nextTick(_=this.$refs.saveTagInput.$refs.input.focus()實現(xiàn) 我們可以通過Vue.filter(過濾器名,過濾器具體實現(xiàn))實現(xiàn)添加過濾器，通過數(shù)據(jù) | 過濾器名使用過濾器 在el-tabs中，我們可以通過keyup.enter.native屬性設(shè)置tab欄左右排列，還可以通過keyup.enter.native添加tab欄切換之前的事件監(jiān)聽,vue第十一天-今日復(fù)習(xí),今日復(fù)習(xí),在el-input中，我們可以通過keyup.enter.native屬性添加用戶按下Enter觸發(fā)的事件 如果想要讓文本框渲染展示之后自動獲取焦點，我們可以通過this.$nextTick(_=this.$refs.save