本書系統(tǒng)地介紹了Vue.js前端開發(fā)的主要知識和典型應(yīng)用,內(nèi)容涵蓋Web前端開發(fā)基礎(chǔ)、常用開發(fā)工具、Vue基本語法及應(yīng)用、Vue路由、Vuex狀態(tài)管理、Vue過渡和動畫、Vue高級開發(fā)環(huán)境、路由及狀態(tài)管理進(jìn)階、服務(wù)器端渲染、UI框架的應(yīng)用和網(wǎng)絡(luò)日記系統(tǒng)前端開發(fā)等。本書精心選擇和組織Vue.js框架知識,按照工作過程設(shè)計學(xué)習(xí)任務(wù),內(nèi)容循序漸進(jìn),語言通俗易懂,實驗步驟詳盡,可以幫助讀者快速掌握Vue.js的相關(guān)知識及應(yīng)用,切實有效地提高前端應(yīng)用的開發(fā)技能。通過引入并使用ElementUI、MintUI等UI框架,讀者可以輕松開發(fā)出具有極佳用戶體驗的界面。本書結(jié)構(gòu)合理,內(nèi)容豐富,實用性強(qiáng),可以作為高等院校計算機(jī)及相關(guān)專業(yè)學(xué)生的教材,也可以作為前端開發(fā)工程師的培訓(xùn)教材。前端開發(fā)人員及移動應(yīng)用開發(fā)人員也可以選擇本書作為自學(xué)用書。
《Vue.js前端開發(fā)實戰(zhàn)》基于vue.js 2.x版本,采用知識點 案例的形式編寫,全面深入地講解vue進(jìn)行web前端系統(tǒng)開發(fā)的原理及典型應(yīng)用。本書將枯燥晦澀的理論通過圖文結(jié)合的方式進(jìn)行講述,把難于理解的專業(yè)技術(shù)名詞用通俗化的語言進(jìn)行講解,將抽象知識點用具體生動的應(yīng)用案例進(jìn)行展現(xiàn)。幫助讀者既能快速理解理論知識,又能快速學(xué)會具體應(yīng)用。本書將實際開發(fā)場景中高頻使用的知識點作為重點,幫助讀者花費較少的時間與精力成本,取得*佳的學(xué)習(xí)效果。
Web前端開發(fā)主要使用HTML、CSS 和JavaScript框架(Vue.js)。HTML主要用來編寫網(wǎng)頁的結(jié)構(gòu)。CSS主要用來實現(xiàn)頁面樣式,包括顏色、大小、字體等,實現(xiàn)布局美觀、合理的頁面效果。JavaScript主要用來實現(xiàn)頁面邏輯、行為、動作等,動態(tài)操作元素的屬性,為頁面提供交互效果,實現(xiàn)更好的用戶體驗。在構(gòu)建大型交互式項目時,需要使用JavaScript語言編寫的框架來提高開發(fā)效率。JavaScript框架的核心理念是讓開發(fā)者只需寫很少的代碼,就可以實現(xiàn)更多的功能。Vue (讀音\[vju\]) 是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架。Vue 被設(shè)計為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層,方便與第三方庫或既有項目整合。另一方面,Vue 完全有能力驅(qū)動采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)的復(fù)雜單頁應(yīng)用。為方便讀者閱讀并上機(jī)練習(xí),本書在章節(jié)內(nèi)容安排上注重循序漸進(jìn),實用性強(qiáng)。全書共分11章,每章內(nèi)容簡介如下:第1章主要介紹Web前端開發(fā)的基礎(chǔ)知識。在前端開發(fā)中,讀者將使用HTML5作為構(gòu)建Web頁面內(nèi)容的基礎(chǔ)語言,編寫網(wǎng)頁的結(jié)構(gòu);使用CSS3實現(xiàn)頁面樣式;使用JavaScript作為實現(xiàn)頁面邏輯、行為和動作等的基礎(chǔ)語言;使用Vue作為前端開發(fā)的JavaScript框架;使用ElementUI或MintUI作為用戶界面UI組件庫。第2章主要介紹Visual Studio Code、HBuilderX、Notepad 、谷歌瀏覽器、火狐瀏覽器等開發(fā)工具。如果讀者沒有熟悉的Web前端開發(fā)工具,建議直接使用本章推薦的工具。當(dāng)然,讀者也可以選擇自己習(xí)慣使用的開發(fā)工具。第3章主要對Vue基礎(chǔ)語法及應(yīng)用進(jìn)行講解,包括Vue實例及配置選項、Vue數(shù)據(jù)綁定、Vue事件、Vue組件、Vue生命周期、Vue全局API、Vue實例屬性、Vue組件合并和Vue全局配置等。第4章主要介紹Vue路由,包括vuerouter基礎(chǔ),使用動態(tài)路由進(jìn)行路由匹配,嵌套路由,命名路由,命名視圖和編程式導(dǎo)航等。Vue路由允許用戶使用不同的URL來訪問不同的內(nèi)容。第5章主要圍繞Vuex狀態(tài)管理進(jìn)行詳細(xì)講解,包括Vuex基礎(chǔ)知識、Vuex配置選項、Vuex中的API等。第6章主要介紹過渡和動畫基礎(chǔ)、多個元素過渡、多個組件過渡、列表過渡。在Web項目中合理使用過渡和動畫效果,能夠改善用戶體驗,提高頁面的交互性,影響用戶的行為,引導(dǎo)用戶的注意力以及幫助用戶看到自己動作的反饋。第7章主要對Vue開發(fā)環(huán)境搭建及其應(yīng)用進(jìn)行講解,包括Vue開發(fā)環(huán)境的搭建方法,Vue項目的創(chuàng)建方法,CLI服務(wù)的原理,vue.config.js文件的配置方法,全局環(huán)境變量與模式的配置及靜態(tài)資源的處理。在頁面中通過
張建寧,高級工程師,先后在軟件公司及某知名IT培訓(xùn)機(jī)構(gòu)擔(dān)任高級工程師及講師職務(wù)。作者長期從事軟件開發(fā)及教學(xué)工作,具有豐富的開發(fā)及教學(xué)經(jīng)驗,任教期間獲得了領(lǐng)導(dǎo)及學(xué)生的一致好評。
第1章Web前端開發(fā)基礎(chǔ)/1
1.1HTML5/1
1.2CSS3/2
1.3JavaScript/3
1.4jQuery簡介/33
1.5Vue/34
1.6ElementUI/34
1.7MintUI/34
1.8前端開發(fā)技術(shù)選型/35
第2章常用開發(fā)工具/36
2.1Visual Studio Code/36
2.2HBuilderX/40
2.3Notepad /41
2.4谷歌/火狐瀏覽器/43
2.5JavaScript基本應(yīng)用/45
2.6jQuery基本應(yīng)用/53
2.7Vue基本應(yīng)用/54
第3章Vue基本語法及應(yīng)用/58
3.1Vue實例及配置選項/58
3.2Vue數(shù)據(jù)綁定/67
3.3Vue事件/79
3.4Vue組件/86
3.5Vue生命周期/95
3.6Vue全局API/101
3.7Vue實例屬性/107
3.8Vue組件合并/117
3.9Vue全局配置/121
第4章Vue路由/127
4.1路由簡介/127
4.2vuerouter基礎(chǔ)/128
4.3動態(tài)路由/131
4.4嵌套路由/135
4.5命名路由/138
4.6命名視圖/140
4.7編程式導(dǎo)航/143
第5章Vuex狀態(tài)管理/149
5.1Vuex入門/149
5.2Vuex配置選項/155
5.3Vuex中的API/170
第6章Vue過渡和動畫/174
6.1過渡和動畫基礎(chǔ)/174
6.2多個元素過渡/183
6.3多個組件過渡/188
6.4列表過渡/190
第7章Vue高級開發(fā)環(huán)境/202
7.1搭建Vue開發(fā)環(huán)境/202
7.2插件/213
7.3CLI服務(wù)和配置文件/214
7.4環(huán)境變量和模式/220
7.5靜態(tài)資源管理/222
第8章路由及狀態(tài)管理進(jìn)階/225
8.1用戶登錄注冊案例/225
8.2購物車案例/231
第9章服務(wù)器端渲染/244
9.1服務(wù)器端渲染概述/244
9.2手動搭建簡單服務(wù)器端渲染項目/245
9.3Vue CLI webpack搭建服務(wù)器端渲染項目/249
9.4Nuxt.js搭建服務(wù)器端渲染項目器/254
第10章UI框架的應(yīng)用/260
10.1ElementUI/260
10.2MintUI/270
第11章網(wǎng)絡(luò)日記系統(tǒng)前端開發(fā)/278
11.1系統(tǒng)概述/278
11.2環(huán)境準(zhǔn)備/280
11.3項目搭建/280
11.4用戶模塊/283
11.5日記模塊/290
參考文獻(xiàn)/309