Vue.js基礎(chǔ)與應(yīng)用開發(fā)實(shí)戰(zhàn)（微課版）

單元1
Vue．js起步 1
學(xué)習(xí)領(lǐng)會(huì) 1
1．1 Vue概述 1
【實(shí)例1-1】借助JavaScript訪問HTML元素 4
1．2 下載、安裝與引入Vue 5
1．2．1 下載與安裝Vue 5
1．2．2 引入Vue 6
1．3 Vue應(yīng)用入門 6
【實(shí)例1-2】在網(wǎng)頁中輸出Vue變量的值 6
1．3．1 模板插值 8
1．3．2 創(chuàng)建Vue實(shí)例 8
1．3．3 瀏覽網(wǎng)頁0102．html與查看數(shù)據(jù) 9
1．4 v2．x的API 9
1．4．1 Vue的全局配置 9
【實(shí)例1-3】使用Vue的全局配置項(xiàng) 9
1．4．2 Vue的全局API方法 10
【實(shí)例1-4】應(yīng)用Vue組件構(gòu)造器Vue．extend 10
1．4．3 Vue實(shí)例對象的數(shù)據(jù)選項(xiàng) 14
【實(shí)例1-5】通過vm．$data訪問Vue實(shí)例的數(shù)據(jù)對象 15
【實(shí)例1-6】應(yīng)用Vue的計(jì)算屬性computed 18
【實(shí)例1-7】比較computed與methods的用法 19
【實(shí)例1-8】應(yīng)用Vue的watch()方法 20
1．4．4 Vue的DOM選項(xiàng) 21
1．4．5 Vue的實(shí)例屬性 22
1．4．6 Vue的實(shí)例方法 23
【實(shí)例1-9】應(yīng)用Vue的$watch()方法 23
1．4．7 Vue的實(shí)例事件 25
【實(shí)例1-10】應(yīng)用Vue的實(shí)例事件改變數(shù)量 26
拓展提升 26
1．5 Vue實(shí)例的生命周期 26
1．5．1 圖解Vue實(shí)例的生命周期 26
1．5．2 認(rèn)知Vue實(shí)例生命周期與鉤子函數(shù) 26
【實(shí)例1-11】應(yīng)用Vue實(shí)例的鉤子函數(shù) 29
1．6 認(rèn)知MVVM模式 30
1．6．1 什么是MVVM 30
1．6．2 為什么要使用MVVM 30
1．6．3 MVVM的組成部分 30
1．6．4 MVVM模式的實(shí)現(xiàn)者 31
應(yīng)用實(shí)戰(zhàn) 32
【任務(wù)1-1】編寫程序代碼計(jì)算金額 32
【任務(wù)1-2】反向輸出字符串 33
【任務(wù)1-3】編寫程序代碼實(shí)現(xiàn)圖片輪播 34
在線測試 35

