Vue.js 3.x從入門到實戰(zhàn)（微課視頻版）

第1章  初識Vue.js

1.1網(wǎng)站交互方式 /2 

1.1.1多頁應(yīng)用程序 /2 

1.1.2單頁應(yīng)用程序 /2 

1.2 MVVM模式 /3 

1.3 Vue.js是什么 /4 

1.4 安裝 Vue.js /4 

1.5 第一個 Vue.js程序 /5 

1.5.1安裝 VSCode及其插件 /5 

1.5.2創(chuàng)建第一個 Vue.js應(yīng)用 /6 

1.5.3聲明式渲染 /8 

1.5.4 Vue.js的生命周期 /8 

1.6 插值與表達(dá)式 /10 

1.6.1文本插值 /10 

1.6.2原始 HTML插值 /11 

1.6.3 JavaScript表達(dá)式 /11

本章小結(jié)  /11習(xí)題1 /11

第2章  計算屬性和監(jiān)聽器

2.1 計算屬性 computed  /13 

2.1.1什么是計算屬性  /13 

2.1.2只有 getter方法的計算屬性 /13 

2.1.3定義有 getter和 setter方法的計算屬性 /14 

2.1.4計算屬性和 methods的對比 /15

2.2 監(jiān)聽器屬性 watch /17 

2.2.1 watch屬性的用法 /17 

2.2.2 computed屬性和 watch屬性的對比 /19

本章小結(jié)  /19習(xí)題2 /19

第3章  內(nèi)置指令3.1 v-bind /21 

3.1.1 v-bind指令的用法 /21 

3.1.2使用 v-bind綁定 class   /21 

3.1.3使用 v-bind綁定 style  /24 

3.2條件渲染指令 /25 

3.2.1 v-if指令 /25 

3.2.2  v-show指令 /25 

3.3 列表渲染指令 v-for / 27 

3.3.1基本用法 /27 

3.3.2數(shù)組更新 /29 

3.3.3過濾與排序 /30 

3.4 事件處理 /32 

3.4.1使用 v-on指令監(jiān)聽事件 /33 

3.4.2使用$event訪問原生的 DOM事件 /33 

3.4.3事件修飾符 /34 

3.5 表單與 v-model  /35 

3.5.1基本用法 /35 

3.5.2修飾符 /37 

3.6 實戰(zhàn)：購物車實例  /38

本章小結(jié)  /41

習(xí)題3 /41

第4章  組件

4.1 組件的注冊 /44 

4.1.1全局注冊 /44 

4.1.2局部注冊 /45 

4.2 使用 props傳遞數(shù)據(jù) /47 

4.2.1基本用法 /47 

4.2.2單向數(shù)據(jù)流 /48 

4.2.3數(shù)據(jù)驗證 /49 

4.3 組件的通信 /51 

4.3.1使用自定義事件通信 /51 

4.3.2使用 v-model通信 /53 

4.3.3使用 mitt實現(xiàn)非父子組件通信  /54 

4.3.4提供/注入（組件鏈傳值） /56 

4.4 插槽 /57 

4.4.1單插槽 slot /58 

4.4.2多個具名插槽 /58 

4.4.3作用域插槽 /59 

4.5 動態(tài)組件與異步組件 /60 

4.5.1動態(tài)組件 /60 

4.5.2異步組件 /62 

4.6 使用 ref獲取 DOM元素和引用組件 /62 

4.7 實戰(zhàn)：正整數(shù)數(shù)字輸入框組件 /64

本章小結(jié)  /65

習(xí)題4 /65

第5章  過渡與動畫

5.1 單元素/單組件過渡  /68 

5.1.1過渡 class    /68 

5.1.2 CSS過渡 /69 

5.1.3 CSS動畫 /71 

5.1.4同時使用過渡和動畫 /72 

5.1.5 JavaScript鉤子方法 /73 

5.2 多元素/多組件過渡  /76 

5.2.1多元素過渡 /76 

5.2.2多組件過渡 /77 

5.3 列表過渡 

/79 

5.3.1列表的普通過渡  /79 

5.3.2列表的平滑過渡  /80 

5.3.3列表的變換過渡  /81 

5.3.4多維列表的過渡  /82

本章小結(jié)  /83習(xí)題5  /84 6.1 自定義指令的注冊

第6章  自定義指令

6.2 實戰(zhàn)：實時時間轉(zhuǎn)換指令

 /88本章小結(jié)  /90習(xí)題6  /90

第7章  渲染函數(shù)

7.1DOM樹 /92 

7.2什么是渲染函數(shù) 

/92 

7.3h()函數(shù) 

/95 

7.3.1基本參數(shù) /95 

7.3.2約束 /95 

7.3.3使用 JavaScript代替模板功能  /96

本章小結(jié) /100 習(xí)題 7 /100

第8章  響應(yīng)性與組合API

8.1 響應(yīng)性  /102 

8.1.1什么是響應(yīng)性 /102 

8.1.2響應(yīng)性的原理 /102 

8.2  為什么使用組合 API /103 

8.3  setup選項

  /105 

8.3.1 setup函數(shù)的參數(shù) /105 

8.3.2 setup函數(shù)的返回值 /107 

8.3.3使用 ref創(chuàng)建響應(yīng)式引用 /108 

8.3.4在 setup內(nèi)部調(diào)用生命周期鉤子函數(shù) /109 

8.4 提供/注入 

/110 

