《ECharts數(shù)據(jù)可視化實(shí)戰(zhàn)》課件第6章 Vue.js項(xiàng)目開發(fā)基礎(chǔ) 教案

第6章Vue.js項(xiàng)目開發(fā)基礎(chǔ)教案課程名稱：《ECharts數(shù)據(jù)可視化實(shí)戰(zhàn)》課程類別：必修適用專業(yè)：大數(shù)據(jù)技術(shù)類、商務(wù)數(shù)據(jù)分析與應(yīng)用、電子商務(wù)等相關(guān)專業(yè)總學(xué)時：64學(xué)時（其中理論32學(xué)時，實(shí)驗(yàn)32學(xué)時）總學(xué)分：4.0學(xué)分本章學(xué)時：12學(xué)時材料清單《ECharts數(shù)據(jù)可視化實(shí)戰(zhàn)》教材。配套PPT。數(shù)據(jù)。代碼。引導(dǎo)性提問。探究性問題。拓展性問題。教學(xué)目標(biāo)與基本要求教學(xué)目標(biāo)首先介紹Vue概述、Vue的下載和引用、第一個Vue實(shí)例。然后著重介紹Vue常用指令、事件監(jiān)聽、事件處理和事件修飾符、雙向數(shù)據(jù)綁定、了解Vue生命周期。最后介紹Vue路由的搭建、掌握Axios組件獲取后臺數(shù)據(jù)?；疽骎ue的下載和引用、創(chuàng)建第一個Vue實(shí)例。掌握Vue常用指令。了解Vue生命周期。掌握Vue路由的搭建。掌握Axios框架獲取后臺數(shù)據(jù)。問題引導(dǎo)性提問引導(dǎo)性提問需要教師根據(jù)教材內(nèi)容和學(xué)生實(shí)際水平，提出問題，啟發(fā)引導(dǎo)學(xué)生去解決問題，提問，從而達(dá)到理解、掌握知識，發(fā)展各種能力和提高思想覺悟的目的。Vue.js中，如何遍歷一組數(shù)組中的數(shù)據(jù)？探究性問題探究性問題需要教師深入鉆研教材的基礎(chǔ)上精心設(shè)計，提問的角度或者在引導(dǎo)性提問的基礎(chǔ)上，從重點(diǎn)、難點(diǎn)問題切入，進(jìn)行插入式提問?；蛘呤菍σ龑?dǎo)式提問中尚未涉及但在課文中又是重要的問題加以設(shè)問。Vue.js中，如何進(jìn)行雙向數(shù)據(jù)綁定？Vue.js中，如何進(jìn)行頁面跳轉(zhuǎn)？拓展性問題拓展性問題需要教師深刻理解教材的意義，學(xué)生的學(xué)習(xí)動態(tài)后，根據(jù)學(xué)生學(xué)習(xí)層次，提出切實(shí)可行的關(guān)乎實(shí)際的可操作問題。亦可以提供拓展資料供學(xué)生研習(xí)探討，完成拓展性問題。如何在開發(fā)中實(shí)現(xiàn)前后端分離？主要知識點(diǎn)、重點(diǎn)與難點(diǎn)主要知識點(diǎn)Vue的下載和引用、創(chuàng)建第一個Vue實(shí)例。掌握Vue常用指令。了解Vue生命周期。掌握Vue路由的搭建。掌握Axios框架獲取后臺數(shù)據(jù)。重點(diǎn)掌握Vue常用指令。Vue路由的搭建。難點(diǎn)掌握Axios框架獲取后臺數(shù)據(jù)。教學(xué)過程設(shè)計理論教學(xué)過程了解Vue概述。了解Web前端技術(shù)發(fā)展概述。了解Web前端三大主流框架。掌握Vue的下載與引入。掌握Vue實(shí)例及其選項(xiàng)。掌握雙大括號標(biāo)簽、v-text與v-html指令。了解Vue優(yōu)化指令：v-cloak，v-once，v-pre。掌握v-if/v-else-if/v-else指令用于條件渲染。掌握v-show指令用于切換元素的顯示與隱藏。掌握v-bind指令用于單向數(shù)據(jù)綁定。掌握v-for指令用于列表渲染。掌握v-on指令用于事件監(jiān)聽與事件處理。掌握v-model指令用于雙向數(shù)據(jù)綁定。掌握Vue實(shí)例創(chuàng)建期間的生命周期函數(shù)。掌握路由的安裝和基本使用。掌握嵌套路由、傳遞參數(shù)及獲取參數(shù)、路由重定向、編程式導(dǎo)航。Axios的安裝及引入、get請求、post請求。實(shí)驗(yàn)教學(xué)過程在HTML文件中創(chuàng)建第一個Vue實(shí)例代碼分析。輸出data對象的屬性值案例代碼分析。使用簡單表達(dá)式關(guān)鍵實(shí)例代碼分析。v-text指令與插值表達(dá)式案例代碼分析。v-text與v-html指令及胡子語法案例代碼分析。v-if指令案例代碼分析。v-if&v-else指令案例代碼分析。v-else-if指令案例代碼分析。v-if/v-else-if/v-else指令案例代碼分析。v-show指令案例代碼分析。v-bind指令案例代碼分析。v-for指令遍歷數(shù)組案例代碼分析。v-on指令產(chǎn)生隨機(jī)數(shù)案例代碼分析。v-on指令綁定方法案例代碼分析。v-on指令-阻止冒泡案例代碼分析。v-model指令-綁定單行文本框案例代碼分析。v-model指令-文本框搜索圖書信息案例代碼分析。v-model指令-綁定文本域案例代碼分析。v-model指令-綁定文本域案例代碼分析。v-model指令-綁定多個復(fù)選框案例代碼分析。v-model指令-綁定單選下拉列表案例代碼分析。生命周期函數(shù)案例代碼分析。vue-router的使用案例代碼分析。嵌套路由示例案例代碼分析。query傳參案例代碼分析。params傳參案例代碼分析。router.goBack()后退按鈕案例代碼分析。使用axios檢測用戶是否可用案例代碼分析。教材與參考資料教材范路橋，鄭述招，陳紅玲，等．ECharts數(shù)據(jù)可視化實(shí)戰(zhàn)[M]．西安：西安電子科技大學(xué)出版社．2023．參考資料范路橋，張良均，鄭述招，等[M].Web數(shù)據(jù)可視化(ECharts版).北京：人民郵電出版社，2021.黑馬程序員.Vue.js前端開發(fā)實(shí)戰(zhàn)[M].北京：人民郵電出版社，2020.師曉利，劉志遠(yuǎn)，杜琰琪.Vue.js前端開發(fā)實(shí)戰(zhàn)[M].北京：人民郵電出版社，2020.王鳳麗，豆連軍.Vue.js前端開發(fā)技術(shù)[M].北京：人民郵電出版社，2019.肖睿，龍穎，李輝，等.Vue.js企業(yè)開發(fā)實(shí)戰(zhàn)[M].北京：人民郵電出版社，2018.百度ECharts官網(wǎng)./zh/2022-5-7