單元2
Vue網(wǎng)頁模板制作 36
學(xué)習(xí)領(lǐng)會(huì) 36
2．1 Vue的指令 36
2．1．1 指令概述 36
2．1．2 常用的Vue指令 37
2．1．3 自定義指令 43
【實(shí)例2-1】注冊一個(gè)使元素自動(dòng)獲取焦點(diǎn)的自定義指令 44
2．1．4 自定義指令的鉤子函數(shù) 44
2．2 模板內(nèi)容渲染 46
2．2．1 模板動(dòng)態(tài)插值 46
【實(shí)例2-2】使用兩對大括號(hào)進(jìn)行模板動(dòng)態(tài)插值 46
2．2．2 使用v-html指令輸出HTML代碼 47
【實(shí)例2-3】使用v-html指令輸出指定內(nèi)容 47
2．2．3 表達(dá)式插值 47
【實(shí)例2-4】使用兩對大括號(hào)進(jìn)行表達(dá)式插值 48
2．2．4 使用v-text指令實(shí)現(xiàn)模板插值的類似效果 48
【實(shí)例2-5】使用v-text指令實(shí)現(xiàn)模板插值的類似效果 49
2．2．5 靜態(tài)插值 49
【實(shí)例2-6】使用v-once指令實(shí)現(xiàn)靜態(tài)插值 49
2．2．6 使用v-bind指令動(dòng)態(tài)綁定一個(gè)或多個(gè)特性 50
【實(shí)例2-7】使用v-bind指令動(dòng)態(tài)綁定多個(gè)特性 50
2．3 模板邏輯控制 51
2．3．1 模板條件渲染 51
【實(shí)例2-8】使用v-if指令控制元素的顯示或隱藏 51
【實(shí)例2-9】使用v-if指令結(jié)合元素控制多個(gè)元素的顯示或隱藏 52
【實(shí)例2-10】使用v-if和v-else指令實(shí)現(xiàn)條件渲染 53
【實(shí)例2-11】使用v-if、v-else-if和v-else指令實(shí)現(xiàn)條件渲染 53
【實(shí)例2-12】在不同的登錄方式間切換時(shí)復(fù)用已有的輸入框 54
【實(shí)例2-13】使用key屬性聲明“兩個(gè)接近獨(dú)立且不要復(fù)用的元素” 54
【實(shí)例2-14】使用v-if和v-show指令分別實(shí)現(xiàn)元素的顯示或隱藏 55
2．3．2 循環(huán)渲染 56
【實(shí)例2-15】使用v-for指令根據(jù)數(shù)組的選項(xiàng)列表進(jìn)行渲染 56
【實(shí)例2-16】使用帶有v-for指令的標(biāo)簽渲染多個(gè)元素塊 57
【實(shí)例2-17】使用v-for指令通過對象屬性實(shí)現(xiàn)迭代 57
【實(shí)例2-18】使用v-for指令實(shí)現(xiàn)整數(shù)迭代 58
【實(shí)例2-19】使用v-for指令結(jié)合v-if指令輸出部分列表項(xiàng) 58
【實(shí)例2-20】使用v-if指令實(shí)現(xiàn)有條件地跳過循環(huán)的執(zhí)行 59
2．4 Vue數(shù)組更新及過濾排序 59
2．4．1 Vue的變異方法 59
【實(shí)例2-21】使用Vue的變異方法更新數(shù)組 60
2．4．2 Vue的非變異方法 60
【實(shí)例2-22】使用Vue的非變異方法更新數(shù)組 60
2．4．3 數(shù)組的過濾排序 61
2．5 Vue事件處理 61
2．5．1 事件監(jiān)聽 61
【實(shí)例2-23】通過v-on指令綁定事件監(jiān)聽器 62
【實(shí)例2-24】使用v-on指令調(diào)用自定義方法彈出提示信息對話框 62
【實(shí)例2-25】使用v-on指令調(diào)用自定義方法動(dòng)態(tài)輸出單擊次數(shù) 63
【實(shí)例2-26】分別使用v-on指令及其縮寫形式“@”調(diào)用自定義方法 63
【實(shí)例2-27】使用v-on指令調(diào)用內(nèi)聯(lián)JavaScript語句 63
【實(shí)例2-28】使用特殊變量event把原生DOM事件傳入方法 64
2．5．2 事件修飾符 65
【實(shí)例2-29】使用．stop事件修飾符實(shí)現(xiàn)阻止冒泡 65
【實(shí)例2-30】使用．prevent事件修飾符實(shí)現(xiàn)取消默認(rèn)事件 66
【實(shí)例2-31】使用．once事件修飾符實(shí)現(xiàn)只觸發(fā)一次事件 66
2．6 template模板制作 67
【實(shí)例2-32】在構(gòu)造器的template模板中編寫代碼制作網(wǎng)頁模板 67
【實(shí)例2-33】使用template標(biāo)簽編寫代碼制作網(wǎng)頁模板 67
【實(shí)例2-34】使用script標(biāo)簽編寫代碼制作網(wǎng)頁模板 68
拓展提升 68
2．7 鼠標(biāo)修飾符與鍵值修飾符 68
2．7．1 鼠標(biāo)修飾符 68
【實(shí)例2-35】使用鼠標(biāo)修飾符實(shí)現(xiàn)按鈕名稱隨單擊的鍵發(fā)生變化 69
2．7．2 鍵值修飾符 69
2．7．3 其他修飾符 69
應(yīng)用實(shí)戰(zhàn) 70
【任務(wù)2-1】使用帶有v-for指令的template標(biāo)簽渲染多個(gè)元素塊 70
【任務(wù)2-2】使用v-for和v-if指令循環(huán)顯示嵌套的對象 70
在線測試 71

