職業(yè)學(xué)院移動應(yīng)用開發(fā)專業(yè)使用Vue優(yōu)化web頁面課程標(biāo)準(zhǔn)

XXXX職業(yè)學(xué)院移動應(yīng)用開發(fā)專業(yè)使用Vue優(yōu)化web頁面課程標(biāo)準(zhǔn)一、課程基本信息1.課程名稱：使用Vue優(yōu)化web頁面（54411405）2.課程屬性：專業(yè)核心課（B類）3.開課學(xué)期：第1學(xué)年，第2學(xué)期4.基準(zhǔn)學(xué)時(shí)：84學(xué)時(shí)，計(jì)5學(xué)分二、課程定位《使用Vue優(yōu)化web頁面》是移動應(yīng)用開發(fā)專業(yè)的核心課程之一，是該專業(yè)的專業(yè)必修課。通過本課程的學(xué)習(xí)，使學(xué)生具備Web應(yīng)用開發(fā)相關(guān)知識、良好的編程習(xí)慣和前端項(xiàng)目開發(fā)的能力，能勝任基于Web前端開發(fā)等工作任務(wù)。Vue的前端體系中，Vue指令,生命周期,Vue組件占據(jù)了非常重要的位置，不僅成為web項(xiàng)目開發(fā)的利器，而且也是人們接觸和使用Vue的一個(gè)基礎(chǔ)。通過詳實(shí)的內(nèi)容和豐富的案例，引領(lǐng)學(xué)生學(xué)習(xí)Vue指令,生命周期,Vue組件的開發(fā)體系，以及這套技術(shù)在項(xiàng)目開發(fā)中的實(shí)際應(yīng)用。同時(shí)，通過教學(xué)過程中的實(shí)際開發(fā)過程的規(guī)范要求，培養(yǎng)學(xué)生分析和解決實(shí)際問題的能力，強(qiáng)化學(xué)生的職業(yè)道德意識、職業(yè)素質(zhì)養(yǎng)意識和創(chuàng)新意識，為學(xué)生以后從事更專業(yè)化的軟件開發(fā)工作奠定基礎(chǔ)?！妒褂肰ue優(yōu)化web頁面》是面向計(jì)算機(jī)相關(guān)專業(yè)的一門專業(yè)Vue開發(fā)入門課程，涉及Vue基礎(chǔ)特性,Vue指令,Vue過濾器,Vue組件,Vuex狀態(tài)管理等內(nèi)容，通過本課程的學(xué)習(xí)，學(xué)生能夠了解Vue的語法，能夠掌握Vue開發(fā)技術(shù)并開發(fā)簡單的Web前端項(xiàng)目。前導(dǎo)課程有《HTML商業(yè)網(wǎng)站設(shè)計(jì)》、《使用JavaScript設(shè)計(jì)交互頁面》、《使用ES6優(yōu)化web頁面》，后續(xù)課程有《使用BootStrap優(yōu)化Web頁面》、《畢業(yè)實(shí)習(xí)》等。三、課程目標(biāo)1.能力目標(biāo)（1）具備使用HTML，CSS，JavaScript等技術(shù)編寫網(wǎng)站前臺靜態(tài)頁面的能力；（2）具備使用Ajax等技術(shù)編寫無刷新網(wǎng)站界面的能力；（3）具備在Web環(huán)境下創(chuàng)建，使用Vue快速開發(fā)項(xiàng)目的能力；2.知識目標(biāo)（1）了解本課程的教學(xué)目標(biāo)和該課程在本專業(yè)課程體系中的作用、考核方式；（2）掌握HTML，CSS，JavaScript等基本的網(wǎng)頁編程知識；（3）掌握使用Ajax等技術(shù)編寫無刷新網(wǎng)站界面；（4）掌握在Web環(huán)境下創(chuàng)建，配置并編程訪問MySQL數(shù)據(jù)庫的相關(guān)知識；（5）熟悉Web環(huán)境下文件操作，郵件編程等相關(guān)的知識；（6）掌握Vue基礎(chǔ)特性,Vue指令,Vue過濾器,Vue組件,Vuex狀態(tài)管理3.態(tài)度目標(biāo)（1）具備前端的一些相關(guān)知識，尤其是HTML,CSS,JavaScript；（2）具備良好的職業(yè)道德素養(yǎng)和嚴(yán)謹(jǐn)細(xì)致的工作作風(fēng)；（3）具備一定的自學(xué)能力，獨(dú)立分析問題和解決問題的能力。四、課程設(shè)計(jì)本課程標(biāo)準(zhǔn)在設(shè)計(jì)上本著懂方法，重應(yīng)用的總體思路，突出體現(xiàn)職業(yè)教育的技能型、應(yīng)用性特色，著重培養(yǎng)學(xué)生的實(shí)踐應(yīng)用技能，力求達(dá)到理論方法夠用，技術(shù)技能過硬的目的。首先應(yīng)依據(jù)專業(yè)人才培養(yǎng)方案中關(guān)于人才培養(yǎng)目標(biāo)的闡述，明確課程目標(biāo)；其次，結(jié)合職業(yè)教育課程觀、教學(xué)觀、能力觀，基于軟件工程的開發(fā)過程，以項(xiàng)目化教學(xué)來組織課程內(nèi)容，在課程內(nèi)容的選擇與排序中，以軟件工程實(shí)施的不同階段、典型任務(wù)為載體，將課程內(nèi)容劃分為互相聯(lián)系的學(xué)習(xí)情景；第三，通過對各學(xué)習(xí)情景中學(xué)習(xí)目標(biāo)、主要內(nèi)容、授課方式、師生要求等各項(xiàng)內(nèi)容的描述，來規(guī)范課程所要求的內(nèi)容；第四，通過對課程內(nèi)容的選取和組合，以一個(gè)完整的項(xiàng)目為載體，完成課程的實(shí)施；最后，通過對項(xiàng)目實(shí)施過程中各個(gè)環(huán)節(jié)的考察和評價(jià)，來完成對課程的評鑒與考核。2.課時(shí)分配序號課程單元學(xué)習(xí)任務(wù)參考學(xué)時(shí)1Vue．js簡介了解"Vue．js是什么",

