本書共8個模塊，模塊1介紹了Vue前端框架、Element UI前端框架、ECharts可視化庫和Visual Studio Code編輯器，并搭建了前端可視化項目開發(fā)環(huán)境；模塊2介紹了Element UI前端框架的相關應用；模塊3-7介紹了Vue指令、Vue數(shù)據(jù)綁定、Vue事件、Vue組件和Vue路由的相關內容；模塊8介紹了ECharts的應用。
模塊1 搭建前端可視化開發(fā)環(huán)境 1
【教學目標】 1
任務1.1 安裝Node.js和Vue 1
【任務描述】 1
【任務要求】 2
【相關知識】 2
1.1.1 初識Vue 2
1.1.2 Vue的優(yōu)勢與應用 3
【任務實施】 3
任務1.2 引入Element UI 7
【任務描述】 7
【任務要求】 7
【相關知識】 8
1.2.1 初識Element UI 8
1.2.2 Element UI的優(yōu)勢與應用 8
【任務實施】 9
任務1.3 引入ECharts 10
【任務描述】 10
【任務要求】 11
【相關知識】 11
1.3.1 初識ECharts 11
1.3.2 ECharts的優(yōu)勢與應用 11
【任務實施】 12
任務1.4 安裝Visual Studio Code編輯器 14
【任務描述】 14
【任務要求】 14
【相關知識】 14
【任務實施】 15
模塊小結 20
課后作業(yè) 20
模塊2 設計新零售智能銷售平臺的基礎
頁面——Element UI的應用 21
【教學目標】 21
任務2.1 平臺基礎頁面布局 21
【任務描述】 21
【任務要求】 22
【相關知識】 22
2.1.1 Layout柵格化布局 22
2.1.2 Container容器布局 25
【任務實施】 26
任務2.2 創(chuàng)建平臺導航菜單 29
【任務描述】 29
【任務要求】 29
【相關知識】 29
2.2.1 基本概念 29
2.2.2 實現(xiàn)NavMenu導航菜單 30
【任務實施】 31
任務2.3 創(chuàng)建訂單數(shù)據(jù)表格 33
【任務描述】 33
【任務要求】 34
【相關知識】 34
2.3.1 表格 34
2.3.2 標簽 36
2.3.3 樹形控件 37
【任務實施】 39
任務2.4 設計訂單數(shù)據(jù)表格的分頁顯示 41
【任務描述】 41
【任務要求】 42
【相關知識】 42
2.4.1 基本概念 42
2.4.2 實現(xiàn)Pagination分頁 43
【任務實施】 43
任務2.5 添加訂單數(shù)據(jù)對話框 46
【任務描述】 46
【任務要求】 46
【相關知識】 47
2.5.1 基本概念 47
2.5.2 實現(xiàn)Dialog對話框 47
【任務實施】 48
任務2.6 構建訂單數(shù)據(jù)表單并添加表格
操作列 51
【任務描述】 51
【任務要求】 52
【相關知識】 52
2.6.1 按鈕 52
2.6.2 輸入框 53
2.6.3 單選框 55
2.6.4 復選框 57
2.6.5 選擇器 59
2.6.6 時間日期組件 61
2.6.7 表單 66
【任務實施】 69
模塊小結 76
課后作業(yè) 77
模塊3 開發(fā)新零售智能銷售平臺的基本
功能——Vue指令的應用 79
【教學目標】 79
任務3.1 設計庫存量警告標記 80
【任務描述】 80
【任務要求】 80
【相關知識】 80
3.1.1 了解指令 80
3.1.2 v-if、v-else和v-else-if指令 81
3.1.3 v-for指令 84
3.1.4 v-on指令 86
3.1.5 v-show指令 87
【任務實施】 88
任務3.2 綁定訂單表單驗證規(guī)則 90
【任務描述】 90
【任務要求】 90
【相關知識】 90
3.2.1 v-bind指令 90
3.2.2 v-model指令 93
【任務實施】 98
模塊小結 101
課后作業(yè) 101
模塊4 設計新零售智能銷售平臺的數(shù)據(jù)
綁定——Vue數(shù)據(jù)綁定 103
【教學目標】 103
任務4.1 使用文本插值方式顯示當前日期、
時間和問候語 104
【任務描述】 104
【任務要求】 104
【相關知識】 104
4.1.1 文本插值 104
4.1.2 HTML插值 105
4.1.3 JavaScript表達式插值 106
【任務實施】 107
任務4.2 渲染訂單數(shù)據(jù)列表 108
【任務描述】 108
【任務要求】 109
【相關知識】 109
4.2.1 條件渲染 109
4.2.2 列表渲染 110
【任務實施】 115
任務4.3 統(tǒng)計商品總價 117
【任務描述】 117
【任務要求】 118
【相關知識】 118
4.3.1 計算屬性 118
4.3.2 方法 119
4.3.3 偵聽屬性 120
【任務實施】 122
任務4.4 動態(tài)顯示當前日期和時間 125
【任務描述】 125
【任務要求】 125
【相關知識】 125
4.4.1 鉤子函數(shù) 125
4.4.2 實例創(chuàng)建 126
4.4.3 數(shù)據(jù)更新 130
4.4.4 實例銷毀 133
【任務實施】 134
模塊小結 135
課后作業(yè) 135
模塊5 開發(fā)新零售智能銷售平臺的人機
交互功能——Vue事件的
應用 137
【教學目標】 137
任務5.1 添加改變購買數(shù)量的按鈕 138
【任務描述】 138
【任務要求】 138
【相關知識】 138
5.1.1 基本概念 138
5.1.2 實現(xiàn)監(jiān)聽事件 139
【任務實施】 140
任務5.2 實現(xiàn)數(shù)據(jù)的添加 141
【任務描述】 141
【任務要求】 142
【相關知識】 142
【任務實施】 143
任務5.3 實現(xiàn)數(shù)據(jù)的批量刪除 145
【任務描述】 145
【任務要求】 146
【相關知識】 146
【任務實施】 148
任務5.4 添加once修飾符實現(xiàn)每種商品只能
被收藏一次的功能 150
【任務描述】 150
【任務要求】 151
【相關知識】 151
5.4.1 基本概念 151
5.4.2 事件修飾符的用法 151
【任務實施】 157
任務5.5 添加Enter按鍵修飾符實現(xiàn)數(shù)據(jù)提交
功能 160
【任務描述】 160
【任務要求】 161
【相關知識】 161
5.5.1 鍵盤事件的概念和按鍵修飾符的
種類 161
5.5.2 按鍵修飾符的用法 162
【任務實施】 164
模塊小結 166
課后作業(yè) 166
模塊6 封裝新零售智能銷售平臺商品
列表頁面的可重用功能——Vue
組件的開發(fā) 168
【教學目標】 168
任務6.1 將“購買數(shù)量”欄中的所有內容封裝
成組件 169
【任務描述】 169
【任務要求】 169
【相關知識】 169
6.1.1 了解組件 169
6.1.2 全局注冊 170
6.1.3 局部注冊 172
【任務實施】 173
任務6.2 通過組件通信展示商品信息 174
【任務描述】 174
【任務要求】 175
【相關知識】 175
6.2.1 父組件向子組件通信 175
6.2.2 子組件向父組件通信 176
6.2.3 非父子組件之間通信 178
【任務實施】 180
任務6.3 動態(tài)展示各類商品 184
【任務描述】 184
【任務要求】 185
【相關知識】 185
【任務實施】 187
模塊小結 190
課后作業(yè) 190
模塊7 設計新零售智能銷售平臺的訪問
路徑——Vue路由的應用 192
【教學目標】 192
任務7.1 使用路由實現(xiàn)單頁面內容的
跳轉 193
【任務描述】 193
【任務要求】 194
【相關知識】 194
7.1.1 初識路由 194
7.1.2 vue-router插件的工作原理 195
7.1.3 vue-router插件的對象屬性 196
7.1.4 vue-router插件的基礎使用 196
【任務實施】 203
任務7.2 設計基于嵌套路由的頁面 205
【任務描述】 205
【任務要求】 206
【相關知識】 206
【任務實施】 208
模塊小結 211
課后作業(yè) 211
模塊8 設計新零售智能銷售平臺的統(tǒng)計
圖表——ECharts的應用 213
【教學目標】 213
任務8.1 初創(chuàng)一張ECharts圖表 214
【任務描述】 214
【任務要求】 214
【相關知識】 215
【任務實施】 217
任務8.2 使用配置手冊 218
【任務描述】 218
【任務要求】 219
【相關知識】 219
8.2.1 ECharts基礎架構及常用術語 219
8.2.2 直角坐標系下的網格及坐標軸 222
8.2.3 圖例組件 227
8.2.4 提示框組件 230
8.2.5 標記點和標記線 232
【任務實施】 234
任務8.3 使用柱狀圖分析訂單支付狀態(tài)和出貨
狀態(tài)的分布情況 237
【任務描述】 237
【任務要求】 238
【相關知識】 238
8.3.1 繪制標準柱狀圖 238
8.3.2 繪制堆積柱狀圖 240
8.3.3 繪制標準條形圖 242
【任務實施】 244
任務8.4 使用折線圖和堆積面積圖分析4—9
月份商品存貨周轉天數(shù)、庫存量及
進貨量 246
【任務描述】 246
【任務要求】 247
【相關知識】 247
8.4.1 繪制標準折線圖 247
8.4.2 繪制堆積面積圖和堆積
折線圖 248
【任務實施】 251
任務8.5 使用餅圖分析用戶下單時間段占比和下單用戶所在城市占比 253
【任務描述】 253
【任務要求】 254
【相關知識】 255
8.5.1 繪制標準餅圖 255
8.5.2 繪制圓環(huán)圖 256
【任務實施】 257
任務8.6 使用折線柱狀混合圖分析商品銷售量和總金額 259
【任務描述】 259
【任務要求】 259
【相關知識】 260
【任務實施】 261
模塊小結 262
課后作業(yè) 263
附錄A Vue的API及其說明 264
參考文獻 268
新書資訊