第1章Vue簡(jiǎn)介

1．1MVVM設(shè)計(jì)模式

1．2Vue框架的特點(diǎn)

1．3個(gè)Vue范例

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

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

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

1．4Vue組件的選項(xiàng)

1．4．1data選項(xiàng)

1．4．2template選項(xiàng)

1．4．3methods選項(xiàng)

1．5Vue組件實(shí)例的生命周期

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

1．6．1編譯模板

1．6．2渲染DOM

1．7異步渲染DOM

1．8防抖動(dòng)函數(shù)debounce()

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

1．9．1NPM

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

1．10小結(jié)

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注冊(cè)自定義指令

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

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

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

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

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

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

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

2．3小結(jié)

2．4思考題

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

3．1計(jì)算屬性

3．1．1讀寫計(jì)算屬性

3．1．2比較計(jì)算屬性和方法

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

3．1．4計(jì)算屬性實(shí)用范例：實(shí)現(xiàn)購(gòu)物車

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

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

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

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

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

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

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

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

3．4小結(jié)

3．5思考題

第4章綁定表單

4．1綁定文本域

4．2綁定單選按鈕

4．3綁定復(fù)選框

4．4下拉列表

4．5把對(duì)象與表單綁定

4．6小結(jié)

4．7思考題

第5章綁定CSS樣式

5．1綁定class屬性

5．1．1綁定對(duì)象類型的變量

5．1．2綁定計(jì)算屬性

5．1．3綁定數(shù)組

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

5．2綁定style屬性

5．2．1綁定對(duì)象類型的變量

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

5．2．3與瀏覽器兼容

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

5．4小結(jié)

5．5思考題

第6章CSS過(guò)渡和動(dòng)畫

6．1CSS過(guò)渡

6．1．1為組件設(shè)定名字

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

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

6．1．4設(shè)置初始過(guò)渡效果

6．1．5切換過(guò)渡的DOM元素

6．1．6過(guò)渡模式

6．1．7切換過(guò)渡的組件

6．2CSS動(dòng)畫

6．2．1使用第三方的CSS動(dòng)畫樣式類型庫(kù)

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

6．3過(guò)渡組合組件

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

6．5小結(jié)

6．6思考題

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

7．1注冊(cè)全局組件和局部組件

7．1．1注冊(cè)全局組件

7．1．2注冊(cè)局部組件

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

7．3向組件傳遞屬性

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

7．3．2對(duì)象類型的屬性

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

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

7．3．5傳遞對(duì)象

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

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

7．3．8屬性驗(yàn)證

7．4non�瞤rop屬性

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

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

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

7．5組件樹

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

7．6．1驗(yàn)證事件

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

7．6．3通過(guò)v�瞞odel指令綁定多個(gè)屬性

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

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

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

7．8小結(jié)

7．9思考題

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

8．1插槽

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

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

8．1．3為組件命名

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

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

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

8．3異步組件

8．3．1異步組件的選項(xiàng)

8．3．2局部異步組件

8．4組件的生命周期

8．5組件的混入塊

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

8．5．2全局混入塊

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

8．5．4使用混入塊的注意事項(xiàng)

8．6組件之間的互相訪問(wèn)

8．6．1訪問(wèn)根組件

8．6．2訪問(wèn)父組件

8．6．3訪問(wèn)子組件

8．6．4依賴注入

8．7組件的遞歸

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

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

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

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

8．10小結(jié)

8．11思考題

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

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

9．2真實(shí)DOM

9．3虛擬DOM

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

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

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

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

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

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

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

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

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

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

9．5．6生成動(dòng)態(tài)組件的節(jié)點(diǎn)

9．5．7自定義指令

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

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

9．8小結(jié)

9．9思考題

第10章Vue CLI腳手架工具

10．1Vue CLI簡(jiǎn)介以及安裝

10．2創(chuàng)建Vue項(xiàng)目

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

10．2．2刪除預(yù)配置

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

10．3Vue項(xiàng)目的結(jié)構(gòu)

10．3．1單文件組件

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

10．3．3項(xiàng)目的index．html文件和SPA單頁(yè)應(yīng)用

10．3．4運(yùn)行項(xiàng)目

10．4安裝和配置Visual Studio Code

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

10．4．2在VSCode中打開helloworld項(xiàng)目

10．4．3在VSCode中運(yùn)行helloworld項(xiàng)目

