Vue.js快跑：構(gòu)建觸手可及的高性能Web應(yīng)用

前言 .............................................................................................xi

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

為什么選擇 Vue.js ..................................................................................................1

安裝和設(shè)置 ............................................................................................................4

vue-loader 和 webpack .....................................................................................4

模板（Template）、數(shù)據(jù)（Data）和指令（Directive）...........................................6

v-if vs v-show .......................................................................................................10

模板中的循環(huán) ......................................................................................................11

屬性綁定 ..............................................................................................................13

響應(yīng)式 ..................................................................................................................15

響應(yīng)式如何實(shí)現(xiàn) ............................................................................................16

注意事項(xiàng) .......................................................................................................17

雙向數(shù)據(jù)綁定 ......................................................................................................19

動(dòng)態(tài)設(shè)置 HTML ..................................................................................................21

方法 .....................................................................................................................22

this.................................................................................................................23

計(jì)算屬性 ..............................................................................................................24

偵聽(tīng)器 ..................................................................................................................27

監(jiān)聽(tīng) data 對(duì)象中某個(gè)對(duì)象的屬性 .................................................................29

獲取舊值 .......................................................................................................29

深度監(jiān)聽(tīng) .......................................................................................................30

過(guò)濾器 ..................................................................................................................30

使用 ref 直接訪問(wèn)元素 .........................................................................................33

輸入和事件 ..........................................................................................................33

v-on 簡(jiǎn)寫(xiě) .......................................................................................................34

事件修飾符 ...................................................................................................34

生命周期鉤子 ......................................................................................................37

自定義指令 ..........................................................................................................38

鉤子函數(shù)參數(shù) ................................................................................................40

過(guò)渡和動(dòng)畫(huà) ..........................................................................................................41

CSS 過(guò)渡 .......................................................................................................41

JavaScript 動(dòng)畫(huà) ..............................................................................................44

總結(jié) .....................................................................................................................46

第 2 章 Vue.js 組件 .....................................................................47

組件基礎(chǔ) ..............................................................................................................47

數(shù)據(jù)、方法和計(jì)算屬性 ........................................................................................48

傳遞數(shù)據(jù) ..............................................................................................................49

Prop 驗(yàn)證 .......................................................................................................50

Prop 的大小寫(xiě) ...............................................................................................51

響應(yīng)式 ...........................................................................................................52

數(shù)據(jù)流和 .sync 修飾符 ..................................................................................53

自定義輸入組件與 v-model ...........................................................................56

使用插槽（slot）將內(nèi)容傳遞給組件 ...................................................................57

默認(rèn)內(nèi)容 .......................................................................................................58

具名插槽 .......................................................................................................59

作用域插槽 ...................................................................................................60

自定義事件 ..........................................................................................................62

混入 .....................................................................................................................65

混入對(duì)象和組件的合并 .................................................................................67

vue-loader 和 .vue 文件 ........................................................................................68

非 Prop 屬性 ........................................................................................................70

組件和 v-for 指令 ................................................................................................71

總結(jié) .....................................................................................................................74

第 3 章 使用 Vue 添加樣式 ..........................................................77

Class 綁定 ............................................................................................................77

內(nèi)聯(lián)樣式綁定 ......................................................................................................79

數(shù)組語(yǔ)法 .......................................................................................................80

多重值 ...........................................................................................................80

用 vue-loader 實(shí)現(xiàn) Scoped CSS ...........................................................................81

用 vue-loader 實(shí)現(xiàn) CSS Modules .........................................................................82

預(yù)處理器 ..............................................................................................................83

總結(jié) .....................................................................................................................83

第 4 章 render 函數(shù)和 JSX ..........................................................85

標(biāo)簽名稱(chēng) ..............................................................................................................86

數(shù)據(jù)對(duì)象 ..............................................................................................................86

子節(jié)點(diǎn) ..................................................................................................................88

JSX ......................................................................................................................89

總結(jié) .....................................................................................................................91

第 5 章 使用 vue-router 實(shí)現(xiàn)客戶端路由 ......................................93

安裝 .....................................................................................................................93

基本用法 ..............................................................................................................94

HTML5 History 模式 ...........................................................................................96

動(dòng)態(tài)路由 ..............................................................................................................97

響應(yīng)路由變化 ................................................................................................98

路由參數(shù)作為組件屬性傳入 .......................................................................100

嵌套路由 ............................................................................................................101

重定向和別名 ....................................................................................................103

鏈接導(dǎo)航 ............................................................................................................104

tag 屬性 .......................................................................................................105

active-class 屬性 ..........................................................................................106

原生事件 .....................................................................................................107

編程式導(dǎo)航 .................................................................................................107

導(dǎo)航守衛(wèi) ............................................................................................................108

路由獨(dú)享守衛(wèi) ..............................................................................................110

組件內(nèi)部守衛(wèi) .............................................................................................. 111

路由順序 ............................................................................................................112

404 頁(yè)面 ......................................................................................................113

路由命名 ............................................................................................................114

總結(jié) ...................................................................................................................115

第 6 章 使用 vuex 實(shí)現(xiàn)狀態(tài)管理 ................................................117

安裝 ...................................................................................................................118

概念 ...................................................................................................................119

State 及其輔助函數(shù) ............................................................................................121

State 輔助函數(shù).............................................................................................122

Getter .................................................................................................................124

Getter 輔助函數(shù) ...........................................................................................126

Mutation .............................................................................................................126

Mutation 輔助函數(shù) ......................................................................................128

Mutation 必須是同步函數(shù) ...........................................................................128

Action ................................................................................................................129

Action 輔助函數(shù) ..........................................................................................130

參數(shù)解構(gòu) .....................................................................................................131

Promise 與 Action ..............................................................................................131

Module ...............................................................................................................132

文件結(jié)構(gòu) .....................................................................................................134

帶命名空間的模塊 ......................................................................................135

總結(jié) ...................................................................................................................137

第 7 章 對(duì) Vue 組件進(jìn)行測(cè)試 .....................................................139

測(cè)試單個(gè)組件 ....................................................................................................139

介紹 vue-test-utils ..............................................................................................141

查詢(xún) DOM ..........................................................................................................142

掛載選項(xiàng) ............................................................................................................143

模擬和存根數(shù)據(jù) .................................................................................................145

測(cè)試事件 ............................................................................................................146

總結(jié) ...................................................................................................................148

附錄 A 搭建 Vue 開(kāi)發(fā)環(huán)境 .........................................................149

附錄 B Vue 與 React ................................................................153

索引 ..........................................................................................171