單元3
Vue數(shù)據(jù)綁定與樣式綁定 72
學(xué)習(xí)領(lǐng)會(huì) 72
3．1 Vue表單控件的數(shù)據(jù)綁定 72
3．1．1 輸入框的數(shù)據(jù)綁定 72
【實(shí)例3-1】使用v-model指令實(shí)現(xiàn)input和textarea控件的雙向數(shù)據(jù)綁定 72
3．1．2 復(fù)選框的數(shù)據(jù)綁定 74
【實(shí)例3-2】使用v-model指令實(shí)現(xiàn)復(fù)選框的雙向數(shù)據(jù)綁定 74
3．1．3 單選按鈕的數(shù)據(jù)綁定 74
【實(shí)例3-3】使用v-model指令實(shí)現(xiàn)單選按鈕的雙向數(shù)據(jù)綁定 74
3．1．4 選擇列表的數(shù)據(jù)綁定 75
【實(shí)例3-4】使用v-model指令實(shí)現(xiàn)單選列表的雙向數(shù)據(jù)綁定 75
【實(shí)例3-5】使用v-model指令實(shí)現(xiàn)多選列表的雙向數(shù)據(jù)綁定 76
【實(shí)例3-6】使用v-model結(jié)合v-for指令選擇用戶等級(jí) 77
3．2 綁定value 77
3．2．1 復(fù)選框綁定value 77
【實(shí)例3-7】使用v-model實(shí)現(xiàn)復(fù)選框綁定value 77
3．2．2 單選按鈕綁定value 78
【實(shí)例3-8】使用v-model實(shí)現(xiàn)單選按鈕綁定value 78
3．2．3 選擇列表綁定value 79
【實(shí)例3-9】使用v-model實(shí)現(xiàn)選擇列表綁定value 79
3．3 修飾符 79
3．3．1 ．lazy修飾符 79
【實(shí)例3-10】在v-model指令中使用修飾符．lazy 80
3．3．2 ．number修飾符 80
3．3．3 ．trim修飾符 80
3．4 class綁定 81
3．4．1 對象綁定class 81
【實(shí)例3-11】使用v-bind指令實(shí)現(xiàn)簡單class綁定 81
【實(shí)例3-12】使用v-bind：class指令與普通class屬性共同設(shè)置樣式 82
【實(shí)例3-13】為v-bind：class綁定返回對象的計(jì)算屬性 82
3．4．2 數(shù)組綁定class 83
3．4．3 組件綁定class 84
3．5 style綁定 85
3．5．1 使用v-bind：style直接設(shè)置樣式 85
【實(shí)例3-14】使用v-bind：style直接設(shè)置文本內(nèi)容的樣式 85
3．5．2 使用v-bind：style綁定樣式對象 85
3．5．3 使用v-bind：style綁定樣式數(shù)組 86
拓展提升 86
3．6 定義與使用過濾器 86
3．6．1 過濾器的兩種注冊形式 86
【實(shí)例3-15】使用capitalize過濾器函數(shù)將英文句子的首字母轉(zhuǎn)換為大寫 87
3．6．2 串聯(lián)使用的過濾器 87
3．6．3 使用帶參數(shù)的JavaScript函數(shù)作為過濾器 88
3．6．4 在v-bind：class表達(dá)式中使用過濾器 88
應(yīng)用實(shí)戰(zhàn) 88
【任務(wù)3-1】編寫程序代碼實(shí)現(xiàn)英寸與毫米之間的單位換算 88
【任務(wù)3-2】編寫程序代碼實(shí)現(xiàn)圖片自動(dòng)播放與單擊播放功能 89
【任務(wù)3-3】編寫程序代碼實(shí)現(xiàn)圖片自動(dòng)縮放與圖片播放功能 90
在線測試 91

