本書是一本介紹Web前端開發(fā)框架Vue.js的實(shí)戰(zhàn)教程,主要滿足高等職業(yè)教育軟件技術(shù)專業(yè)Web前端開發(fā)方向課程的教學(xué)需要。全書從一個(gè)完整實(shí)戰(zhàn)項(xiàng)目中抽取出小任務(wù),每單元以小任務(wù)的完成為主線,介紹Vue.js前端開發(fā)的各項(xiàng)知識(shí),包括開發(fā)與調(diào)試環(huán)境準(zhǔn)備,ECMAScript6語(yǔ)法簡(jiǎn)介及常見的對(duì)象、函數(shù)、數(shù)組、字符串等擴(kuò)展語(yǔ)法,Vue.js語(yǔ)法、指令、條件渲染、循環(huán)渲染、計(jì)算屬性、方法屬性、偵聽器、Class與Style綁定、表單雙向綁定、組件、虛擬DOM;了解render函數(shù)、過濾器、路由、過渡、動(dòng)畫、混入使用Axios與服務(wù)器通信、使用Vuex進(jìn)行全局狀態(tài)管理、部署Vue項(xiàng)目等,最后從小任務(wù)的整合到整個(gè)項(xiàng)目的完成形成一個(gè)綜合性案例。本書由學(xué)校教師和企業(yè)軟件開發(fā)工程師合作共同編寫,教學(xué)案例來源于企業(yè)真實(shí)項(xiàng)目。本教材體系完整,內(nèi)容豐富,配套資源齊全,注重實(shí)踐性和可操作性,既可作為高等職業(yè)教育計(jì)算機(jī)類專業(yè)學(xué)生的學(xué)習(xí)用書,也可作為軟件開發(fā)人員能力提升的自學(xué)參考用書。
方選政,1981,講師,重慶奉節(jié)人。2006年6月參加工作,先后在重慶正大軟件職業(yè)學(xué)院任教、重慶華日軟件股份有限公司任軟件開發(fā)工程師。于2014年重慶大學(xué)取得軟件工程碩士學(xué)位,現(xiàn)在重慶開放大學(xué)電子信息工程學(xué)院從事教學(xué)及科研工作,主要研究范圍包括大數(shù)據(jù)、人工智能及算法分析與設(shè)計(jì)。
導(dǎo)言 1
單元1 Vue項(xiàng)目構(gòu)建 6
學(xué)習(xí)情境1.1 使用Vue.js完成網(wǎng)頁(yè)設(shè)計(jì) 6
1.1.1 Vue簡(jiǎn)介 9
1.1.2 Vue安裝 12
1.1.3 Vue聲明式渲染 13
學(xué)習(xí)情境1.2 使用Vue init構(gòu)建Vue 2.x項(xiàng)目 23
1.2.1 Vue CLI 26
1.2.2 Node.js 27
1.2.3 Vue init 30
學(xué)習(xí)情境1.3 使用Vue create構(gòu)建Vue 2.x項(xiàng)目 42
學(xué)習(xí)情境1.4 使用Vue ui構(gòu)建Vue 3.x項(xiàng)目 55
單元2 Vue網(wǎng)頁(yè)設(shè)計(jì) 72
學(xué)習(xí)情境2.1 使用v-model構(gòu)建智慧醫(yī)養(yǎng)注冊(cè)頁(yè)面 72
2.1.1 模板語(yǔ)法 75
2.1.2 表單輸入綁定 81
2.1.3 基本指令 89
2.1.4 事件綁定 94
2.1.5 偵聽器 99
學(xué)習(xí)情境2.2 使用渲染指令構(gòu)建智慧醫(yī)養(yǎng)首頁(yè) 114
2.2.1 Class與Style綁定 116
2.2.2 過渡&動(dòng)畫 119
學(xué)習(xí)情境2.3 使用computed計(jì)算健康設(shè)備購(gòu)物車數(shù)據(jù) 139
2.3.1 計(jì)算屬性 141
2.3.2 過濾器 145
單元3 Vue組件化開發(fā) 159
學(xué)習(xí)情境3.1 智慧醫(yī)養(yǎng)首頁(yè)Banner組件化開發(fā) 159
3.1.1 組件注冊(cè) 162
3.1.2 Prop 165
3.1.3 監(jiān)聽子組件事件 166
3.1.4 插槽 167
學(xué)習(xí)情境3.2 使用Vue Router組件化開發(fā)智慧醫(yī)養(yǎng)導(dǎo)航 179
3.2.1 Vue Router安裝 181
3.2.2 路由的定義與使用 182
3.2.3 路由元信息和編程式導(dǎo)航 188
單元4 網(wǎng)頁(yè)交互與數(shù)據(jù)通信 197
學(xué)習(xí)情境4.1 使用Vue-Resource完成智慧醫(yī)養(yǎng)用戶注冊(cè) 197
學(xué)習(xí)情境4.2 使用Axios實(shí)時(shí)展示智慧醫(yī)養(yǎng)首頁(yè)數(shù)據(jù) 209
單元5 Vue項(xiàng)目打包部署 224
學(xué)習(xí)情境 Vue項(xiàng)目打包與部署 224
5.1.1 Vue項(xiàng)目打包 226
5.1.2 服務(wù)器 227