課程簡介
Vue 是前端開發(fā)的主流框架,是一個典型的MVVM結(jié)構(gòu),隨著版的不斷迭代,功能越發(fā)強大,漸漸成為前端開發(fā)的首選和必備框架,許多大型的企業(yè)都紛紛將該框架應(yīng)用到自己的項目中,雖然該框架入門易,但精通很難,必須要有實戰(zhàn)開發(fā)的經(jīng)歷。
本課程從最基礎(chǔ)的項目構(gòu)建講起,詳細介紹 Vue 的方方面面,包含組件的定義、傳值和路由、指令的定義和應(yīng)用,并結(jié)合最新的案例,講述框架開發(fā)項目的流程和注意事項,最后,完整地介紹了項目上線后的代碼測試和部署過程。
目標(biāo)收益
?學(xué)習(xí)Vue基礎(chǔ)開發(fā)的全部功能。
?學(xué)會如何在項目中應(yīng)用Vue框架開發(fā)。
?掌握在項目中定義和使用組件的過程。
?了解路由和指令應(yīng)用的方法和技巧。
?理解并掌握Vue 項目上線和部署的流程。
培訓(xùn)對象
?正在從事傳統(tǒng)PC端Web頁面的技術(shù)開發(fā)人員。
?希望從事移動端WebApp應(yīng)用開發(fā)的技術(shù)人員。
?對前端技術(shù)感興趣,希望從事這方面工作的人員。
?掌握一些傳統(tǒng)的前端開發(fā)技術(shù),想進一步學(xué)習(xí)移動端應(yīng)用開發(fā)的人員。
課程大綱
Vue框架創(chuàng)建項目 |
1.1環(huán)境構(gòu)建 1.2新建項目 1.3項目結(jié)構(gòu)分析 1.4框架創(chuàng)建項目注意事項 |
Vue基礎(chǔ)與數(shù)據(jù)綁定 |
2.1構(gòu)造器 2.2文本操作 2.3表達式 2.4數(shù)據(jù)綁定 |
常用指令與過濾器 |
3.1基礎(chǔ)指令 3.2高級指令 3.3常用過濾器 3.4數(shù)據(jù)排序 |
事件與特效 |
4.1樣式操作 4.2表單控件 4.3事件處理 4.4過渡效果 |
自定義操作 |
5.1自定義指令 5.2自定義過濾器 5.3自定義組件 |
組件基礎(chǔ)開發(fā) |
6.1組件的定義與傳值 6.2組件的動態(tài)傳值 6.3組件的屬性值的驗證 |
組件高級應(yīng)用 |
7.1組件的自定義事件并向父傳值 7.2多個子類組件的使用 7.3使用子類組件優(yōu)化頁面代碼 |
指令的應(yīng)用 |
8.1什么是指令 8.2定義指令的方法 8.3指令的使用 |
Vue框架的路由 |
9.1路由的功能和定義方法 9.2路由切換時的事件觸發(fā) 9.3路由配置時注意事項 |
Vue框架項目實戰(zhàn) |
10.1案例一:無刷新的導(dǎo)航條 10.2案例二:單頁面人員信息管理 10.3案例三:多數(shù)據(jù)聯(lián)動的購物車 |
單元測試mocha的應(yīng)用 |
11.1使用語法 11.2瀏覽器測試 11.3異步測試 |
Vue框架內(nèi)測試 |
12.1內(nèi)置測試框架 12.2單元測試的配置 12.3測試時注意事項 |
打包工具webpack的應(yīng)用 |
13.1特點與優(yōu)勢 13.2安裝與配置 13.3使用方法 |
Vue框架上線發(fā)布 |
14.1項目打包與發(fā)布 14.2打包時的資源配置 14.3發(fā)布時的代碼壓縮 |
Vue框架創(chuàng)建項目 1.1環(huán)境構(gòu)建 1.2新建項目 1.3項目結(jié)構(gòu)分析 1.4框架創(chuàng)建項目注意事項 |
Vue基礎(chǔ)與數(shù)據(jù)綁定 2.1構(gòu)造器 2.2文本操作 2.3表達式 2.4數(shù)據(jù)綁定 |
常用指令與過濾器 3.1基礎(chǔ)指令 3.2高級指令 3.3常用過濾器 3.4數(shù)據(jù)排序 |
事件與特效 4.1樣式操作 4.2表單控件 4.3事件處理 4.4過渡效果 |
自定義操作 5.1自定義指令 5.2自定義過濾器 5.3自定義組件 |
組件基礎(chǔ)開發(fā) 6.1組件的定義與傳值 6.2組件的動態(tài)傳值 6.3組件的屬性值的驗證 |
組件高級應(yīng)用 7.1組件的自定義事件并向父傳值 7.2多個子類組件的使用 7.3使用子類組件優(yōu)化頁面代碼 |
指令的應(yīng)用 8.1什么是指令 8.2定義指令的方法 8.3指令的使用 |
Vue框架的路由 9.1路由的功能和定義方法 9.2路由切換時的事件觸發(fā) 9.3路由配置時注意事項 |
Vue框架項目實戰(zhàn) 10.1案例一:無刷新的導(dǎo)航條 10.2案例二:單頁面人員信息管理 10.3案例三:多數(shù)據(jù)聯(lián)動的購物車 |
單元測試mocha的應(yīng)用 11.1使用語法 11.2瀏覽器測試 11.3異步測試 |
Vue框架內(nèi)測試 12.1內(nèi)置測試框架 12.2單元測試的配置 12.3測試時注意事項 |
打包工具webpack的應(yīng)用 13.1特點與優(yōu)勢 13.2安裝與配置 13.3使用方法 |
Vue框架上線發(fā)布 14.1項目打包與發(fā)布 14.2打包時的資源配置 14.3發(fā)布時的代碼壓縮 |