第 1章 Vue.js+Spring Boot全棧開(kāi)發(fā)概述

1.1　Vue.js+Spring Boot全棧開(kāi)發(fā)核心技術(shù)棧的組成

1.1.1　Vue.js

1.1.2　Spring Boot

1.2　Vue.js+Spring Boot全棧開(kāi)發(fā)周邊技術(shù)棧的組成

1.2.1　Naive UI

1.2.2　md-editor-v3

1.2.3　Nginx

1.2.4　Spring Security

1.2.5　Spring MVC

1.2.6　Spring Data

1.2.7　Hibernate

1.2.8　H2

1.2.9　MySQL

1.3　Vue.js+Spring Boot全棧開(kāi)發(fā)的優(yōu)勢(shì)

1.4　開(kāi)發(fā)工具的選擇

1.4.1　前端開(kāi)發(fā)工具的選擇

1.4.2　后端開(kāi)發(fā)工具的選擇

1.5　總結(jié)

1.6　習(xí)題

第　2章 Vue.js基礎(chǔ)

2.1　Vue.js產(chǎn)生的背景

2.1.1　Vue.js與jQuery的不同

2.1.2　Vue.js與React、Angular優(yōu)勢(shì)對(duì)比

2.1.3　Vue.js、React、Angular三者怎么選

2.2　Vue.js的下載安裝

2.2.1　安裝Node.js和npm

2.2.2　Node.js與npm的關(guān)系

2.2.3　安裝npm鏡像

2.2.4　安裝Vue CLI

2.2.5　安裝Vue Devtools

2.3　Vue CLI的常用操作

2.3.1　獲取幫助

2.3.2　創(chuàng)建應(yīng)用

2.3.3　創(chuàng)建服務(wù)

2.3.4　啟動(dòng)應(yīng)用

2.3.5　編譯應(yīng)用

2.4　實(shí)例1：創(chuàng)建第 一個(gè)Vue.js應(yīng)用

2.4.1　使用Vue CLI初始化應(yīng)用

2.4.2　運(yùn)行Vue應(yīng)用

2.4.3　增加對(duì)TypeScript的支持

2.5　探索Vue.js應(yīng)用結(jié)構(gòu)

2.5.1　整體項(xiàng)目結(jié)構(gòu)

2.5.2　項(xiàng)目根目錄文件

2.5.3　node_modules目錄

2.5.4　public目錄

2.5.5　src目錄

2.6　總結(jié)

2.7　習(xí)題

第3章　Vue.js應(yīng)用實(shí)例

3.1　創(chuàng)建應(yīng)用實(shí)例

3.1.1　第 一個(gè)應(yīng)用實(shí)例

3.1.2　讓應(yīng)用實(shí)例執(zhí)行方法

3.1.3　理解選項(xiàng)對(duì)象

3.1.4　理解根組件

3.1.5　理解MVVM模型

3.2　data的property與methods

3.2.1　理解data property

3.2.2　理解data methods

3.3　生命周期

3.3.1　什么是生命周期鉤子

3.3.2　生命周期圖示

3.3.3　實(shí)例2：生命周期鉤子的例子

3.4　總結(jié)

3.5　習(xí)題

第4章　Vue.js組件

4.1　組件的基本概念

4.1.1　實(shí)例3：一個(gè)Vue.js組件的示例

4.1.2　什么是組件

4.1.3　組件的復(fù)用

4.1.4　Vue組件與Web組件的異同點(diǎn)

4.2　組件交互方式

4.2.1　實(shí)例4：通過(guò)prop向子組件傳遞數(shù)據(jù)

4.2.2　實(shí)例5：監(jiān)聽(tīng)子組件事件

4.2.3　實(shí)例6：兄弟組件之間的通信

4.2.4　實(shí)例7：通過(guò)插槽分發(fā)內(nèi)容

4.3　讓組件可以動(dòng)態(tài)加載

4.3.1　實(shí)現(xiàn)組件動(dòng)態(tài)加載的步驟

4.3.2　實(shí)例8：動(dòng)態(tài)組件的示例

4.4　使用緩存組件keep-alive

4.4.1　實(shí)例9：keep-alive的例子

4.4.2　keep-alive配置詳解

4.5　總結(jié)

4.6　習(xí)題

第5章　Vue.js模板

5.1　模板概述

5.2　實(shí)例10：插值

5.2.1　文本

5.2.2　原生HTML代碼

5.2.3　綁定HTML attribute

5.2.4　JavaScript表達(dá)式

5.3　實(shí)例11：在模板中使用指令

5.3.1　參數(shù)

5.3.2　理解指令中的動(dòng)態(tài)參數(shù)

5.3.3　理解指令中的修飾符

5.4　實(shí)例12：在模板中使用指令的縮寫

5.4.1　使用v-bind縮寫

5.4.2　使用v-on縮寫

5.5　使用模板的一些約定

5.5.1　對(duì)動(dòng)態(tài)參數(shù)值的約定

5.5.2　對(duì)動(dòng)態(tài)參數(shù)表達(dá)式的約定

5.5.3　對(duì)訪問(wèn)全局變量的約定

5.6　總結(jié)

5.7　習(xí)題

第6章　Vue.js計(jì)算屬性與監(jiān)聽(tīng)器

6.1　通過(guò)實(shí)例理解“計(jì)算屬性”的必要性

6.2　實(shí)例13：一個(gè)計(jì)算屬性的例子

6.2.1　聲明計(jì)算屬性

6.2.2　模擬數(shù)據(jù)更改

6.3　計(jì)算屬性緩存與方法的關(guān)系

6.4　為什么需要偵聽(tīng)器

6.4.1　理解偵聽(tīng)器

6.4.2　實(shí)例14：一個(gè)偵聽(tīng)器的例子

6.5　總結(jié)

6.6　習(xí)題

第7章　Vue.js表達(dá)式

7.1　條件表達(dá)式

7.1.1　實(shí)例15：v-if的例子

7.1.2　實(shí)例16：v-else的例子

7.1.3　實(shí)例17：v-else-if的例子

7.1.4　實(shí)例18：v-show的例子

7.2　for循環(huán)表達(dá)式

7.2.1　實(shí)例19：v-for遍歷數(shù)組的例子

7.2.2　實(shí)例20：v-for遍歷數(shù)組設(shè)置索引的例子

7.2.3　實(shí)例21：v-for遍歷對(duì)象property的例子

7.2.4　實(shí)例22：數(shù)組過(guò)濾的例子

7.2.5　實(shí)例23：使用值的范圍的例子

7.1.5　v-if與v-show的關(guān)系

7.3　v-for的不同使用場(chǎng)景

7.3.1　實(shí)例24：在