精通 Vue.js：Web 前端開發技術詳解 (微課視頻版)

 

目錄

 

 

源代碼

 

 

第1章Vue簡介

 

1．1MVVM設計模式

 

1．2Vue框架的特點

 

1．3第一個Vue範例

 

1．3．1把模型數據綁定到視圖

 

1．3．2把視圖上的輸入數據與模型綁定

 

1．3．3改變模型數據對視圖的影響

 

1．4Vue組件的選項

 

1．4．1data選項

 

1．4．2template選項

 

1．4．3methods選項

 

1．5Vue組件實例的生命周期

 

1．6Vue編譯模板和渲染DOM的基本原理

 

1．6．1編譯模板

 

1．6．2渲染DOM

 

1．7異步渲染DOM

 

1．8防抖動函數debounce()

 

1．9Vue的開發和調試工具

 

1．9．1NPM

 

1．9．2vuedevtools調試工具

 

1．10小結

 

1．11思考題

 

第2章Vue指令

 

2．1內置Vue指令

 

2．1．1vbind指令

 

2．1．2vmodel指令

 

2．1．3vshow指令

 

2．1．4vif/velseif/velse指令

 

2．1．5vfor指令

 

2．1．6von指令

 

2．1．7von指令的事件修飾符

 

2．1．8vtext指令

 

2．1．9vhtml指令

 

2．1．10vpre指令

 

2．1．11vonce指令

 

2．1．12vcloak指令

 

2．2自定義Vue指令

 

2．2．1註冊自定義指令

 

2．2．2自定義指令的鉤子函數

 

2．2．3自定義指令的動態參數和動態值

 

2．2．4把對象字面量賦值給自定義指令

 

2．2．5鉤子函數簡寫

 

2．2．6自定義指令範例： vimg指令

 

2．2．7自定義指令範例： vdrag指令

 

2．2．8自定義指令範例： vclickoutside指令

 

2．3小結

 

2．4思考題

 

第3章計算屬性和數據監聽

 

3．1計算屬性

 

3．1．1讀寫計算屬性

 

3．1．2比較計算屬性和方法

 

3．1．3用計算屬性過濾數組

 

3．1．4計算屬性實用範例：實現購物車

 

3．2數據監聽

 

3．2．1用Web Worker執行數據監聽中的異步操作

 

3．2．2在watch選項中調用方法

 

3．2．3比較同步操作和異步操作

 

3．2．4深度監聽

 

3．2．5立即監聽

 

3．2．6比較計算屬性和數據監聽watch選項

 

3．3Vue的響應式系統的基本原理

 

3．4小結

 

3．5思考題

 

第4章綁定表單

 

4．1綁定文本域

 

4．2綁定單選按鈕

 

4．3綁定復選框

 

4．4下拉列表

 

4．5把對象與表單綁定

 

4．6小結

 

4．7思考題

 

第5章綁定CSS樣式

 

5．1綁定class屬性

 

5．1．1綁定對象類型的變量

 

5．1．2綁定計算屬性

 

5．1．3綁定數組

 

5．1．4為Vue組件綁定CSS樣式

 

5．2綁定style屬性

 

5．2．1綁定對象類型的變量

 

5．2．2綁定數組

 

5．2．3與瀏覽器兼容

 

5．3範例： 變換表格奇偶行的樣式

 

5．4小結

 

5．5思考題

 

第6章CSS過渡和動畫

 

6．1CSS過渡

 

6．1．1為<transition>組件設定名字

 

6．1．2為<transition>組件顯式指定過渡樣式類型

 

6．1．3使用鉤子函數和Velocity函數庫

 

6．1．4設置初始過渡效果

 

6．1．5切換過渡的DOM元素

 

6．1．6過渡模式

 

6．1．7切換過渡的組件

 

6．2CSS動畫

 

6．2．1使用第三方的CSS動畫樣式類型庫

 

6．2．2使用鉤子函數和Velocity函數庫

 

6．3過渡組合組件<transitiongroup>

 

6．4動態控制過渡和動畫

 

6．5小結

 

6．6思考題

 

第7章Vue組件開發基礎

 

7．1註冊全局組件和局部組件

 

7．1．1註冊全局組件

 

7．1．2註冊局部組件

 

7．2組件的命名規則

 

7．3向組件傳遞屬性

 

7．3．1傳遞動態值

 

7．3．2對象類型的屬性

 

7．3．3數組類型的屬性

 

7．3．4綁定靜態數據

 

7．3．5傳遞對象

 

7．3．6屬性的不可改變性

 

7．3．7單向數據流

 

7．3．8屬性驗證

 

7．4nonprop屬性

 

7．4．1單節點模板中根節點對nonprop屬性的繼承

 

7．4．2在單節點模板中禁止nonprop屬性的繼承

 

7．4．3多節點模板中節點與nonprop屬性的綁定

 