單元4
Vue項(xiàng)目創(chuàng)建與運(yùn)行 92
學(xué)習(xí)領(lǐng)會(huì) 92
4．1 熟悉創(chuàng)建Vue項(xiàng)目的多種方法 92
4．1．1 創(chuàng)建基于webpack模板的Vue項(xiàng)目 92
【實(shí)例4-1】創(chuàng)建基于webpack模板的Vue項(xiàng)目01-vue-
project 92
4．1．2 使用vue create命令創(chuàng)建vue 2．x項(xiàng)目 95
【實(shí)例4-2】使用vue create命令創(chuàng)建vue 2．x項(xiàng)目02-vue-project 95
4．1．3 使用vue create命令創(chuàng)建vue 3．x項(xiàng)目 97
【實(shí)例4-3】使用vue create命令創(chuàng)建vue 3．x項(xiàng)目03-vue-project 97
4．1．4 利用可視化界面創(chuàng)建Vue項(xiàng)目 98
【實(shí)例4-4】使用可視化操作界面創(chuàng)建vue項(xiàng)目04-vue-project 98
4．1．5 使用Vite搭建Vue 3．x項(xiàng)目 100
【實(shí)例4-5】使用Vite搭建Vue 3．x項(xiàng)目05-vue-project 100
4．2 認(rèn)知Vue項(xiàng)目的組成結(jié)構(gòu)與自定義配置 103
4．2．1 認(rèn)知基于vue-cli 2．x的項(xiàng)目組成結(jié)構(gòu) 103
4．2．2 認(rèn)知基于vue-cli 2．x的package．json文件 104
4．2．3 基于vue-cli項(xiàng)目的自定義配置 104
4．2．4 認(rèn)知基于vue-cli 3．x的項(xiàng)目組成結(jié)構(gòu) 105
拓展提升 107
4．3 認(rèn)知Vue項(xiàng)目的運(yùn)行流程 107
應(yīng)用實(shí)戰(zhàn) 111
【任務(wù)4-1】基于“Node．js+Vue．js+MySQL”實(shí)現(xiàn)前后端分離的登錄與注冊功能 111
【任務(wù)4-2】創(chuàng)建Vite項(xiàng)目實(shí)現(xiàn)多種方式瀏覽與操作圖片 115
在線測試 119

單元5
Vue組件構(gòu)建與應(yīng)用 120
學(xué)習(xí)領(lǐng)會(huì) 120
5．1 組件基礎(chǔ) 120
5．1．1 初識(shí)組件定義 120
【實(shí)例5-1】定義與使用一個(gè)名稱為button-counter的組件 120
5．1．2 組件的組織 123
5．1．3 嵌套 123
5．1．4 根元素 124
5．1．5 原生事件 124
5．2 組件注冊與使用 125
5．2．1 組件命名 125
5．2．2 全局注冊 126
5．2．3 局部注冊 127
5．2．4 使用組件 128
5．3 組件構(gòu)建 129
5．3．1 使用extend()方法構(gòu)建組件 129
5．3．2 使用template標(biāo)簽構(gòu)建組件 129
5．3．3 使用script標(biāo)簽構(gòu)建組件 130
【實(shí)例5-2】演練實(shí)現(xiàn)組件樹的效果 131
5．3．4 構(gòu)建父子組件 131
5．4 Vue組件選項(xiàng)props 133
5．4．1 父子組件 133
5．4．2 靜態(tài)props 134
5．4．3 組件命名約定 134
5．4．4 動(dòng)態(tài)props 135
5．4．5 傳遞數(shù)字 135
5．4．6 props驗(yàn)證 136
【實(shí)例5-3】驗(yàn)證傳入子組件的數(shù)據(jù)是否為數(shù)字 137
【實(shí)例5-4】使用自定義函數(shù)驗(yàn)證傳入子組件的數(shù)據(jù)是否符合指定條件 138
5．4．7 單向數(shù)據(jù)流 138
【實(shí)例5-5】驗(yàn)證props的單向綁定特性 138
5．4．8 修改props數(shù)據(jù) 139
5．4．9 在自定義組件中使用v-for指令 140
【實(shí)例5-6】在自定義組件中使用v-for指令輸出列表 140
5．5 組件之間的通信 141
【實(shí)例5-7】使用props選項(xiàng)實(shí)現(xiàn)父組件向子組件傳遞數(shù)據(jù) 141
5．5．1 父組件向子組件傳遞數(shù)據(jù) 141
5．5．2 子組件向父組件傳遞數(shù)據(jù) 142
5．5．3 兄弟組件之間的通信 144
5．6 Vue自定義事件 144
5．6．1 事件綁定 144
5．6．2 自定義事件的命名約定 144
5．6．3 子組件向父組件傳遞數(shù)據(jù) 145
【實(shí)例5-8】使用$emit觸發(fā)事件實(shí)現(xiàn)子組件向父組件的數(shù)據(jù)傳遞 145
5．6．4 ．sync修飾符 145
【實(shí)例5-9】使用．sync修飾符實(shí)現(xiàn)子組件向父組件傳遞數(shù)據(jù) 146
5．7 Vue組件動(dòng)態(tài)切換 146
5．7．1 使用v-if和v-else指令結(jié)合flag標(biāo)識(shí)符進(jìn)行切換 146
5．7．2 使用component元素結(jié)合：is屬性實(shí)現(xiàn)組件切換 146
【實(shí)例5-10】通過計(jì)算屬性直接綁定到組件對象上實(shí)現(xiàn)組件切換 147
5．7．3 組件切換時(shí)使用緩存不活動(dòng)的組件實(shí)例 148
【實(shí)例5-11】使用條件判斷結(jié)合僅有一個(gè)子元素被渲染 148
5．8 Vue插槽應(yīng)用 149
5．8．1 插槽概述 149
5．8．2 匿名插槽 150
5．8．3 提供默認(rèn)內(nèi)容的插槽 150
5．8．4 具名插槽 151
【實(shí)例5-12】混用具名插槽與默認(rèn)值 152
【實(shí)例5-13】混用具名插槽與匿名插槽 152
5．8．5 作用域插槽 154
【實(shí)例5-14】應(yīng)用作用域插槽實(shí)現(xiàn)組件定義如何渲染列表每一項(xiàng) 155
拓展提升 156
5．9 Vue混合 156
5．9．1 數(shù)據(jù)合并 156
5．9．2 選項(xiàng)合并 156
5．9．3 全局混合 156
應(yīng)用實(shí)戰(zhàn) 157
【任務(wù)5-1】在自定義組件中利用Vue的transition屬性實(shí)現(xiàn)圖片輪換功能 157
【任務(wù)5-2】在Element UI中實(shí)現(xiàn)Table與Pagination組件化 159
在線測試 161

