第1章Vue簡介

1．1MVVM設計模式

1．2Vue框架的特點

1．3個Vue范例

1．3．1把模型數(shù)據(jù)綁定到視圖

1．3．2把視圖上的輸入數(shù)據(jù)與模型綁定

1．3．3改變模型數(shù)據(jù)對視圖的影響

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防抖動函數(shù)debounce()

1．9Vue的開發(fā)和調(diào)試工具

1．9．1NPM

1．9．2vue�瞕evtools調(diào)試工具

1．10小結

1．11思考題

第2章Vue指令

2．1內(nèi)置Vue指令

2．1．1v�瞓ind指令

2．1．2v�瞞odel指令

2．1．3v�瞫how指令

2．1．4v�瞚f/v�瞖lse�瞚f/v�瞖lse指令

2．1．5v�瞗or指令

2．1．6v�瞣n指令

2．1．7v�瞣n指令的事件修飾符

2．1．8v�瞭ext指令

2．1．9v�瞙tml指令

2．1．10v�瞤re指令

2．1．11v�瞣nce指令

2．1．12v�瞔loak指令

2．2自定義Vue指令

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

2．2．2自定義指令的鉤子函數(shù)

2．2．3自定義指令的動態(tài)參數(shù)和動態(tài)值

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

2．2．5鉤子函數(shù)簡寫

2．2．6自定義指令范例： v�瞚mg指令

2．2．7自定義指令范例： v�瞕rag指令

2．2．8自定義指令范例： v�瞔lickoutside指令

2．3小結

2．4思考題

第3章計算屬性和數(shù)據(jù)監(jiān)聽

3．1計算屬性

3．1．1讀寫計算屬性

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

3．1．3用計算屬性過濾數(shù)組

3．1．4計算屬性實用范例：實現(xiàn)購物車

3．2數(shù)據(jù)監(jiān)聽

3．2．1用Web Worker執(zhí)行數(shù)據(jù)監(jiān)聽中的異步操作

3．2．2在watch選項中調(diào)用方法

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

3．2．4深度監(jiān)聽

3．2．5立即監(jiān)聽

3．2．6比較計算屬性和數(shù)據(jù)監(jiān)聽watch選項

3．3Vue的響應式系統(tǒng)的基本原理

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綁定數(shù)組

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

5．2綁定style屬性

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

5．2．2綁定數(shù)組

5．2．3與瀏覽器兼容

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

5．4小結

5．5思考題

第6章CSS過渡和動畫

6．1CSS過渡

6．1．1為組件設定名字

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

6．1．3使用鉤子函數(shù)和Velocity函數(shù)庫

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

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

6．1．6過渡模式

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

6．2CSS動畫

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

6．2．2使用鉤子函數(shù)和Velocity函數(shù)庫

6．3過渡組合組件

6．4動態(tài)控制過渡和動畫

6．5小結

6．6思考題

第7章Vue組件開發(fā)基礎

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

7．1．1注冊全局組件

7．1．2注冊局部組件

7．2組件的命名規(guī)則

7．3向組件傳遞屬性

7．3．1傳遞動態(tài)值

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

7．3．3數(shù)組類型的屬性

7．3．4綁定靜態(tài)數(shù)據(jù)

7．3．5傳遞對象

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

7．3．7單向數(shù)據(jù)流

7．3．8屬性驗證

7．4non�瞤rop屬性

7．4．1單節(jié)點模板中根節(jié)點對non�瞤rop屬性的繼承

7．4．2在單節(jié)點模板中禁止non�瞤rop屬性的繼承

7．4．3多節(jié)點模板中節(jié)點與non�瞤rop屬性的綁定

7．5組件樹

7．6監(jiān)聽子組件的事件

7．6．1驗證事件

7．6．2通過v�瞞odel指令綁定屬性

7．6．3通過v�瞞odel指令綁定多個屬性

7．6．4v�瞞odel指令的自定義修飾符

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

7．7綜合范例： 自定義組件

7．8小結

7．9思考題

第8章Vue組件開發(fā)高級技術

8．1插槽

8．1．1組件的渲染作用域

8．1．2組件的默認內(nèi)容

8．1．3為組件命名

8．1．4組件的動態(tài)名字

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

8．2動態(tài)組件

8．3異步組件

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

8．3．2局部異步組件

8．4組件的生命周期

8．5組件的混入塊

8．5．1合并規(guī)則

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組件與DOM元素的通信

8．9．1在組件中包裹子組件

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

8．10小結

8．11思考題

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

9．1render()函數(shù)

9．2真實DOM

9．3虛擬DOM

9．4h()函數(shù)的用法

9．4．1虛擬DOM中虛擬節(jié)點的性

9．4．2h()函數(shù)的完整范例

9．4．3創(chuàng)建組件的虛擬節(jié)點