7．5組件樹

 

7．6監聽子組件的事件

 

7．6．1驗證事件

 

7．6．2通過vmodel指令綁定屬性

 

7．6．3通過vmodel指令綁定多個屬性

 

7．6．4vmodel指令的自定義修飾符

 

7．6．5處理子組件中DOM元素的原生事件

 

7．7綜合範例： 自定義組件<combobox>

 

7．8小結

 

7．9思考題

 

第8章Vue組件開發高級技術

 

8．1插槽<slot>

 

8．1．1<slot>組件的渲染作用域

 

8．1．2<slot>組件的默認內容

 

8．1．3為<slot>組件命名 

 

8．1．4<slot>組件的動態名字

 

8．1．5<slot>組件的自定義屬性

 

8．2動態組件<component>

 

8．3異步組件

 

8．3．1異步組件的選項

 

8．3．2局部異步組件

 

8．4組件的生命周期

 

8．5組件的混入塊

 

8．5．1合並規則

 

8．5．2全局混入塊

 

8．5．3自定義合並策略

 

8．5．4使用混入塊的註意事項

 

8．6組件之間的互相訪問

 

8．6．1訪問根組件

 

8．6．2訪問父組件

 

8．6．3訪問子組件

 

8．6．4依賴註入

 

8．7組件的遞歸

 

8．8定義組件模板的其他方式

 

8．9<teleport>組件與DOM元素的通信

 

8．9．1在<teleport>組件中包裹子組件 

 

8．9．2多個<teleport>組件與同一個DOM元素通信

 

8．10小結

 

8．11思考題

 

第9章render()函數和虛擬DOM

 

9．1render()函數

 

9．2真實DOM

 

9．3虛擬DOM

 

9．4h()函數的用法

 

9．4．1虛擬DOM中虛擬節點的唯一性

 

9．4．2h()函數的完整範例

 

9．4．3創建組件的虛擬節點

 

9．5用render()函數實現模板的一些功能

 

9．5．1實現vif和vfor指令的流程控制功能

 

9．5．2實現vmodel指令的數據綁定功能

 

9．5．3實現von指令的監聽事件功能

 

9．5．4實現事件修飾符和按鍵修飾符的功能

 

9．5．5實現插槽功能

 

9．5．6生成動態組件的節點

 

9．5．7自定義指令

 

9．6在render()函數中使用JSX語法

 

9．7綜合範例： 博客帖子列表

 

9．8小結

 

9．9思考題

 

第10章Vue CLI腳手架工具

 

10．1Vue CLI簡介以及安裝

 

10．2創建Vue項目 

 

10．2．1vue create命令的用法

 

10．2．2刪除預配置

 

10．2．3vue ui命令的用法

 

10．3Vue項目的結構

 

10．3．1單文件組件

 

10．3．2程序入口main．js文件

 

10．3．3項目的index．html文件和SPA單頁應用

 

10．3．4運行項目

 

10．4安裝和配置Visual Studio Code

 

10．4．1安裝Vetur和ESLint插件

 

10．4．2在VSCode中打開helloworld項目

 

10．4．3在VSCode中運行helloworld項目

 

10．5創建單文件組件<Hello>

 

10．5．1創建Hello．vue文件

 

10．5．2修改App．vue文件

 

10．5．3運行修改後的helloworld項目

 

10．6創建正式產品

 

10．7在Tomcat中發布正式產品

 

10．7．1安裝Tomcat

 

10．7．2把helloworld正式產品發布到Tomcat中

 

10．8小結

 

10．9思考題

 

第11章Vue Router路由管理器

 

11．1簡單的路由管理

 

11．2路由管理器的基本用法

 

11．3在Vue項目中使用路由管理器

 

11．3．1創建Home．vue和About．vue組件文件

 

11．3．2在組件中加入圖片

 

11．3．3在index．js中創建路由管理器實例

 

11．3．4在main．js中使用路由管理器

 

11．3．5在App．vue中加入<routerlink>組件和<routerview>組件

 

11．3．6運行helloworld項目

 

11．4路由模式

 

11．5動態鏈接

 

11．5．1鏈接中包含路徑參數

 

11．5．2鏈接中包含查詢參數

 

11．5．3鏈接與通配符匹配

 

11．6嵌套的路由

 

11．6．1創建Items父組件的文件Items．vue

 

11．6．2創建Item子組件的文件Item．vue

 

11．6．3在index．js中設置父組件和子組件的路由

 

11．6．4在根組件的模板中加入Items父組件的導航鏈接

 

11．7命名路由

 

11．7．1重定向

 

11．7．2使用別名

 

11．8命名視圖

 

11．9向路由的組件傳遞屬性

 

11．9．1向命名視圖的組件傳遞屬性

 

11．9．2通過函數傳遞屬性

 

11．10編程式導航

 

11．11導航守衛函數

 