單元6
Vue過渡與動(dòng)畫實(shí)現(xiàn) 162
學(xué)習(xí)領(lǐng)會(huì) 162
6．1 通過CSS方式實(shí)現(xiàn)過渡效果 162
6．1．1 transition組件與transition類 163
6．1．2 使用transition組件結(jié)合transition屬性實(shí)現(xiàn)過渡效果 164
【實(shí)例6-1】使用transition組件結(jié)合transition屬性實(shí)現(xiàn)過渡效果 164
6．1．3 使用transition組件結(jié)合animation屬性實(shí)現(xiàn)過渡效果 165
【實(shí)例6-2】使用transition組件結(jié)合animation屬性實(shí)現(xiàn)過渡效果 165
6．1．4 同時(shí)使用transition屬性和animation屬性實(shí)現(xiàn)過渡效果 165
【實(shí)例6-3】同時(shí)使用transition屬性和animation屬性實(shí)現(xiàn)過渡效果 166
6．1．5 通過transition組件的appear屬性實(shí)現(xiàn)渲染動(dòng)畫 166
【實(shí)例6-4】通過給transition組件設(shè)置appear屬性實(shí)現(xiàn)渲染動(dòng)畫 166
6．1．6 為動(dòng)態(tài)組件添加過渡效果 166
【實(shí)例6-5】使用is屬性為動(dòng)態(tài)組件添加過渡效果 167
6．2 通過JavaScript方式實(shí)現(xiàn)Vue的過渡效果 167
【實(shí)例6-6】使用JavaScript方式實(shí)現(xiàn)Vue的過渡效果 168
拓展提升 168
6．3 實(shí)現(xiàn)Vue多元素與多組件過渡 168
6．3．1 不同標(biāo)簽名的多元素在切換時(shí)實(shí)現(xiàn)過渡效果 169
【實(shí)例6-7】不同標(biāo)簽名的多元素在切換時(shí)實(shí)現(xiàn)過渡效果 169
6．3．2 相同標(biāo)簽名的多元素在切換時(shí)實(shí)現(xiàn)過渡效果 169
【實(shí)例6-8】相同標(biāo)簽名的元素在切換時(shí)通過key屬性實(shí)現(xiàn)過渡效果 170
6．3．3 實(shí)現(xiàn)多組件的過渡效果 171
【實(shí)例6-9】使用動(dòng)態(tài)組件實(shí)現(xiàn)多組件切換時(shí)的過渡效果 171
6．4 實(shí)現(xiàn)Vue列表的過渡效果 171
6．4．1 實(shí)現(xiàn)列表的普通過渡效果 172
【實(shí)例6-10】添加和刪除列表項(xiàng)時(shí)實(shí)現(xiàn)普通過渡效果 172
6．4．2 實(shí)現(xiàn)列表的平滑過渡效果 172
6．4．3 實(shí)現(xiàn)列表的變換過渡效果 173
【實(shí)例6-11】利用move屬性實(shí)現(xiàn)列表的變換過渡效果 173
應(yīng)用實(shí)戰(zhàn) 174
【任務(wù)6-1】使用data屬性與JavaScript通信以實(shí)現(xiàn)列表的漸進(jìn)過渡效果 174
【任務(wù)6-2】使用CSS實(shí)現(xiàn)列表的漸進(jìn)過渡效果 174
【任務(wù)6-3】使用Vue的transition屬性實(shí)現(xiàn)圖片輪播功能 174
【任務(wù)6-4】使用Vue的transition-group組件實(shí)現(xiàn)圖片輪播功能 175
在線測試 177