了解"為什么要用Vue．js",

掌握"Vue．js的Helloworld",

掌握"網(wǎng)頁開發(fā)的前世今生",

掌握"MVC、MVP、MVVM三者的區(qū)別和優(yōu)劣"82基礎(chǔ)特性了解"實(shí)例及選項(xiàng)",

了解"模板",

掌握"數(shù)據(jù)",

掌握"方法",

掌握"生命周期"83指令了解"內(nèi)置指令",

了解"v-bind",

掌握"v-model",

掌握"v-if-else-show",

掌握"v-for"84過濾器了解"過濾器原理概述",

了解"過濾器注冊",

掌握"雙向過濾器",

掌握"動態(tài)參數(shù)",

掌握"過濾器在Vue．js2．0中的變化"85過渡了解"CSS過渡",

了解"CSS過渡的用法",

掌握"CSS過渡鉤子函數(shù)",

掌握"顯示聲明過渡類型",

掌握"自定義過渡類名"86組件了解"組件注冊",

了解"全局注冊",

掌握"局部注冊",

掌握"注冊語法糖",

掌握"組件選項(xiàng)"87Vue．js常用插件了解"Vue-router",

了解"引用方式",

掌握"基本用法",

掌握"嵌套路由",

掌握"路由匹配"88Vue．js工程實(shí)例了解"準(zhǔn)備工作",

了解"webpack",

掌握"vue-loader",

掌握"目錄結(jié)構(gòu)",

掌握"前端開發(fā)"89狀態(tài)管理：Vuex了解"概述",

了解"簡單實(shí)例",

掌握"所需組件",

掌握"創(chuàng)建并注入store",

掌握"創(chuàng)建action及組件調(diào)用方式"810跨平臺開發(fā)：Weex了解"Weex簡介",

了解"Weex安裝",

掌握"ios環(huán)境安裝",

掌握"android環(huán)境安裝",

掌握"web端運(yùn)行"811Vue．js2．0新特性了解"Render函數(shù)",

了解"createElement用法",

掌握"使用案例",

掌握"函數(shù)化組件",

掌握"JSX"43.課程單元描述