11．11．1全局導航守衛函數

 

11．11．2驗證用戶是否登錄

 

11．11．3設置受保護資源

 

11．11．4在單頁面應用中設置目標路由的頁面標題

 

11．11．5特定路由的導航守衛函數

 

11．11．6組件內的導航守衛函數

 

11．12數據抓取

 

11．12．1導航後抓取

 

11．12．2導航前抓取

 

11．13設置頁面的滾動行為

 

11．13．1scrollBehavior()函數的返回值

 

11．13．2延遲滾動

 

11．14延遲加載路由

 

11．14．1把多個組件打包到同一個文件中

 

11．14．2在路由的組件中嵌套異步組件

 

11．15動態路由

 

11．16小結

 

11．17思考題

 

第12章組合API

 

12．1setup()函數的用法

 

12．1．1props參數

 

12．1．2context參數

 

12．1．3ref()函數

 

12．1．4reactive()函數

 

12．1．5toRefs()函數

 

12．1．6readonly()函數

 

12．1．7定義計算屬性

 

12．1．8註冊組件的生命周期鉤子函數

 

12．1．9通過watch()函數監聽數據

 

12．1．10通過watchEffect()函數監聽數據

 

12．1．11獲取模板中DOM元素的引用

 

12．1．12依賴註入(provide/inject)

 

12．2分割setup()函數

 

12．2．1把setup()函數分割到多個函數中 

 

12．2．2把setup()函數分割到多個文件中

 

12．3小結

 

12．4思考題

 

第13章通過Axios訪問服務器

 

13．1Axios的基本用法

 

13．1．1同域訪問和跨域訪問

 

13．1．2獲取響應結果

 

13．1．3處理錯誤

 

13．2在Vue項目中使用Axios

 

13．2．1異步請求

 

13．2．2POST請求方式

 

13．2．3對象和查詢字符串的轉換

 

13．2．4下載圖片 

 

13．2．5上傳文件

 

13．2．6設置反向代理服務器

 

13．3Axios API的用法

 

13．4請求配置

 

13．4．1創建axios實例

 

13．4．2設定默認的請求配置

 

13．4．3請求配置的優先順序

 

13．4．4取消請求的令牌

 

13．5並發請求

 

13．6請求攔截器和響應攔截器

 

13．7前端與後端的會話

 

13．7．1通過Cookie跟蹤會話

 

13．7．2通過token令牌跟蹤會話

 

13．8前端與後端代碼的整合

 

13．9小結

 

13．10思考題

 

第14章通過Vuex進行狀態管理

 

14．1Vuex的基本工作原理

 

14．2Vuex的基本用法

 

14．3在Vue項目中使用Vuex

 

14．3．1strict嚴格模式

 

14．3．2通過計算屬性訪問狀態

 

14．3．3狀態映射函數： mapState()

 

14．3．4更新荷載

 

14．3．5更新映射函數： mapMutations()

 

14．3．6把更新函數的名字設為常量

 

14．3．7更新函數只能包含同步操作

 

14．4倉庫的getters選項

 

14．4．1getters映射函數： mapGetters()

 

14．4．2為getters選項的屬性設置參數

 

14．5倉庫的actions選項

 

14．5．1傳入更新荷載

 

14．5．2動作映射函數： mapActions()

 

14．6異步動作

 

14．6．1異步動作範例

 

14．6．2使用async/await的範例

 

14．7表單處理

 

14．7．1在處理input事件的方法中提交更新函數

 

14．7．2可讀寫的計算屬性

 

14．8倉庫的模塊化

 

14．8．1模塊的局部狀態

 

14．8．2訪問根狀態

 

14．8．3命名空間

 

14．9通過Composition API訪問倉庫

 

14．10狀態的持久化

 

14．11小結

 

14．12思考題

 

第15章創建綜合購物網站應用

 

15．1前端組件的結構

 

15．2前端開發技巧

 

15．2．1狀態管理

 

15．2．2狀態同步

 

15．2．3運用Composition API提高代碼可重用性

 

15．2．4在組件中顯示圖片

 

15．2．5路由管理

 

15．2．6每個組件的頁面標題

 

15．2．7用戶登錄流程

 

15．2．8受保護的資源

 

15．2．9異步處理Axios的請求

 

15．2．10單獨運行前端項目

 

15．3後端架構

 

15．3．1實現業務數據

 

15．3．2實現業務邏輯服務層

 

15．3．3實現DAO層

 

15．3．4實現控制器層

 

15．3．5前端與後端的數據交換

 

15．4發布和運行netstore應用

 

15．4．1安裝SAMPLEDB數據庫

 

15．4．2發布後端netstore項目

 

15．4．3調試和運行前端netstore項目

 

15．4．4創建並發布前端項目的正式產品

 

15．4．5運行netstore應用

 

15．5小結

 

附錄A思考題答案