單元7
Vue路由配置與應(yīng)用 178
學(xué)習(xí)領(lǐng)會(huì) 178
7．1 vue-router的基本使用 178
7．1．1 安裝vue-router 178
7．1．2 使用vue-router 178
【實(shí)例7-1】使用vue-router實(shí)現(xiàn)單擊超鏈接顯示對應(yīng)的頁面內(nèi)容 178
7．1．3 vue-router的路由模式 180
7．2 重定向和使用別名 181
7．2．1 重定向 181
【實(shí)例7-2】使用Vue的重定向功能實(shí)現(xiàn)單擊超鏈接顯示對應(yīng)的頁面內(nèi)容 181
7．2．2 使用別名 183
7．3 設(shè)置與使用根路徑 183
7．4 設(shè)置與使用嵌套路由 184
7．4．1 使用vue-router實(shí)現(xiàn)嵌套路由 184
【實(shí)例7-3】使用vue-router實(shí)現(xiàn)嵌套路由 184
7．4．2 設(shè)置默認(rèn)子路由 185
7．5 設(shè)置與使用命名路由 185
【實(shí)例7-4】設(shè)置與使用命名路由 186
7．6 設(shè)置與使用命名視圖 186
【實(shí)例7-5】設(shè)置與使用命名視圖 187
7．7 設(shè)置與使用動(dòng)態(tài)路由 187
7．8 實(shí)現(xiàn)編程式導(dǎo)航 188
7．8．1 使用router．push(location)方法實(shí)現(xiàn)導(dǎo)航 188
【實(shí)例7-6】使用query方式傳遞參數(shù) 189
【實(shí)例7-7】使用params方式傳遞參數(shù) 190
7．8．2 使用router．replace(location)方法實(shí)現(xiàn)導(dǎo)航 190
7．8．3 使用router．go(n)方法實(shí)現(xiàn)導(dǎo)航 190
拓展提升 191
7．9 使用導(dǎo)航鉤子函數(shù) 191
7．9．1 全局導(dǎo)航鉤子函數(shù) 191
7．9．2 單個(gè)路由獨(dú)享的導(dǎo)航鉤子函數(shù) 192
7．9．3 組件內(nèi)的導(dǎo)航鉤子函數(shù) 192
7．10 使用懶加載 193
7．11 vue-router的API 194
7．11．1 router-link 194
7．11．2 router-view 195
應(yīng)用實(shí)戰(zhàn) 195
【任務(wù)7-1】實(shí)現(xiàn)用戶登錄與應(yīng)用路由切換頁面 195
【任務(wù)7-2】基于“Vue．js+Axios+axios-mock-adapter”實(shí)現(xiàn)用戶登錄 199
在線測試 203

