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