Vue.js 3.x從入門到實戰（微課視頻版）

 

源碼下載

 

1.1網站交互方式 

  1.1.1多頁應用程序 

  1.1.2單頁應用程序 

1.2 MVVM模式  

1.3 Vue.js是什麼 

1.4 安裝 Vue.js 

1.5 第一個 Vue.js程序 

  1.5.1安裝 VSCode及其插件 

  1.5.2創建第一個 Vue.js應用 

  1.5.3聲明式渲染 

  1.5.4 Vue.js的生命周期 

1.6 插值與表達式  

  1.6.1文本插值 

  1.6.2原始 HTML插值 

  1.6.3 JavaScript表達式 

本章小結 

習題1

 

2.1 計算屬性 computed

  2.1.1什麼是計算屬性 

  2.1.2只有 getter方法的計算屬性 

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

  2.1.4計算屬性和 methods的對比 

2.2 監聽器屬性 watch

  2.2.1 watch屬性的用法  

  2.2.2 computed屬性和 watch屬性的對比  

本章小結  

習題2 

 

3.1 v-bind  

  3.1.1 v-bind指令的用法 

  3.1.2使用 v-bind綁定 class    

  3.1.3使用 v-bind綁定 style  

3.2條件渲染指令 

  3.2.1 v-if指令  

  3.2.2  v-show指令  

3.3 列表渲染指令 v-for

  3.3.1基本用法 

  3.3.2數組更新 

  3.3.3過濾與排序 

3.4 事件處理  

  3.4.1使用 v-on指令監聽事件 

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

  3.4.3事件修飾符 

3.5 表單與 v-model

  3.5.1基本用法 

  3.5.2修飾符 

3.6 實戰：購物車實例

本章小結  

習題3 

 

 

4.1 組件的註冊

  4.1.1全局註冊 

  4.1.2局部註冊 

4.2 使用 props傳遞數據 

  4.2.1基本用法  

  4.2.2單向數據流  

  4.2.3數據驗證  

4.3 組件的通信

  4.3.1使用自定義事件通信  

  4.3.2使用 v-model通信  

  4.3.3使用 mitt實現非父子組件通信   

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

4.4 插槽 

  4.4.1單插槽 slot  

  4.4.2多個具名插槽  

  4.4.3作用域插槽  

4.5 動態組件與異步組件

  4.5.1動態組件  

  4.5.2異步組件 

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

4.7 實戰：正整數數字輸入框組件 

本章小結   

習題4  

 

 

5.1 單元素/單組件過渡

  5.1.1過渡 class     

  5.1.2 CSS過渡 

  5.1.3 CSS動畫 

  5.1.4同時使用過渡和動畫  

  5.1.5 JavaScript鉤子方法 

5.2 多元素/多組件過渡

  5.2.1多元素過渡 

  5.2.2多組件過渡  

5.3 列表過渡 

  5.3.1列表的普通過渡   

  5.3.2列表的平滑過渡    

  5.3.3列表的變換過渡    

  5.3.4多維列表的過渡   

本章小結   

習題5   

 

6.1 自定義指令的註冊

6.2 實戰：實時時間轉換指令

本章小結   

習題6  

 

7.1DOM樹  

7.2什麼是渲染函數 

7.3h()函數 

  7.3.1基本參數  

  7.3.2約束   

  7.3.3使用 JavaScript代替模板功能  

本章小結  

習題 7  

 

8.1 響應性    

  8.1.1什麼是響應性   

  8.1.2響應性的原理   

8.2  為什麼使用組合 API   

8.3  setup選項

  8.3.1 setup函數的參數   

  8.3.2 setup函數的返回值   

  8.3.3使用 ref創建響應式引用  

  8.3.4在 setup內部調用生命周期鉤子函數 

8.4 提供/註入 

  8.4.1 provide方法 

  8.4.2 inject方法 

8.5模板引用 