8.4.1 provide方法 /111 

8.4.2 inject方法 /111 

8.5模板引用 /113 

8.6 響應(yīng)式計算與偵聽

  /113 

8.6.1響應(yīng)式計算 /113 

8.6.2響應(yīng)式偵聽 /114 

本章小結(jié)  /116習(xí)題 8 /116

第9章  webpack

9.1 webpack介紹 /118 

9.2  webpack的安裝與使用 /118 

9.2.1安裝 Node.js和 NPM /118 

9.2.2 NPM常用命令  /119 

9.2.3安裝 webpack /122 

9.2.4安裝 webpack-cli    /122 

9.2.5安裝 webpack-dev-server /123 

9.2.6 webpack的基本配置 /123 

9.2.7 webpack打包實例 

/125 

9.3加載器與插件 

/131 

9.3.1加載器 /131 

9.3.2插件 /137 

9.4 單文件組件與 vue-loader

  /139本章小結(jié)  /144習(xí)題 9 /144

第10章  Vue Router

10.1 什么是路由 /146 

10.2 Vue Router的安裝

 /146 

10.3Vue Router的基本用法 

/151 

10.3.1  跳轉(zhuǎn)與傳參 /151 

10.3.2  配置路由 /152 

10.4Vue Router的高級應(yīng)用  /156 

10.4.1  動態(tài)路由匹配 

/156 

10.4.2  嵌套路由 

/160 

10.4.3  編程式導(dǎo)航 

/165 

10.4.4  命名路由 /167 

10.4.5  重定向 /167 

10.4.6  使用 props傳參 /168 

10.4.7  HTML5歷史記錄模式 /169 

10.5 路由鉤子函數(shù) /169 

10.5.1  全局前置鉤子函數(shù) /169 

10.5.2  全局解析鉤子函數(shù) /171 

10.5.3  全局后置鉤子函數(shù) /171 

10.5.4  某個路由的鉤子函數(shù) /171 

10.5.5  組件內(nèi)的鉤子函數(shù) /172 

10.6  路由元信息 /173 

10.7 登錄權(quán)限驗證實例

 /174本章小結(jié)  /177習(xí)題 10  /177

第11章  Vuex

11.1 狀態(tài)管理與應(yīng)用場景 /180 

11.1.1  狀態(tài)管理 /180 

11.1.2  應(yīng)用場景 /181 

11.2Vuex的安裝與基本應(yīng)用 /181 

11.3 Vuex的核心概念 /182 

11.3.1  Vuex中的 state 

/182 

11.3.2  Vuex中的 getters 

/187 

11.3.3  Vuex中的 mutations   /191 

11.3.4  Vuex中的 actions 

/194 

11.3.5  Vuex中的 modules /199

本章小結(jié) /201習(xí)題 11 /201

第12章  Vue UI組件庫

12.1setup語法糖 /203 

12.1.1  屬性與方法的綁定 

/203 

12.1.2  路由 

/204 

12.1.3  組件傳值 

/206 

12.2 Element Plus /209 

12.2.1  Element Plus的安裝 /209 

12.2.2  Element Plus組件的介紹 /210 

12.2.3  Element Plus組件的應(yīng)用 

/211 

12.2.4  按需引入 Element Plus 

/215 

12.3 View UI Plus /217 

12.3.1  View UI Plus的安裝 /217 

12.3.2  View UI Plus組件的介紹 /218 

12.3.3  View UI Plus組件的應(yīng)用 

/219 

12.3.4  按需引入 View UI Plus 

/221 

12.4 Vant UI /222 

12.4.1  Vant UI的安裝 /222 

12.4.2  Vant UI組件的介紹 /224 

12.4.3  Vant UI組件的應(yīng)用 

/224 

12.4.4  按需引入 Vant UI 

/225 

12.5其他 UI組件庫 /227本章小結(jié) /228習(xí)題 12 /228

第13章  電子商務(wù)平臺的前端設(shè)計與實現(xiàn)

13.1 系統(tǒng)設(shè)計 /230 

13.1.1  系統(tǒng)的功能需求 /230 

13.1.2  系統(tǒng)的模塊劃分 /230 

13.2  實現(xiàn)技術(shù)

 /231 

13.2.1  使用 Vite構(gòu)建后臺管理子系統(tǒng) /231 

13.2.2  使用 Vue CLI構(gòu)建電子商務(wù)子系統(tǒng) /233 

13.3系統(tǒng)管理

 /233 

13.4 后臺管理子系統(tǒng)的實現(xiàn)

 /238 

13.4.1  管理員登錄界面 /238 

13.4.2  導(dǎo)航欄界面 /241 

13.4.3  類型管理界面  /246 

13.4.4  商品管理界面  /251 

13.4.5  訂單管理界面  /260 

13.4.6  銷量統(tǒng)計界面  /266 

13.4.7  訂單統(tǒng)計界面  /268 

13.5 電子商務(wù)子系統(tǒng)的實現(xiàn)

 /270 

13.5.1  導(dǎo)航欄及搜索界面 /270 

13.5.2  首頁界面 /273 

13.5.3  用戶注冊界面  /276 

13.5.4  用戶登錄界面  /278 

13.5.5  商品詳情界面  /279 

13.5.6  我的購物車界面 /281 

13.5.7  我的訂單界面  /283 

13.5.8  我的收藏界面  /287

本章小結(jié) /289習(xí)題 13 /289

參考文獻(xiàn)