課程單元一Vue．js簡介課程單元名稱Vue．js簡介課時(shí)數(shù)8學(xué)習(xí)目標(biāo)通過學(xué)習(xí),學(xué)生能夠了解"Vue．js是什么",了解"為什么要用Vue．js",掌握"Vue．js的Helloworld",掌握"網(wǎng)頁開發(fā)的前世今生",掌握"MVC、MVP、MVVM三者的區(qū)別和優(yōu)劣"學(xué)習(xí)內(nèi)容1.Vue．js是什么

2.為什么要用Vue．js

3.Vue．js的Helloworld

4.網(wǎng)頁開發(fā)的前世今生

5.MVC、MVP、MVVM三者的區(qū)別和優(yōu)劣

6.開發(fā)工具學(xué)習(xí)方法和建議在教學(xué)中采用理論講授法、啟發(fā)引導(dǎo)法、案例分析法、，一定要能調(diào)動學(xué)生學(xué)習(xí)的主動性，讓學(xué)生自己總結(jié)提高教學(xué)條件要求多媒體網(wǎng)絡(luò)教室學(xué)生已有基礎(chǔ)WEB前端HTML與CSS技術(shù)能力,JavaScript編程技術(shù)開發(fā)教師執(zhí)教能力要求對ES6的前世今生了解得非常透徹，相關(guān)知識非常熟練，能夠?qū)W(xué)生的想法及時(shí)做出評價(jià)并善于引導(dǎo)學(xué)生

課程單元二基礎(chǔ)特性課程單元名稱基礎(chǔ)特性課時(shí)數(shù)8學(xué)習(xí)目標(biāo)通過學(xué)習(xí),學(xué)生能夠了解"實(shí)例及選項(xiàng)",了解"模板",掌握"數(shù)據(jù)",掌握"方法",掌握"生命周期"學(xué)習(xí)內(nèi)容1.實(shí)例及選項(xiàng)

1.1模板

1.2數(shù)據(jù)

1.3方法

1.4生命周期

2.數(shù)據(jù)綁定

2.1數(shù)據(jù)綁定語法

2.2計(jì)算屬性

2.3表單控件

2.4Class與Style綁定

3.模板渲染

3.1前后端渲染對比

3.2條件渲染

3.3列表渲染

3.4template標(biāo)簽用法

4.事件綁定與監(jiān)聽

4.1方法及內(nèi)聯(lián)語句處理器

4.2修飾符

4.3與傳統(tǒng)事件綁定的區(qū)別

5.Vue．extend()學(xué)習(xí)方法和建議在教學(xué)中采用理論講授法、啟發(fā)引導(dǎo)法、案例分析法、，一定要能調(diào)動學(xué)生學(xué)習(xí)的主動性，讓學(xué)生自己總結(jié)提高教學(xué)條件要求多媒體網(wǎng)絡(luò)教室學(xué)生已有基礎(chǔ)WEB前端HTML與CSS技術(shù)能力,JavaScript編程技術(shù)開發(fā)教師執(zhí)教能力要求對ES6的前世今生了解得非常透徹，相關(guān)知識非常熟練，能夠?qū)W(xué)生的想法及時(shí)做出評價(jià)并善于引導(dǎo)學(xué)生

課程單元三指令課程單元名稱指令課時(shí)數(shù)8學(xué)習(xí)目標(biāo)通過學(xué)習(xí),學(xué)生能夠了解"內(nèi)置指令",了解"v-bind",掌握"v-model",掌握"v-if-else-show",掌握"v-for"學(xué)習(xí)內(nèi)容1.內(nèi)置指令

1.1v-bind

1.2v-model

1.3v-if-else-show

1.4v-for

1.5v-on

1.6v-text

1.7v-HTML

1.8v-el

1.9v-ref

1.10v-pre

1.11v-cloak

1.12v-once

2.自定義指令基礎(chǔ)

2.1指令的注冊

2.2指令的定義對象

2.3指令實(shí)例屬性

2.4元素指令

3.指令的高級選項(xiàng)

3.1params

3.2deep

3.3twoWay

3.4acceptStatement

3.5terminal

3.6priority

4.指令在Vue．js2．0中的變化

4.1新的鉤子函數(shù)

