目前單頁應(yīng)用框架層出不窮，Vue.js是其中十分耀眼的項(xiàng)目之一，廣受國內(nèi)外開發(fā)人員的推崇�！禫ue.js前端開發(fā)入門與實(shí)踐》講解Vue.js前端框架的基礎(chǔ)知識(shí)，共分為12章，包括Vue.js概述和安裝、TypeScript基礎(chǔ)、Vue.js應(yīng)用實(shí)例、Vue.js組件、Vue.js模板、Vue.js計(jì)算屬性與偵聽器、Vue.js樣式、Vue.js表達(dá)式、Vue.js事件、Vue.js表單和深入組件等內(nèi)容，最后還給出一個(gè)實(shí)戰(zhàn)案例供讀者系統(tǒng)學(xué)習(xí)Vue.js項(xiàng)目開發(fā)過程。 《Vue.js前端開發(fā)入門與實(shí)踐》既適合Vue.js初學(xué)者、Web前端開發(fā)人員閱讀，也適合高等院校和培訓(xùn)機(jī)構(gòu)的師生參考。
《Vue.js前端開發(fā)入門與實(shí)踐》介紹了應(yīng)用實(shí)例、組件、模板、計(jì)算屬性、監(jiān)聽器、指令、表單、事件、數(shù)據(jù)綁定、路由、依賴注入、自定義樣式、動(dòng)畫、渲染函數(shù)、測(cè)試、響應(yīng)式編程等，還介紹了Vue CLI、TypeScript、Animate.css、Mocha、Vue Router、Naive UI、vue-axios等內(nèi)容。Vue.js 3完全支持TypeScript，使讀者可以采用類、面向?qū)ο蟮姆绞竭M(jìn)行編程。本書不僅能幫助前端新手理解前端框架功能，而且為開發(fā)者閱讀源碼提供助力，還能對(duì)廣大的前端技術(shù)愛好者有所啟發(fā)，適合相關(guān)開發(fā)人員學(xué)習(xí)使用。
在使用Vue.js之前，筆者考察過Angular、React、Meteor，盡管這幾個(gè)框架都適合做快速開發(fā)，然而它們要么是學(xué)習(xí)曲線陡峭，概念復(fù)雜，把簡單的事情復(fù)雜化(如Angular)；要么就是編碼風(fēng)格不好，前后端代碼混寫在一起(如React、Meteor)。而Vue.js是當(dāng)今在stack overflow等國外技術(shù)站點(diǎn)上被一致看好的技術(shù)。
第一次使用Vue.js就可以發(fā)現(xiàn)入門特別快，有一定Webpack開發(fā)經(jīng)驗(yàn)的程序員，在一周內(nèi)就可以上手做項(xiàng)目，認(rèn)真學(xué)習(xí)的話，一個(gè)月就可以達(dá)到熟練水平(快速地開發(fā)項(xiàng)目)，兩三個(gè)月就可以達(dá)到高級(jí)水平(熟練使用Vuex，自己寫Component等)。這么快的上手速度，對(duì)于其他語言來說是不可想象的。根據(jù)筆者的實(shí)際體驗(yàn)，使用Angular入門需要一個(gè)月，使用React入門速度也不是很快�？傊�，越是簡潔的框架，就越容易學(xué)。
本書共分12章，具體內(nèi)容如下。
第1章講述了Vue.js產(chǎn)生的背景，并將Vue.js與React、Angular做了比較，使讀者對(duì)Vue.js有基本的認(rèn)識(shí)。
第2章講述了Vue.js的開發(fā)環(huán)境和Vue.js應(yīng)用的創(chuàng)建，以及Vue.js的目錄結(jié)構(gòu)。
第3章介紹了TypeScript基礎(chǔ)知識(shí)，使讀者對(duì)TypeScript有一個(gè)基本的認(rèn)識(shí)。
第4章介紹了Vue.js應(yīng)用實(shí)例的創(chuàng)建、執(zhí)行和生命周期，以及常用的前端模型。
第5章介紹了Vue.js組件的基本概念、組件的交互，并以插槽為例進(jìn)行分析，更有助于讀者了解組件。
第6章講述了Vue.js模板的基本概念，并以在模板中渲染文本、在模板中使用指令為例進(jìn)行分析，更有助于讀者了解模板。
第7章主要介紹了Vue.js計(jì)算屬性和偵聽器，通過實(shí)例講解了設(shè)置計(jì)算屬性和偵聽器的必要性，更有助于讀者了解計(jì)算屬性和偵聽器。
第8章主要介紹了Vue.js樣式，通過實(shí)例講解了Vue.js綁定樣式和內(nèi)聯(lián)樣式的方法。
第9章主要介紹了Vue.js表達(dá)式，并以條件表達(dá)式和循環(huán)表達(dá)式為例進(jìn)行分析，更有助于讀者了解Vue.js表達(dá)式。
第10章主要介紹了Vue.js事件，講述了事件的基本概念，并以如何處理原始的DOM、事件修飾符為例進(jìn)行分析，更有助于讀者了解Vue.js事件。
第11章主要介紹了Vue.js表單，講述了表單綁定的基本概念，并以表單中的文本、單選按鈕、復(fù)選框和選擇框?yàn)槔M(jìn)行講解，更有助于讀者了解Vue.js表單。
第12章深入介紹了Vue.js組件，講述了組件注冊(cè)的基本概念，并以全局注冊(cè)、局部注冊(cè)和輸入屬性為例進(jìn)行分析，更有助于讀者了解組件。
本書不僅融入了作者豐富的工作經(jīng)驗(yàn)和多年的使用心得，還提供了大量來自工作現(xiàn)場的實(shí)例，具有較強(qiáng)的實(shí)用性和可操作性。讀者系統(tǒng)學(xué)習(xí)后可以掌握Vue.js前端框架的基礎(chǔ)知識(shí)，擁有全面編寫框架的編程能力、優(yōu)良的團(tuán)隊(duì)協(xié)同技能和豐富的項(xiàng)目實(shí)戰(zhàn)經(jīng)驗(yàn)。編寫本書的目的就是讓框架初學(xué)者快速成長為合格的中級(jí)程序員，通過演練積累項(xiàng)目開發(fā)經(jīng)驗(yàn)和團(tuán)隊(duì)合作技能，在未來的職場中獲取一個(gè)較高的起點(diǎn)，并能迅速融入軟件開發(fā)團(tuán)隊(duì)中。
本書由唐山師范學(xué)院的姬婧、鄭錚兩位老師共同編寫，其中，第1章至第8章由姬婧老師編寫，第9章至第12章由鄭錚老師編寫。
由于編者水平有限，書中難免存在不足和疏漏之處，敬請(qǐng)廣大讀者批評(píng)、指正。
編 者
姬婧，現(xiàn)任唐山師范學(xué)院計(jì)算機(jī)科學(xué)系教師。主要從事vue.js設(shè)計(jì)開發(fā)、Web開發(fā)、游戲開發(fā)相關(guān)的教學(xué)與科研工作，具有豐富的軟件實(shí)踐經(jīng)驗(yàn)。在國內(nèi)專業(yè)權(quán)威期刊發(fā)表論文多篇，參與省廳市級(jí)教改、科研課題多項(xiàng)。
第1章 理解Vue.js及其產(chǎn)生的背景 1
1.1 什么是Vue.js 2
1.1.1 為什么使用Vue.js 2
1.1.2 Vue.js的主要特點(diǎn) 3
1.1.3 Vue.js的優(yōu)勢(shì) 4
1.2 Vue.js產(chǎn)生的背景 4
1.2.1 傳統(tǒng)的前端開發(fā)模式 5
1.2.2 Vue.js的開發(fā)模式 5
1.2.3 Vue.js與jQuery的區(qū)別 7
1.2.4 Vue.js與React、Angular的比較 8
1.2.5 如何選擇Angular、React和Vue.js 11
1.3 如何學(xué)習(xí)Vue.js 12
1.3.1 知識(shí)儲(chǔ)備 12
1.3.2 學(xué)習(xí)安排 17
1.4 小結(jié) 18
第2章 快速開啟 一個(gè)Vue.js應(yīng)用 19
2.1 開發(fā)環(huán)境準(zhǔn)備 20
2.1.1 安裝Node.js 20
2.1.2 設(shè)置NPM鏡像 21
2.1.3 選擇合適的IDE 22
2.1.4 安裝Vue CLI 29
2.1.5 檢查和調(diào)試Vue.js應(yīng)用的工具Vue Devtools 30
2.2 創(chuàng)建Vue.js應(yīng)用hello-world 32
2.2.1 利用Vue CLI初始化Vue.js應(yīng)用hello-world 32
2.2.2 運(yùn)行Vue.js應(yīng)用hello-world 33
2.3 探索Vue.js應(yīng)用 35
2.3.1 整體項(xiàng)目結(jié)構(gòu) 35
2.3.2 項(xiàng)目根目錄文件 35
2.3.3 node_modules目錄 36
2.3.4 public目錄 37
2.3.5 src目錄 37
2.4 在Vue.js應(yīng)用中使用TypeScript 38
2.4.1 基于Vue 3 Preview創(chuàng)建項(xiàng)目 38
2.4.2 基于Manually select features創(chuàng)建項(xiàng)目 39
2.4.3 TypeScript與JavaScript應(yīng)用的差異 43
2.5 小結(jié) 44
第3章 TypeScript基礎(chǔ) 45
3.1 TypeScript概述 46
3.1.1 TypeScript與JavaScript、ECMAScript的關(guān)系 46
3.1.2 TypeScript與Vue.js的關(guān)系 47
3.1.3 使用TypeScript的優(yōu)勢(shì) 48
3.1.4 安裝TypeScript 49
3.1.5 TypeScript代碼的編譯及運(yùn)行 49
3.2 常量與變量 51
3.2.1 const、let、var三者的作用域 52
3.2.2 常量與變量的區(qū)別 54
3.2.3 變量提升 55
3.3 TypeScript數(shù)據(jù)類型 64
3.3.1 基本類型 65
3.3.2 復(fù)雜基礎(chǔ)類型 71
3.3.3 對(duì)象類型 74
3.3.4 任意類型 75
3.3.5 聯(lián)合類型 75
3.3.6 交集類型 76
3.4 強(qiáng)大的面向?qū)ο篌w系 76
3.4.1 類 77
3.4.2 接口 78
3.4.3 演示接口的使用 78
3.4.4 泛型 79
3.4.5 演示泛型的使用 79
3.5 TypeScript的命名空間 80
3.5.1 聲明命名空間 80
3.5.2 命名空間體 80
3.5.3 導(dǎo)入聲明 81
3.5.4 導(dǎo)出聲明 81
3.5.5 合并聲明 82
3.6 TypeScript模塊 86
3.6.1 了解模塊 86
3.6.2 導(dǎo)入聲明 87
3.6.3 導(dǎo)入Require聲明 87
3.6.4 導(dǎo)出聲明 88
3.6.5 導(dǎo)出分配 88
3.6.6 了解CommonJS模塊 89
3.6.7 了解AMD模式 91
3.7 裝飾器 91
3.7.1 定義裝飾器 91
3.7.2 了解裝飾器的執(zhí)行時(shí)機(jī) 91
3.7.3 認(rèn)識(shí)4類裝飾器 93
3.8 小結(jié) 93
第4章 Vue.js應(yīng)用實(shí)例 95
4.1 創(chuàng)建應(yīng)用實(shí)例 96
4.1.1 一個(gè)應(yīng)用實(shí)例 97
4.1.2 讓應(yīng)用實(shí)例執(zhí)行方法 98
4.1.3 理解選項(xiàng)對(duì)象 99
4.1.4 理解根組件 102
4.1.5 理解MVC模型 104
4.1.6 理解MVP模型 105
4.1.7 理解MVVM模型 106
4.2 data property與data methods 107
4.2.1 理解data property 107
4.2.2 理解data methods 108
4.3 Vue.js的生命周期 110
4.3.1 生命周期中的鉤子函數(shù) 110
4.3.2 生命周期的圖示 111
4.3.3 生命周期鉤子函數(shù)的實(shí)例 112
4.4 小結(jié) 114
第5章 Vue.js組件 115
5.1 組件的基本概念 116
5.1.1 創(chuàng)建和注冊(cè)組件的基本步驟 116
5.1.2 理解組件的創(chuàng)建和注冊(cè) 117
5.1.3 父組件和子組件 118
5.1.4 DOM模板解析注意事項(xiàng) 119
5.1.5 data必須是函數(shù) 122
5.1.6 組件組合 124
5.1.7 組件注冊(cè) 124
5.2 組件通信 126
5.2.1 父組件與子組件通信 126
5.2.2 子組件與父組件通信 129
5.2.3 子組件之間的通信 130
5.2.4 通過插槽分發(fā)內(nèi)容 130
5.3 特殊情況 133
5.4 讓組件可以動(dòng)態(tài)加載 136
5.5 使用keep-alive緩存組件 137
5.6 小結(jié) 139
第6章 Vue.js模板 141
6.1 在模板中使用插值 142
6.1.1 文本 142
6.1.2 原生HTML代碼 143
6.1.3 綁定HTML屬性 145
6.1.4 JavaScript表達(dá)式 146
6.2 在模板中使用指令 148
6.2.1 理解指令中的參數(shù) 148
6.2.2 理解指令中的動(dòng)態(tài)參數(shù) 161
6.2.3 理解指令中的修飾符 163
6.3 在模板中使用指令的縮寫 164
6.3.1 使用v-bind指令的縮寫 165
6.3.2 使用v-on指令的縮寫 166
6.4 綜合實(shí)例 167
6.5 小結(jié) 172
第7章 Vue.js計(jì)算屬性與偵聽器 173
7.1 通過實(shí)例理解計(jì)算屬性的必要性 174
7.2 聲明計(jì)算屬性 176
7.3 計(jì)算屬性緩存與方法的關(guān)系 177
7.4 計(jì)算屬性的注意事項(xiàng) 178
7.4.1 計(jì)算函數(shù)不應(yīng)有副作用 178
7.4.2 避免直接修改計(jì)算屬性值 178
7.4.3 計(jì)算屬性無法追蹤非響應(yīng)式依賴 178
7.5 為什么需要偵聽器 179
7.5.1 理解偵聽器 179
7.5.2 一個(gè)偵聽器的實(shí)例 181
7.6 綜合實(shí)例 183
7.7 小結(jié) 187
第8章 Vue.js樣式 189
8.1 綁定樣式class 190
8.1.1 在class中綁定字符串 190
8.1.2 在class中綁定對(duì)象 191
8.1.3 在class中綁定數(shù)組 192
8.2 綁定內(nèi)聯(lián)樣式 193
8.2.1 在內(nèi)聯(lián)樣式中綁定對(duì)象 193
8.2.2 在內(nèi)聯(lián)樣式中綁定數(shù)組 194
8.2.3 在內(nèi)聯(lián)樣式中綁定多重值 195
8.3 綜合實(shí)例 196
8.4 小結(jié) 198
第9章 Vue.js表達(dá)式 199
9.1 Vue表達(dá)式的優(yōu)點(diǎn) 200
9.2 條件表達(dá)式 200
9.2.1 v-if指令的實(shí)例 201
9.2.2 v-else指令的實(shí)例 203
9.2.3 v-else-if指令的實(shí)例 204
9.2.4 v-show指令的實(shí)例 206
9.2.5 理解v-if指令與v-show指令的關(guān)系 207
9.3 for循環(huán)表達(dá)式 209
9.3.1 使用v-for指令遍歷數(shù)組 209
9.3.2 使用v-for指令遍歷數(shù)組設(shè)置索引 211
9.3.3 使用v-for指令遍歷對(duì)象的property名稱 212
9.3.4 數(shù)組過濾 213
9.3.5 使用值的范圍 214
9.4 v-for指令的不同使用場景 214
9.4.1 在中使用v-for指令 214
9.4.2 v-for指令與v-if指令一起使用 215
9.4.3 在組件上使用v-for指令 216
9.5 綜合實(shí)例 218
9.6 小結(jié) 222
第10章 Vue.js事件 223
10.1 什么是事件 224
10.1.1 一個(gè)簡單的監(jiān)聽事件實(shí)例 224
10.1.2 處理原始的DOM事件 225
10.1.3 為什么需要在HTML代碼中 監(jiān)聽事件 228
10.2 多事件處理器的實(shí)例 228
10.3 小結(jié) 231
第11章 Vue.js表單 233
11.1 理解表單輸入綁定 234
11.2 表單輸入綁定的基礎(chǔ)用法 235
11.2.1 文本 235
11.2.2 多行文本 236
11.2.3 復(fù)選框 237
11.2.4 單選按鈕 239
11.2.5 選擇框 240
11.3 表單修飾符的使用 241
11.3.1 使用.lazy修飾符的實(shí)例 242
11.3.2 使用.number修飾符的 實(shí)例 242
11.3.3 使用.trim修飾符的實(shí)例 244
11.4 綜合實(shí)例 245
11.5 小結(jié) 250
第12章 深入組件 251
12.1 什么是組件注冊(cè) 252
12.2 全局注冊(cè)的實(shí)現(xiàn) 252
12.3 局部注冊(cè)的實(shí)現(xiàn) 256
12.4 深入介紹props(輸入屬性) 260
12.4.1 props聲明 260
12.4.2 props名字格式 261
12.4.3 傳遞不同的值類型 262
12.4.4 props校驗(yàn) 264
12.4.5 運(yùn)行時(shí)類型檢查 266
12.5 綜合實(shí)例 267
12.6 小結(jié) 274
書單推薦