8.6 響應式計算與偵聽

  8.6.1響應式計算 

  8.6.2響應式偵聽  

本章小結  

習題 8 

 

9.1 webpack介紹 

9.2  webpack的安裝與使用 

  9.2.1安裝 Node.js和 NPM 

  9.2.2 NPM常用命令  

  9.2.3安裝 webpack 

  9.2.4安裝 webpack-cli    

  9.2.5安裝 webpack-dev-server 

  9.2.6 webpack的基本配置 

  9.2.7 webpack打包實例 

9.3加載器與插件 

  9.3.1加載器 

  9.3.2插件 

9.4 單文件組件與 vue-loader

本章小結  

習題 9 

 

10.1 什麼是路由 

10.2 Vue Router的安裝

10.3Vue Router的基本用法 

  10.3.1  跳轉與傳參 

  10.3.2  配置路由 

10.4Vue Router的高級應用  

  10.4.1  動態路由匹配 

  10.4.2  嵌套路由 

  10.4.3  編程式導航 

  10.4.4  命名路由 

  10.4.5  重定向 

  10.4.6  使用 props傳參 

  10.4.7  HTML5歷史記錄模式 

10.5 路由鉤子函數 

  10.5.1  全局前置鉤子函數 

  10.5.2  全局解析鉤子函數  

  10.5.3  全局後置鉤子函數  

  10.5.4  某個路由的鉤子函數 

  10.5.5  組件內的鉤子函數 

10.6  路由元信息 /

10.7 登錄權限驗證實例

本章小結  

習題 10  

 

11.1 狀態管理與應用場景  

  11.1.1  狀態管理  

  11.1.2  應用場景  

11.2Vuex的安裝與基本應用  

11.3 Vuex的核心概念  

  11.3.1  Vuex中的 state 

  11.3.2  Vuex中的 getters 

  11.3.3  Vuex中的 mutations    

  11.3.4  Vuex中的 actions 

  11.3.5  Vuex中的 modules  

本章小結  

習題 11  

 

12.1setup語法糖  

  12.1.1  屬性與方法的綁定 

  12.1.2  路由 

  12.1.3  組件傳值 

12.2 Element Plus  

  12.2.1  Element Plus的安裝 

  12.2.2  Element Plus組件的介紹  

  12.2.3  Element Plus組件的應用 

  12.2.4  按需引入 Element Plus 

12.3 View UI Plus   

  12.3.1  View UI Plus的安裝  

  12.3.2  View UI Plus組件的介紹   

  12.3.3  View UI Plus組件的應用 

  12.3.4  按需引入 View UI Plus 

12.4 Vant UI 

  12.4.1  Vant UI的安裝  

  12.4.2  Vant UI組件的介紹  

  12.4.3  Vant UI組件的應用 

  12.4.4  按需引入 Vant UI 

12.5其他 UI組件庫  

本章小結  

習題 12  

 

13.1 系統設計  

  13.1.1  系統的功能需求   

  13.1.2  系統的模塊劃分   

13.2  實現技術

  13.2.1  使用 Vite構建後臺管理子系統   

  13.2.2  使用 Vue CLI構建電子商務子系統  

13.3系統管理

13.4 後臺管理子系統的實現

  13.4.1  管理員登錄界面   

  13.4.2  導航欄界面 

  13.4.3  類型管理界面    

  13.4.4  商品管理界面   

  13.4.5  訂單管理界面   

  13.4.6  銷量統計界面   

  13.4.7  訂單統計界面   

13.5 電子商務子系統的實現

  13.5.1  導航欄及搜索界面  

  13.5.2  首頁界面   

  13.5.3  用戶註冊界面  

  13.5.4  用戶登錄界面   

  13.5.5  商品詳情界面   

  13.5.6  我的購物車界面   

  13.5.7  我的訂單界面   

  13.5.8  我的收藏界面   

本章小結 

習題 13