9．5用render()函數(shù)實現(xiàn)模板的一些功能

9．5．1實現(xiàn)v�瞚f和v�瞗or指令的流程控制功能

9．5．2實現(xiàn)v�瞞odel指令的數(shù)據(jù)綁定功能

9．5．3實現(xiàn)v�瞣n指令的監(jiān)聽事件功能

9．5．4實現(xiàn)事件修飾符和按鍵修飾符的功能

9．5．5實現(xiàn)插槽功能

9．5．6生成動態(tài)組件的節(jié)點

9．5．7自定義指令

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

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

9．8小結

9．9思考題

第10章Vue CLI腳手架工具

10．1Vue CLI簡介以及安裝

10．2創(chuàng)建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創(chuàng)建單文件組件

10．5．1創(chuàng)建Hello．vue文件

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

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

10．6創(chuàng)建正式產(chǎn)品

10．7在Tomcat中發(fā)布正式產(chǎn)品

10．7．1安裝Tomcat

10．7．2把helloworld正式產(chǎn)品發(fā)布到Tomcat中

10．8小結

10．9思考題

第11章Vue Router路由管理器

11．1簡單的路由管理

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

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

11．3．1創(chuàng)建Home．vue和About．vue組件文件

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

11．3．3在index．js中創(chuàng)建路由管理器實例

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

11．3．5在App．vue中加入組件和組件

11．3．6運行helloworld項目

11．4路由模式

11．5動態(tài)鏈接

11．5．1鏈接中包含路徑參數(shù)

11．5．2鏈接中包含查詢參數(shù)

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

11．6嵌套的路由

11．6．1創(chuàng)建Items父組件的文件Items．vue

11．6．2創(chuàng)建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通過函數(shù)傳遞屬性

11．10編程式導航

11．11導航守衛(wèi)函數(shù)

11．11．1全局導航守衛(wèi)函數(shù)

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

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

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

11．11．5特定路由的導航守衛(wèi)函數(shù)

11．11．6組件內(nèi)的導航守衛(wèi)函數(shù)

11．12數(shù)據(jù)抓取

11．12．1導航后抓取

11．12．2導航前抓取

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

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

11．13．2延遲滾動

11．14延遲加載路由

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

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

11．15動態(tài)路由

11．16小結

11．17思考題

第12章組合API

12．1setup()函數(shù)的用法

12．1．1props參數(shù)

12．1．2context參數(shù)

12．1．3ref()函數(shù)

12．1．4reactive()函數(shù)

12．1．5toRefs()函數(shù)

12．1．6readonly()函數(shù)

12．1．7定義計算屬性

12．1．8注冊組件的生命周期鉤子函數(shù)

12．1．9通過watch()函數(shù)監(jiān)聽數(shù)據(jù)

12．1．10通過watchEffect()函數(shù)監(jiān)聽數(shù)據(jù)

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

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

12．2分割setup()函數(shù)

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

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

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創(chuàng)建axios實例

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

13．4．3請求配置的優(yōu)先順序

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

13．5并發(fā)請求

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

13．7前端與后端的會話

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

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

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

13．9小結

13．10思考題

第14章通過Vuex進行狀態(tài)管理

14．1Vuex的基本工作原理

14．2Vuex的基本用法

14．3在Vue項目中使用Vuex

14．3．1strict嚴格模式

14．3．2通過計算屬性訪問狀態(tài)

14．3．3狀態(tài)映射函數(shù)： mapState()

14．3．4更新荷載

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

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

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

14．4倉庫的getters選項

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

14．4．2為getters選項的屬性設置參數(shù)

14．5倉庫的actions選項

14．5．1傳入更新荷載

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

14．6異步動作

14．6．1異步動作范例

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

14．7表單處理

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

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

14．8倉庫的模塊化

14．8．1模塊的局部狀態(tài)

14．8．2訪問根狀態(tài)

14．8．3命名空間

14．9通過Composition API訪問倉庫

14．10狀態(tài)的持久化

14．11小結

14．12思考題

第15章創(chuàng)建綜合購物網(wǎng)站應用

15．1前端組件的結構

15．2前端開發(fā)技巧

15．2．1狀態(tài)管理

15．2．2狀態(tài)同步

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實現(xiàn)業(yè)務數(shù)據(jù)

15．3．2實現(xiàn)業(yè)務邏輯服務層

15．3．3實現(xiàn)DAO層

15．3．4實現(xiàn)控制器層

15．3．5前端與后端的數(shù)據(jù)交換

15．4發(fā)布和運行netstore應用

15．4．1安裝SAMPLEDB數(shù)據(jù)庫

15．4．2發(fā)布后端netstore項目

15．4．3調(diào)試和運行前端netstore項目

15．4．4創(chuàng)建并發(fā)布前端項目的正式產(chǎn)品

15．4．5運行netstore應用

15．5小結

附錄A思考題答案