10．5創(chuàng)建單文件組件

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

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

10．5．3運(yùn)行修改后的helloworld項(xiàng)目

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小結(jié)

10．9思考題

第11章Vue Router路由管理器

11．1簡(jiǎn)單的路由管理

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

11．3在Vue項(xiàng)目中使用路由管理器

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

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

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

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

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

11．3．6運(yùn)行helloworld項(xiàng)目

11．4路由模式

11．5動(dòng)態(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中設(shè)置父組件和子組件的路由

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

11．7命名路由

11．7．1重定向

11．7．2使用別名

11．8命名視圖

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

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

11．9．2通過(guò)函數(shù)傳遞屬性

11．10編程式導(dǎo)航

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

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

11．11．2驗(yàn)證用戶是否登錄

11．11．3設(shè)置受保護(hù)資源

11．11．4在單頁(yè)面應(yīng)用中設(shè)置目標(biāo)路由的頁(yè)面標(biāo)題

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

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

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

11．12．1導(dǎo)航后抓取

11．12．2導(dǎo)航前抓取

11．13設(shè)置頁(yè)面的滾動(dòng)行為

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

11．13．2延遲滾動(dòng)

11．14延遲加載路由

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

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

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

11．16小結(jié)

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定義計(jì)算屬性

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

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

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

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

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

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

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

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

12．3小結(jié)

12．4思考題

第13章通過(guò)Axios訪問(wèn)服務(wù)器

13．1Axios的基本用法

13．1．1同域訪問(wèn)和跨域訪問(wèn)

13．1．2獲取響應(yīng)結(jié)果

13．1．3處理錯(cuò)誤

13．2在Vue項(xiàng)目中使用Axios

13．2．1異步請(qǐng)求

13．2．2POST請(qǐng)求方式

13．2．3對(duì)象和查詢字符串的轉(zhuǎn)換

13．2．4下載圖片

13．2．5上傳文件

13．2．6設(shè)置反向代理服務(wù)器

13．3Axios API的用法

13．4請(qǐng)求配置

13．4．1創(chuàng)建axios實(shí)例

13．4．2設(shè)定默認(rèn)的請(qǐng)求配置

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

13．4．4取消請(qǐng)求的令牌

13．5并發(fā)請(qǐng)求

13．6請(qǐng)求攔截器和響應(yīng)攔截器

13．7前端與后端的會(huì)話

13．7．1通過(guò)Cookie跟蹤會(huì)話

13．7．2通過(guò)token令牌跟蹤會(huì)話

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

13．9小結(jié)

13．10思考題

第14章通過(guò)Vuex進(jìn)行狀態(tài)管理

14．1Vuex的基本工作原理

14．2Vuex的基本用法

14．3在Vue項(xiàng)目中使用Vuex

14．3．1strict嚴(yán)格模式

14．3．2通過(guò)計(jì)算屬性訪問(wèn)狀態(tài)

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

14．3．4更新荷載

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

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

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

14．4倉(cāng)庫(kù)的getters選項(xiàng)

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

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

14．5倉(cāng)庫(kù)的actions選項(xiàng)

14．5．1傳入更新荷載

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

14．6異步動(dòng)作

14．6．1異步動(dòng)作范例

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

14．7表單處理

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

14．7．2可讀寫的計(jì)算屬性

14．8倉(cāng)庫(kù)的模塊化

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

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

14．8．3命名空間

14．9通過(guò)Composition API訪問(wèn)倉(cāng)庫(kù)

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

14．11小結(jié)

14．12思考題

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

15．1前端組件的結(jié)構(gòu)

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

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

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

15．2．3運(yùn)用Composition API提高代碼可重用性

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

15．2．5路由管理

15．2．6每個(gè)組件的頁(yè)面標(biāo)題

15．2．7用戶登錄流程

15．2．8受保護(hù)的資源

15．2．9異步處理Axios的請(qǐng)求

15．2．10單獨(dú)運(yùn)行前端項(xiàng)目

15．3后端架構(gòu)

15．3．1實(shí)現(xiàn)業(yè)務(wù)數(shù)據(jù)

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

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

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

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

15．4發(fā)布和運(yùn)行netstore應(yīng)用

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

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

15．4．3調(diào)試和運(yùn)行前端netstore項(xiàng)目

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

15．4．5運(yùn)行netstore應(yīng)用

15．5小結(jié)

附錄A思考題答案