單元8
Vuex狀態(tài)管理 204
學(xué)習(xí)領(lǐng)會(huì) 204
8．1 Vuex概述 204
8．1．1 Vuex是什么 204
8．1．2 什么是狀態(tài)管理框架 205
【實(shí)例8-1】使用自定義方法實(shí)現(xiàn)簡單的Vue計(jì)數(shù)功能 205
8．1．3 Vuex的運(yùn)行機(jī)制 207
8．1．4 Vuex的使用方式 208
8．1．5 Vue項(xiàng)目結(jié)構(gòu)示例 208
8．2 簡單的store應(yīng)用 209
【實(shí)例8-2】使用Vuex實(shí)現(xiàn)簡單的計(jì)數(shù)功能 211
8．3 Vuex的配置選項(xiàng) 212
8．3．1 state 212
【實(shí)例8-3】通過單一狀態(tài)樹實(shí)現(xiàn)簡單的計(jì)數(shù)功能 212
【實(shí)例8-4】實(shí)現(xiàn)在Vue組件中獲得Vuex狀態(tài) 213
【實(shí)例8-5】使用mapState()輔助函數(shù)幫助生成計(jì)算屬性 213
8．3．2 getters 214
8．3．3 mutations 216
8．3．4 actions 217
8．3．5 modules 220
拓展提升 221
8．4 Vuex的API 221
應(yīng)用實(shí)戰(zhàn) 223
【任務(wù)8-1】使用Vuex在單個(gè)HTML文件中實(shí)現(xiàn)計(jì)數(shù)器功能 223
【任務(wù)8-2】使用Vuex的屬性與方法實(shí)現(xiàn)人員列表查詢功能 223
【任務(wù)8-3】使用Vuex結(jié)合vue-cli實(shí)現(xiàn)計(jì)數(shù)器功能 224
在線測試 227

單元9
服務(wù)器端渲染 228
學(xué)習(xí)領(lǐng)會(huì) 228
9．1 區(qū)分服務(wù)器端渲染和客戶端渲染 228
9．1．1 熟知基本概念 228
9．1．2 認(rèn)知vue-router（前端路由）的兩種路由模式 232
9．2 手動(dòng)搭建項(xiàng)目實(shí)現(xiàn)簡單的服務(wù)器端渲染 233
9．2．1 了解vue-server-renderer的作用及基本語法 233
9．2．2 直接編寫代碼將Vue實(shí)例渲染為HTML 234
【實(shí)例9-1】在vue-ssr項(xiàng)目中編寫代碼將Vue實(shí)例渲染為HTML 234
9．2．3 使用Express框架搭建服務(wù)器端渲染 235
【實(shí)例9-2】在vue-ssr項(xiàng)目中使用Express框架搭建服務(wù)器端渲染 235
9．2．4 使用Koa框架搭建服務(wù)器端渲染 237
【實(shí)例9-3】在vue-ssr項(xiàng)目中使用Koa框架搭建服務(wù)器端渲染 237
9．3 使用Nuxt．js框架實(shí)現(xiàn)服務(wù)器端渲染 238
9．3．1 頁面和路由 238
9．3．2 頁面跳轉(zhuǎn) 239
【實(shí)例9-4】創(chuàng)建Nuxt．js項(xiàng)目搭建服務(wù)器端渲染 241
拓展提升 248
9．4 Vue-SSR的工作原理 248
應(yīng)用實(shí)戰(zhàn) 249
【任務(wù)9-1】創(chuàng)建一個(gè)簡單的vue-ssr服務(wù)器端渲染項(xiàng)目 249
【任務(wù)9-2】創(chuàng)建vue-cli改造而成的vue-ssr服務(wù)器端渲染項(xiàng)目 255
【任務(wù)9-3】基于Nuxt．js創(chuàng)建一個(gè)服務(wù)器端渲染應(yīng)用——旅游網(wǎng)站 259
在線測試 263

單元10
Vue綜合應(yīng)用實(shí)戰(zhàn) 264
【任務(wù)10-1】編寫程序?qū)崿F(xiàn)簡單的登錄注冊評(píng)論功能 264
【任務(wù)10-2】編寫程序?qū)崿F(xiàn)簡單的購物車功能 268
【任務(wù)10-3】綜合應(yīng)用多項(xiàng)技術(shù)實(shí)現(xiàn)前后端分離的移動(dòng)版網(wǎng)上商城項(xiàng)目 270
【任務(wù)10-4】綜合應(yīng)用多項(xiàng)技術(shù)實(shí)現(xiàn)前后端分離的網(wǎng)上商城項(xiàng)目 276
在線測試 281

附錄A
Vue程序開發(fā)環(huán)境搭建 282

附錄B
JavaScript與ECMAScript
6．0簡介 284
B．1 JavaScript簡介 284
B．2 初識(shí)ES6 284

