《Vue.js綜合項(xiàng)目實(shí)踐》課件-任務(wù)一頁面局部設(shè)計(jì)

Vue.js核心技術(shù)應(yīng)用——任務(wù)一頁面局部設(shè)計(jì)學(xué)習(xí)目標(biāo)了解Vue、特點(diǎn)及使用場(chǎng)景掌握Vue開發(fā)工具及環(huán)境搭建掌握Vue應(yīng)用編寫步驟掌握bootstrap框架panel、table組件的使用知識(shí)目標(biāo)對(duì)具體任務(wù)的分析解讀能力對(duì)分析后的操作實(shí)施能力對(duì)程序的查錯(cuò)糾錯(cuò)能力技能目標(biāo)培養(yǎng)設(shè)計(jì)能力養(yǎng)成主動(dòng)思考、自主學(xué)習(xí)的習(xí)慣提升發(fā)現(xiàn)問題、分析問題、解決問題的能力培養(yǎng)創(chuàng)新思維、發(fā)散思維培養(yǎng)良好的溝通交流、語言表達(dá)及團(tuán)隊(duì)合作能力素養(yǎng)目標(biāo)一、任務(wù)描述本任務(wù)需要對(duì)頁面整體規(guī)劃進(jìn)行布局與設(shè)計(jì)，需求要求添加學(xué)生信息頁面需要規(guī)劃三個(gè)區(qū)域，分為導(dǎo)航區(qū)域、添加學(xué)生信息區(qū)域和學(xué)生數(shù)據(jù)顯示區(qū)域共3部分。二、任務(wù)分析本任務(wù)是讓學(xué)生掌握Hbuilder開發(fā)工具使用、項(xiàng)目的創(chuàng)建、頁面整體布局以及vue模板的編寫。根據(jù)任務(wù)描述，需要進(jìn)行如下分析：（1）創(chuàng)建項(xiàng)目并導(dǎo)入js文件；（2）引入vue和bootstrap相關(guān)js文件；（3）設(shè)計(jì)布局，使用div劃分區(qū)域，使用bootstrap的panel、table等組件構(gòu)建樣式；（4）搭建vue模板。三、相關(guān)知識(shí)（一）初識(shí)Vue.js1.什么是Vue.jsVue(讀音/vju?/，類似于view)是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時(shí)，Vue也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動(dòng)。三、相關(guān)知識(shí)（一）初識(shí)Vue.jsVue核心功能：基礎(chǔ)功能頁面渲染、表單處理提交、幫我們管理DOM(虛擬DOM)節(jié)點(diǎn)組件化開發(fā)增強(qiáng)代碼的復(fù)用能力，復(fù)雜系統(tǒng)代碼維護(hù)更簡(jiǎn)單前端路由更流暢的的用戶體驗(yàn)、靈活的在頁面切換已渲染組件的顯示，不需與后端做多余的交互前端工程化結(jié)合webpack等前端打包工具，管理多種靜態(tài)資源，代碼，測(cè)試，發(fā)布等，整合前端大型項(xiàng)目。狀態(tài)集中管理MVVM響應(yīng)式模型基礎(chǔ)上實(shí)現(xiàn)多組件之間的狀態(tài)數(shù)據(jù)同步與管理三、相關(guān)知識(shí)（一）初識(shí)Vue.js3.

Vue.js的特點(diǎn)輕量級(jí)的框架雙向數(shù)據(jù)綁定指令組件化客戶端路由狀態(tài)管理三、相關(guān)知識(shí)（二）開發(fā)環(huán)境1.HbuliderX開發(fā)工具三、相關(guān)知識(shí)（二）開發(fā)環(huán)境2.Vue.js文件三、相關(guān)知識(shí)（二）開發(fā)環(huán)境3.Node.js文件三、相關(guān)知識(shí)（二）開發(fā)環(huán)境4.安裝chrome瀏覽器和vue-tools插件三、相關(guān)知識(shí)（三）第一個(gè)Vue應(yīng)用1.編寫第一個(gè)Vue應(yīng)用在頁面輸出指定文本需求三、相關(guān)知識(shí)代碼如下：三、相關(guān)知識(shí)（四）Vue實(shí)例1.創(chuàng)建Vue實(shí)例在Vue項(xiàng)目中，每個(gè)Vue應(yīng)用都是通過Vue構(gòu)造器（newVue()）創(chuàng)建新的Vue實(shí)例開始的。三、相關(guān)知識(shí)（四）Vue實(shí)例2.