4.2鉤子函數(shù)實(shí)例和參數(shù)變化

4.3update函數(shù)觸發(fā)變化

4.4參數(shù)binding對象學(xué)習(xí)方法和建議在教學(xué)中采用理論講授法、啟發(fā)引導(dǎo)法、案例分析法、，一定要能調(diào)動學(xué)生學(xué)習(xí)的主動性，讓學(xué)生自己總結(jié)提高教學(xué)條件要求多媒體網(wǎng)絡(luò)教室學(xué)生已有基礎(chǔ)WEB前端HTML與CSS技術(shù)能力,JavaScript編程技術(shù)開發(fā)教師執(zhí)教能力要求對ES6的前世今生了解得非常透徹，相關(guān)知識非常熟練，能夠?qū)W(xué)生的想法及時(shí)做出評價(jià)并善于引導(dǎo)學(xué)生

課程單元四過濾器課程單元名稱過濾器課時(shí)數(shù)8學(xué)習(xí)目標(biāo)通過學(xué)習(xí),學(xué)生能夠了解"過濾器原理概述",了解"過濾器注冊",掌握"雙向過濾器",掌握"動態(tài)參數(shù)",掌握"過濾器在Vue．js2．0中的變化"學(xué)習(xí)內(nèi)容1.過濾器原理概述

2.過濾器注冊

3.雙向過濾器

4.動態(tài)參數(shù)

5.過濾器在Vue．js2．0中的變化

6.計(jì)算屬性與過濾器學(xué)習(xí)方法和建議在教學(xué)中采用理論講授法、啟發(fā)引導(dǎo)法、案例分析法、，一定要能調(diào)動學(xué)生學(xué)習(xí)的主動性，讓學(xué)生自己總結(jié)提高教學(xué)條件要求多媒體網(wǎng)絡(luò)教室學(xué)生已有基礎(chǔ)WEB前端HTML與CSS技術(shù)能力,JavaScript編程技術(shù)開發(fā)教師執(zhí)教能力要求對ES6的前世今生了解得非常透徹，相關(guān)知識非常熟練，能夠?qū)W(xué)生的想法及時(shí)做出評價(jià)并善于引導(dǎo)學(xué)生

課程單元五過渡課程單元名稱過渡課時(shí)數(shù)8學(xué)習(xí)目標(biāo)通過學(xué)習(xí),學(xué)生能夠了解"CSS過渡",了解"CSS過渡的用法",掌握"CSS過渡鉤子函數(shù)",掌握"顯示聲明過渡類型",掌握"自定義過渡類名"學(xué)習(xí)內(nèi)容1.CSS過渡

1.1CSS過渡的用法

1.2CSS過渡鉤子函數(shù)

1.3顯示聲明過渡類型

1.4自定義過渡類名

2.JavaScript過渡

2.1Velocity．js

2.2JavaScript過渡使用

3.過渡系統(tǒng)在Vue．js2．0中的變化

3.1用法變化

3.2類名變化

3.3鉤子函數(shù)變化

3.4transition-group學(xué)習(xí)方法和建議在教學(xué)中采用理論講授法、啟發(fā)引導(dǎo)法、案例分析法、，一定要能調(diào)動學(xué)生學(xué)習(xí)的主動性，讓學(xué)生自己總結(jié)提高教學(xué)條件要求多媒體網(wǎng)絡(luò)教室學(xué)生已有基礎(chǔ)WEB前端HTML與CSS技術(shù)能力,JavaScript編程技術(shù)開發(fā)教師執(zhí)教能力要求對ES6的前世今生了解得非常透徹，相關(guān)知識非常熟練，能夠?qū)W(xué)生的想法及時(shí)做出評價(jià)并善于引導(dǎo)學(xué)生

課程單元六組件課程單元名稱組件課時(shí)數(shù)8學(xué)習(xí)目標(biāo)通過學(xué)習(xí),學(xué)生能夠了解"組件注冊",了解"全局注冊",掌握"局部注冊",掌握"注冊語法糖",掌握"組件選項(xiàng)"學(xué)習(xí)內(nèi)容1.組件注冊

1.1全局注冊

1.2局部注冊

1.3注冊語法糖

2.組件選項(xiàng)