附錄C
Vue應(yīng)用開發(fā)工具簡介 287
Ｃ．1 認(rèn)知與使用Node．js的包
管理器——NPM 287
C．1．1 NPM概述 287
C．1．2 安裝NPM 287
C．1．3 安裝與卸載包 287
C．1．4 使用NPM常用的命令 287
C．1．5 使用package．json 288
C．1．6 區(qū)分包和模塊 288
C．1．7 解決國內(nèi)使用NPM慢的問題 288
C．2 認(rèn)知與使用包管理工具——Yarn 288
C．3 認(rèn)知與使用腳手架工具——vue-cli 288
C．4 認(rèn)知模塊打包工具——webpack 289
C．4．1 webpack概述 289
C．4．2 創(chuàng)建一個(gè)新的項(xiàng)目 289
C．5 認(rèn)知前端構(gòu)建工具——Vite 289
C．5．1 Vite概述 289
C．5．2 Vite的使用方式 289
C．5．3 Vite解決了webpack哪些問題 289
C．5．4 Vite啟動(dòng)鏈路 289
C．6 認(rèn)知ES轉(zhuǎn)碼器——Babel 290
C．6．1 Babel概述 290
C．6．2 使用Babel 290
C．7 認(rèn)知CSS預(yù)處理器——SASS 290
C．7．1 SASS概述 290
C．7．2 使用SASS 290
C．7．3 SASS的基本用法 290
C．8 認(rèn)知代碼檢查工具——ESLint 291
C．8．1 ESLint概述 291
C．8．2 使用ESLint 291

附錄D
Vue應(yīng)用開發(fā)平臺(tái)與框架簡介 292
D．1 認(rèn)知JavaScript應(yīng)用開發(fā)平臺(tái)——Node．js 292
D．1．1 Node．js概述 292
D．1．2 創(chuàng)建與執(zhí)行簡單的Node．js程序 292
D．1．3 創(chuàng)建與執(zhí)行在服務(wù)器端運(yùn)行的Node．js應(yīng)用程序 292
D．1．4 使用Node．js連接MySQL數(shù)據(jù)庫 292
D．1．5 使用Node．js操作數(shù)據(jù)庫 292
D．2 認(rèn)知Web應(yīng)用框架——Express 292
D．2．1 Express概述 293
D．2．2 創(chuàng)建簡單的Express應(yīng)用程序 293
D．2．3 使用應(yīng)用程序生成器工具快速創(chuàng)建應(yīng)用程序 293
D．2．4 Express的基本路由簡介 293
D．3 認(rèn)知Web開發(fā)框架——Koa與Koa2 293
D．3．1 Koa快速入門 293
D．3．2 Koa2快速入門 293
D．4 認(rèn)知狀態(tài)管理框架——Vuex 293
D．4．1 Vuex概述 293
D．4．2 Vuex的幾個(gè)術(shù)語 294
D．5 認(rèn)知前端開發(fā)框架——Nuxt．js 294
D．5．1 Nuxt．js概述 294
D．5．2 認(rèn)知Nuxt．js項(xiàng)目的文件夾結(jié)構(gòu) 294

附錄E
Vue應(yīng)用開發(fā)的庫與插件簡介 295
E．1 認(rèn)知HTTP庫——Axios 295
E．1．1 概述 295
E．1．2 Axios的常用方法與API 295
E．1．3 使用Axios的實(shí)例 295
E．2 認(rèn)知UI組件庫——Element-UI 295
E．2．1 Element-UI概述 295
E．2．2 通過CDN方式使用Element-UI組件 296
E．2．3 在webpack項(xiàng)目中使用Element-UI組件 296
E．3 認(rèn)知UI組件庫——iView UI與View UI 296
E．3．1 iView UI概述 296
E．3．2 通過CDN方式使用iView組件 296
E．3．3 在webpack項(xiàng)目中使用iView組件 296
E．3．4 View UI概述 296
E．3．5 在webpack項(xiàng)目中使用View UI組件 296
E．4 認(rèn)知插件Postman 297
E．4．1 Postman概述 297
E．4．2 發(fā)送HTTP請求 297
E．5 認(rèn)知模擬后端接口插件——Mock．js 297
E．5．1 Mock．js概述 297
E．5．2 使用Mock．js 297

附錄F
精簡版Vue編程風(fēng)格指南 298

參考文獻(xiàn) 300