Vue應(yīng)用程序開發(fā)教學(xué)大綱

PAGEPAGE8/5Vue《 應(yīng)用程序開發(fā)》課程教學(xué)大綱Vue—、課程基本信息課程名稱：Vue應(yīng)用程序開發(fā)課程英文名稱：ApplicationDevelopmentofVue課程類別：理論課先修課程：《HTMLCSSJavaScript程序設(shè)計》學(xué)時安排：課內(nèi)總學(xué)時課內(nèi)總學(xué)時643232學(xué)分4.0二、教學(xué)目標(biāo)1LI標(biāo)的總體概括Vue.jsvue-cli發(fā)、打包和測試項目。LI標(biāo)：培養(yǎng)學(xué)生通過查閱搜索資料方式進(jìn)行學(xué)習(xí)，引導(dǎo)學(xué)生獨立學(xué)習(xí)。LILIWeb.移動App、微信小程序、微信小游戲和快應(yīng)用等。Vue.js手機(jī)開發(fā)技術(shù)的基本知識和常用的實現(xiàn)方法，涉及網(wǎng)頁設(shè)計、CSS樣式、JavaScript＞面向?qū)ο蟪绦蛟O(shè)ilWeb前端開發(fā)中，使用面向?qū)ο缶幊趟枷脒M(jìn)行代碼封裝的基本方法與基本思路：使（Vue.js）；并且通過這些框架的學(xué)習(xí)和使用，培養(yǎng)學(xué)生運用新技術(shù)，解Web2.教學(xué)口標(biāo)列表理論知識

培養(yǎng)能力專業(yè)知識

掌握程度運用(Apply)理解(Understand)

具體描述能主動的學(xué)習(xí)和鞏固知識技術(shù)。理解Vue.js框架的基本特性和MVVM編程模式專業(yè)技能引進(jìn)、消化、吸收再創(chuàng)新能力

理解 熟悉Vue.js編程基本規(guī)范，養(yǎng)成遵循匸程規(guī)范的習(xí)慣(Understand) 和專業(yè)素養(yǎng)。目標(biāo)內(nèi)容培養(yǎng)能力掌握程度目標(biāo)內(nèi)容培養(yǎng)能力掌握程度具體描述建模分析(Analyze)能夠?qū)ΜF(xiàn)實世界進(jìn)行抽象和建模。應(yīng)用技術(shù)運用(Apply)實現(xiàn)過程運用(Apply)掌握Vue.js框架的基本語法，掌握vue-router和axios運用vue-cli獨立開發(fā)、打包和測試項目章標(biāo)題 節(jié)標(biāo)題

知識點或技能點

學(xué)握 理論實踐學(xué)時 時2.12.1初識Vue.js介紹Vue.js；和使用Vuejs的優(yōu)勢目的。1章Vue.jsAf1.2使用Vue.jsMWM模式Vue.js是?個提供了MWM模型的雙向數(shù)據(jù)綁定的JavaScript框架，專注于View層。理解21.3Vue.js的響應(yīng)式理解通過-個實例來具體理解以下Vue的響應(yīng)式。1)Vuejs下載:2.1Vue.js的使用使用CDN引入Vue.js：通過npm安裝：4)Vue.js的HelloWorld。2.2實例及選項模板，數(shù)據(jù)，方法，計算屬性、過濾器1)值；2章Vue.js應(yīng)用2.3數(shù)據(jù)綁定農(nóng)達(dá)式綁定；雙向數(shù)據(jù)綁定：理解運用424)過濾器。2.4計算屬性計算屬性介紹及用法；計算屬性與方法的區(qū)別。2.5生命周期生命周期對應(yīng)的方法。3章Vue.js

2.6章節(jié)案例3.2基本指令v-bind指令v-model指令

簡單的秒農(nóng)v-text和v-html指令：v-cloak指令：v-once指令：v-if、v-else和?show指令：v-on指令：?for7)數(shù)組更新。v七ind指令基本用法：v-bind綁定樣式。v-model指令基本用法：用v-for5)綁定值；

理解 4 4運用6）修飾符。4章Vue.js

組件的基本使用 3）5）6）1）2）

datatemplate元素創(chuàng)建組件；使用props傳遞數(shù)據(jù)。父組件向子組件傳遞數(shù)據(jù)； 理解6 6子組件向父組件傳遞數(shù)據(jù)； 運用組件通信

非父子組件通信；創(chuàng)建自定義組件：內(nèi)容分發(fā)。動態(tài)組件44動手實踐

基礎(chǔ)用法,keep-alive,activate鉤了函數(shù)。使用Vue組件開發(fā)購物車。

過濾器注冊；

2） 參數(shù)、動態(tài)參數(shù)。5

M定義指令注冊和使2）

自定義全局指令；局部的自定義指令。 理解Vue.js過濾器和自定義用 4 4指令6

5/鉤了?函數(shù)章節(jié)案例CSS過渡CSS動畫

Vue扌是供了自定義指令的幾個/函 運用數(shù)。使用JavaScript對象字面量。使用過濾器移除數(shù)組中的重復(fù)項；果；CSS過渡的用法,CSS過渡鉤/函數(shù)，顯示聲明過渡類型，自定過渡類名。CSS動畫使用。 理解 2 2Vue.js過渡和動畫 6.3JavaScript過渡6.4Pl定義過渡類名快速構(gòu)建項目前端路由7章

JavaScript過渡使用。 運用漂亮的列農(nóng)過渡動畫。VueCU簡介，使用VueCLI構(gòu)建項目。前端路由的簡單實現(xiàn)，Vue中的前端路由。1） 跨域請求： 理解Vue腳手架axioswebpack講解章節(jié)案例

Get請求； 運用 6 8Post請求。Webpack講解課程和教師列農(nóng)管理。8Vuex

VuexVuex的基本使用

1） Vuex的概述2） Vuex的安裝1） Store概述：2） Vuex的使用

運用 2 4Vuex的復(fù)雜使用 state^mutations和actions。8.48.4章節(jié)案例虛擬用戶管理。9章跨平臺開發(fā)9.1Weex簡介、Weex裝與運行3）了解Weex前端框架：創(chuàng)建實例并運行：在Weex中使用Vuejs。理解運用229.2Weex基本概念、內(nèi)置組件、內(nèi)置模塊Weex基本槪念、內(nèi)置組件、內(nèi)置模塊。四、實踐項目實施計劃表單人實現(xiàn)項目名稱 項目類別 項目內(nèi)容 項目成果 學(xué)時 實踐場所前端學(xué)習(xí)移動 課程級實

為用戶提供學(xué)習(xí)資源的瀏覽.購買、見新、刪除和査詢等功能

可運行成果物 26 實訓(xùn)室五、教學(xué)方法講授教學(xué)法、演示教學(xué)法、案例教學(xué)法、指導(dǎo)教學(xué)法、自主學(xué)習(xí)法。六、教學(xué)資源1.教材《Vue應(yīng)用程序開發(fā)》七、課程考核考核項目滿分考核項目滿分值考核內(nèi)容備注考動0 112分，使用考勤系統(tǒng)?？鄯种?，扣分上限不超過10分。平時成績課堂表現(xiàn)10回答問題、課堂紀(jì)律等。10分作業(yè)0-104次。40總計（100（50分）（100分X5O?）終結(jié)性考核安排終結(jié)性考核方式終結(jié)性考核方式上機(jī)考試考試時間90分鐘試題類型、分值比例試題類型、分值比例選