2.1組件選項(xiàng)中與Vue選項(xiàng)的區(qū)別

2.2組件Props

3.組件間通信

3.1直接訪問

3.2自定義事件監(jiān)聽

3.3自定義事件觸發(fā)機(jī)制

3.4子組件索引

4.內(nèi)容分發(fā)

4.1基礎(chǔ)用法

4.2編譯作用域

4.3默認(rèn)slot

4.4slot屬性相同

4.5Modal實(shí)例

5.動態(tài)組件

5.1基礎(chǔ)用法

5.2keep-alive

5.3activate鉤子函數(shù)

6.Vue．js2．0中的變化

6.1event

6.2keep-alive

6.3slot

6.4refs學(xué)習(xí)方法和建議在教學(xué)中采用理論講授法、啟發(fā)引導(dǎo)法、案例分析法、，一定要能調(diào)動學(xué)生學(xué)習(xí)的主動性，讓學(xué)生自己總結(jié)提高教學(xué)條件要求多媒體網(wǎng)絡(luò)教室學(xué)生已有基礎(chǔ)WEB前端HTML與CSS技術(shù)能力,JavaScript編程技術(shù)開發(fā)教師執(zhí)教能力要求對ES6的前世今生了解得非常透徹，相關(guān)知識非常熟練，能夠?qū)W(xué)生的想法及時(shí)做出評價(jià)并善于引導(dǎo)學(xué)生

課程單元七Vue．js常用插件課程單元名稱Vue．js常用插件課時(shí)數(shù)8學(xué)習(xí)目標(biāo)通過學(xué)習(xí),學(xué)生能夠了解"Vue-router",了解"引用方式",掌握"基本用法",掌握"嵌套路由",掌握"路由匹配"學(xué)習(xí)內(nèi)容1.Vue-router

1.1引用方式

1.2基本用法

1.3嵌套路由

1.4路由匹配

1.5具名路由

1.6路由對象

1.7v-link

1.8路由配置項(xiàng)

1.9route鉤子函數(shù)

1.10路由實(shí)例屬性及方法

1.11的變化

2.Vue-resource

2.1引用方式

2.2使用方式

2.3$http的api方法和選項(xiàng)參數(shù)

2.4攔截器

2.5$resource用法

2.6封裝Service層

3.Vue-devtools

3.1安裝方式

3.2使用效果學(xué)習(xí)方法和建議在教學(xué)中采用理論講授法、啟發(fā)引導(dǎo)法、案例分析法、，一定要能調(diào)動學(xué)生學(xué)習(xí)的主動性，讓學(xué)生自己總結(jié)提高教學(xué)條件要求多媒體網(wǎng)絡(luò)教室學(xué)生已有基礎(chǔ)WEB前端HTML與CSS技術(shù)能力,JavaScript編程技術(shù)開發(fā)教師執(zhí)教能力要求對ES6的前世今生了解得非常透徹，相關(guān)知識非常熟練，能夠?qū)W(xué)生的想法及時(shí)做出評價(jià)并善于引導(dǎo)學(xué)生

課程單元八Vue．js工程實(shí)例課程單元名稱Vue．js工程實(shí)例課時(shí)數(shù)8學(xué)習(xí)目標(biāo)通過學(xué)習(xí),學(xué)生能夠了解"準(zhǔn)備工作",了解"webpack",掌握"vue-loader",掌握"目錄結(jié)構(gòu)",掌握"前端開發(fā)"學(xué)習(xí)內(nèi)容1.準(zhǔn)備工作

1.1webpack

1.2vue-loader

2.目錄結(jié)構(gòu)

3.前端開發(fā)

4.后端聯(lián)調(diào)

5.部署上線

5.1生成線上文件

5.2nginx

5.3gitlab

5.4jenkins學(xué)習(xí)方法和建議在教學(xué)中采用理論講授法、啟發(fā)引導(dǎo)法、案例分析法、，一定要能調(diào)動學(xué)生學(xué)習(xí)的主動性，讓學(xué)生自己總結(jié)提高教學(xué)條件要求多媒體網(wǎng)絡(luò)教室學(xué)生已有基礎(chǔ)WEB前端HTML與CSS技術(shù)能力,JavaScript編程技術(shù)開發(fā)教師執(zhí)教能力要求對ES6的前世今生了解得非常透徹，相關(guān)知識非常熟練，能夠?qū)W(xué)生的想法及時(shí)做出評價(jià)并善于引導(dǎo)學(xué)生