Vue實(shí)例配置選項(xiàng)詳解選項(xiàng)說明elVue的實(shí)例選項(xiàng)dataVue實(shí)例數(shù)據(jù)對(duì)象methods定義Vue實(shí)例中的方法computed計(jì)算屬性watch監(jiān)視屬性變化filters過濾器components定義組件三、相關(guān)知識(shí)（四）Vue實(shí)例2.Vue實(shí)例配置選項(xiàng)詳解-el根標(biāo)簽el選項(xiàng)的作用是指定設(shè)置當(dāng)前vue管理的視圖。在創(chuàng)建vue實(shí)例時(shí)，通過class或id選擇器用來將頁面結(jié)構(gòu)與vue實(shí)例對(duì)象vm中的el綁定。三、相關(guān)知識(shí)（四）Vue實(shí)例2.Vue實(shí)例配置選項(xiàng)詳解-data初始化數(shù)據(jù)data選項(xiàng)指定設(shè)置當(dāng)前vue實(shí)例所使用的數(shù)據(jù)，data的值可以是一個(gè)對(duì)象。Vue會(huì)將data的屬性轉(zhuǎn)換為getter、setter，從而讓data的屬性能夠響應(yīng)數(shù)據(jù)變化。訪問data中的數(shù)據(jù)可以通過vue實(shí)例對(duì)象.屬性名去訪問數(shù)據(jù)，vue的實(shí)例代理data對(duì)象上的所有屬性，因此vm.msg等價(jià)于vm.$data.msg。四、任務(wù)實(shí)施實(shí)施流程（一）安裝HbuliderX開發(fā)工具（二）創(chuàng)建項(xiàng)目工程（三）下載vue.js或vue.min.js文件（四）安裝node.js（五）安裝chrome瀏覽器和vue-tools插件（六）編寫vue模板代碼（七）開發(fā)頁面四、任務(wù)實(shí)施（一）安裝HbuliderX開發(fā)工具在瀏覽器中輸入HBuilderX官網(wǎng)地址http://www.dcloud.io/，點(diǎn)擊HBuilderX圖標(biāo)進(jìn)入HBuilderX產(chǎn)品頁面。四、任務(wù)實(shí)施（二）創(chuàng)建項(xiàng)目工程打開軟件后，可以點(diǎn)擊新建項(xiàng)目來創(chuàng)建我們自己的項(xiàng)目工程。四、任務(wù)實(shí)施（三）下載vue.js或vue.min.js文件要開發(fā)vue程序，首先需要引入vue.js，在官網(wǎng)上下載vue.js。下載地址/v2/guide/installation.html。對(duì)于初學(xué)者來說選擇開發(fā)版本（Vue.js）和生產(chǎn)版本（Vue.min.js）均可。四、任務(wù)實(shí)施（四）安裝node.js四、任務(wù)實(shí)施（五）安裝chrome瀏覽器和vue-tools插件步驟1：先從github上找到vue-devtools的項(xiàng)目，下載到本地。下載地址：/vuejs/vue-devtools#vue-devtools步驟2：在chrome瀏覽器輸入地址：“chrome://extensions/”進(jìn)入擴(kuò)展程序頁面，然后點(diǎn)擊“加載已解壓的擴(kuò)展程序...”按鈕四、任務(wù)實(shí)施（六）編寫vue模板代碼創(chuàng)建要控制的div元素，創(chuàng)建vue實(shí)例用來管理div元素四、任務(wù)實(shí)施（七）開發(fā)頁面編寫導(dǎo)航區(qū)域代碼、添加功能區(qū)域和表格區(qū)域代碼。初始化數(shù)據(jù)并顯示四、任務(wù)實(shí)施（七）開發(fā)頁面引入bootstrap.min.css文件四、任務(wù)實(shí)施（七）開發(fā)頁面使用bootstrap框架中的panel、table布局，在data屬性中初始化三個(gè)對(duì)象數(shù)據(jù)。五、任務(wù)評(píng)估（一）考核方法本任務(wù)采用線上+線下、教師評(píng)價(jià)、組間互評(píng)等“工程師+教師+學(xué)生+平臺(tái)”多主體參與的過程性、多元化、個(gè)性化、綜合化考核評(píng)價(jià)模式。從多角度全面考察，更加客觀科學(xué)，也更好地調(diào)動(dòng)學(xué)生自主學(xué)習(xí)、獨(dú)立思考和勇于創(chuàng)新的積極性，并將小組團(tuán)隊(duì)考核帶入個(gè)人考核，突出團(tuán)隊(duì)協(xié)作能力的培養(yǎng)。1.由網(wǎng)絡(luò)教學(xué)平臺(tái)全程記錄學(xué)生的學(xué)習(xí)軌跡和得分詳情，按照預(yù)先設(shè)置的權(quán)重，將線下評(píng)價(jià)與線上評(píng)價(jià)相結(jié)合，自動(dòng)分析生成學(xué)生的綜合成績(jī)；2.答辯式。針對(duì)提前完成項(xiàng)目的學(xué)生可以隨時(shí)可申請(qǐng)考核，提前通過對(duì)項(xiàng)目的詳細(xì)分析和講解，通過企業(yè)工程師、老師和同學(xué)提問的方式進(jìn)行考核，由企業(yè)工程師和專業(yè)老師共同把關(guān)。五、任務(wù)評(píng)估（二）相關(guān)知識(shí)評(píng)估1.如何搭建vue開發(fā)環(huán)境？2.如何編寫vue模板？3.如何理解vue常用實(shí)例？4.使用vue開發(fā)應(yīng)用的流程是什么？五、任務(wù)評(píng)估