課程單元九狀態(tài)管理：Vuex課程單元名稱狀態(tài)管理：Vuex課時(shí)數(shù)8學(xué)習(xí)目標(biāo)通過學(xué)習(xí),學(xué)生能夠了解"概述",了解"簡單實(shí)例",掌握"所需組件",掌握"創(chuàng)建并注入store",掌握"創(chuàng)建action及組件調(diào)用方式"學(xué)習(xí)內(nèi)容1.概述

2.簡單實(shí)例

2.1所需組件

2.2創(chuàng)建并注入store

2.3創(chuàng)建action及組件調(diào)用方式

2.4創(chuàng)建mutation

2.5組件獲取state

3.嚴(yán)格模式

4.中間件

4.1快照

4.2logger

5.表單處理

6.目錄結(jié)構(gòu)

6.1簡單項(xiàng)目

6.2大型項(xiàng)目

7.實(shí)例

7.1state結(jié)構(gòu)

7.2actions．js

7.3app．js

7.4組件結(jié)構(gòu)

7.5base組件

7.6展示結(jié)果

8.Vue．js2．0的變化

8.1State

8.2Getters

8.3Mutations

8.4Actions

8.5Modules學(xué)習(xí)方法和建議在教學(xué)中采用理論講授法、啟發(fā)引導(dǎo)法、案例分析法、，一定要能調(diào)動學(xué)生學(xué)習(xí)的主動性，讓學(xué)生自己總結(jié)提高教學(xué)條件要求多媒體網(wǎng)絡(luò)教室學(xué)生已有基礎(chǔ)WEB前端HTML與CSS技術(shù)能力,JavaScript編程技術(shù)開發(fā)教師執(zhí)教能力要求對ES6的前世今生了解得非常透徹，相關(guān)知識非常熟練，能夠?qū)W(xué)生的想法及時(shí)做出評價(jià)并善于引導(dǎo)學(xué)生

課程單元十跨平臺開發(fā)：Weex課程單元名稱跨平臺開發(fā)：Weex課時(shí)數(shù)8學(xué)習(xí)目標(biāo)通過學(xué)習(xí),學(xué)生能夠了解"Weex簡介",了解"Weex安裝",掌握"ios環(huán)境安裝",掌握"android環(huán)境安裝",掌握"web端運(yùn)行"學(xué)習(xí)內(nèi)容1.Weex簡介

2.Weex安裝

2.1ios環(huán)境安裝

2.2android環(huán)境安裝

2.3web端運(yùn)行

3.Weex實(shí)例與運(yùn)行

4.Weex基礎(chǔ)語法

4.1數(shù)據(jù)綁定

4.2事件綁定

4.3模板邏輯

5.Weex內(nèi)置組件

5.1scroller

5.2list

5.3Switch

5.4Slider

5.5wxc-tabbar

5.6wxc-navpage

6.Weex內(nèi)置模塊

6.1dom

6.2steam

6.3modal

6.4animation

6.5webview

6.6navigator

6.7storage學(xué)習(xí)方法和建議在教學(xué)中采用理論講授法、啟發(fā)引導(dǎo)法、案例分析法、，一定要能調(diào)動學(xué)生學(xué)習(xí)的主動性，讓學(xué)生自己總結(jié)提高教學(xué)條件要求多媒體網(wǎng)絡(luò)教室學(xué)生已有基礎(chǔ)WEB前端HTML與CSS技術(shù)能力,JavaScript編程技術(shù)開發(fā)教師執(zhí)教能力要求對ES6的前世今生了解得非常透徹，相關(guān)知識非常熟練，能夠?qū)W(xué)生的想法及時(shí)做出評價(jià)并善于引導(dǎo)學(xué)生

課程單元十一Vue．js2．0新特性課程單元名稱Vue．js2．0新特性課時(shí)數(shù)4學(xué)習(xí)目標(biāo)通過學(xué)習(xí),學(xué)生能夠了解"