职业学院移动应用开发专业使用Vue优化web页面课程标准

XXXX职业学院移动应用开发专业使用Vue优化web页面课程标准一、课程基本信息1.课程名称：使用Vue优化web页面（54411405）2.课程属性：专业核心课（B类）3.开课学期：第1学年，第2学期4.基准学时：84学时，计5学分二、课程定位《使用Vue优化web页面》是移动应用开发专业的核心课程之一，是该专业的专业必修课。通过本课程的学习，使学生具备Web应用开发相关知识、良好的编程习惯和前端项目开发的能力，能胜任基于Web前端开发等工作任务。Vue的前端体系中，Vue指令,生命周期,Vue组件占据了非常重要的位置，不仅成为web项目开发的利器，而且也是人们接触和使用Vue的一个基础。通过详实的内容和丰富的案例，引领学生学习Vue指令,生命周期,Vue组件的开发体系，以及这套技术在项目开发中的实际应用。同时，通过教学过程中的实际开发过程的规范要求，培养学生分析和解决实际问题的能力，强化学生的职业道德意识、职业素质养意识和创新意识，为学生以后从事更专业化的软件开发工作奠定基础。《使用Vue优化web页面》是面向计算机相关专业的一门专业Vue开发入门课程，涉及Vue基础特性,Vue指令,Vue过滤器,Vue组件,Vuex状态管理等内容，通过本课程的学习，学生能够了解Vue的语法，能够掌握Vue开发技术并开发简单的Web前端项目。前导课程有《HTML商业网站设计》、《使用JavaScript设计交互页面》、《使用ES6优化web页面》，后续课程有《使用BootStrap优化Web页面》、《毕业实习》等。三、课程目标1.能力目标（1）具备使用HTML，CSS，JavaScript等技术编写网站前台静态页面的能力；（2）具备使用Ajax等技术编写无刷新网站界面的能力；（3）具备在Web环境下创建，使用Vue快速开发项目的能力；2.知识目标（1）了解本课程的教学目标和该课程在本专业课程体系中的作用、考核方式；（2）掌握HTML，CSS，JavaScript等基本的网页编程知识；（3）掌握使用Ajax等技术编写无刷新网站界面；（4）掌握在Web环境下创建，配置并编程访问MySQL数据库的相关知识；（5）熟悉Web环境下文件操作，邮件编程等相关的知识；（6）掌握Vue基础特性,Vue指令,Vue过滤器,Vue组件,Vuex状态管理3.态度目标（1）具备前端的一些相关知识，尤其是HTML,CSS,JavaScript；（2）具备良好的职业道德素养和严谨细致的工作作风；（3）具备一定的自学能力，独立分析问题和解决问题的能力。四、课程设计本课程标准在设计上本着懂方法，重应用的总体思路，突出体现职业教育的技能型、应用性特色，着重培养学生的实践应用技能，力求达到理论方法够用，技术技能过硬的目的。首先应依据专业人才培养方案中关于人才培养目标的阐述，明确课程目标；其次，结合职业教育课程观、教学观、能力观，基于软件工程的开发过程，以项目化教学来组织课程内容，在课程内容的选择与排序中，以软件工程实施的不同阶段、典型任务为载体，将课程内容划分为互相联系的学习情景；第三，通过对各学习情景中学习目标、主要内容、授课方式、师生要求等各项内容的描述，来规范课程所要求的内容；第四，通过对课程内容的选取和组合，以一个完整的项目为载体，完成课程的实施；最后，通过对项目实施过程中各个环节的考察和评价，来完成对课程的评鉴与考核。2.课时分配序号课程单元学习任务参考学时1Vue．js简介了解"Vue．js是什么",

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

掌握"Vue．js的Helloworld",

掌握"网页开发的前世今生",

掌握"MVC、MVP、MVVM三者的区别和优劣"82基础特性了解"实例及选项",

了解"模板",

掌握"数据",

掌握"方法",

掌握"生命周期"83指令了解"内置指令",

了解"v-bind",

掌握"v-model",

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

掌握"v-for"84过滤器了解"过滤器原理概述",

了解"过滤器注册",

掌握"双向过滤器",

掌握"动态参数",

掌握"过滤器在Vue．js2．0中的变化"85过渡了解"CSS过渡",

了解"CSS过渡的用法",

掌握"CSS过渡钩子函数",

掌握"显示声明过渡类型",

掌握"自定义过渡类名"86组件了解"组件注册",

了解"全局注册",

掌握"局部注册",

掌握"注册语法糖",

掌握"组件选项"87Vue．js常用插件了解"Vue-router",

了解"引用方式",

掌握"基本用法",

掌握"嵌套路由",

掌握"路由匹配"88Vue．js工程实例了解"准备工作",

了解"webpack",

掌握"vue-loader",

掌握"目录结构",

掌握"前端开发"89状态管理：Vuex了解"概述",

了解"简单实例",

掌握"所需组件",

掌握"创建并注入store",

掌握"创建action及组件调用方式"810跨平台开发：Weex了解"Weex简介",

了解"Weex安装",

掌握"ios环境安装",

掌握"android环境安装",

掌握"web端运行"811Vue．js2．0新特性了解"Render函数",

了解"createElement用法",

掌握"使用案例",

掌握"函数化组件",

掌握"JSX"43.课程单元描述

课程单元一Vue．js简介课程单元名称Vue．js简介课时数8学习目标通过学习,学生能够了解"Vue．js是什么",了解"为什么要用Vue．js",掌握"Vue．js的Helloworld",掌握"网页开发的前世今生",掌握"MVC、MVP、MVVM三者的区别和优劣"学习内容1.Vue．js是什么

2.为什么要用Vue．js

3.Vue．js的Helloworld

4.网页开发的前世今生

5.MVC、MVP、MVVM三者的区别和优劣

6.开发工具学习方法和建议在教学中采用理论讲授法、启发引导法、案例分析法、，一定要能调动学生学习的主动性，让学生自己总结提高教学条件要求多媒体网络教室学生已有基础WEB前端HTML与CSS技术能力,JavaScript编程技术开发教师执教能力要求对ES6的前世今生了解得非常透彻，相关知识非常熟练，能够对学生的想法及时做出评价并善于引导学生

课程单元二基础特性课程单元名称基础特性课时数8学习目标通过学习,学生能够了解"实例及选项",了解"模板",掌握"数据",掌握"方法",掌握"生命周期"学习内容1.实例及选项

1.1模板

1.2数据

1.3方法

1.4生命周期

2.数据绑定

2.1数据绑定语法

2.2计算属性

2.3表单控件

2.4Class与Style绑定

3.模板渲染

3.1前后端渲染对比

3.2条件渲染

3.3列表渲染

3.4template标签用法

4.事件绑定与监听

4.1方法及内联语句处理器

4.2修饰符

4.3与传统事件绑定的区别

5.Vue．extend()学习方法和建议在教学中采用理论讲授法、启发引导法、案例分析法、，一定要能调动学生学习的主动性，让学生自己总结提高教学条件要求多媒体网络教室学生已有基础WEB前端HTML与CSS技术能力,JavaScript编程技术开发教师执教能力要求对ES6的前世今生了解得非常透彻，相关知识非常熟练，能够对学生的想法及时做出评价并善于引导学生

课程单元三指令课程单元名称指令课时数8学习目标通过学习,学生能够了解"内置指令",了解"v-bind",掌握"v-model",掌握"v-if-else-show",掌握"v-for"学习内容1.内置指令

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.自定义指令基础

2.1指令的注册

2.2指令的定义对象

2.3指令实例属性

2.4元素指令

3.指令的高级选项

3.1params

3.2deep

3.3twoWay

3.4acceptStatement

3.5terminal

3.6priority

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

4.1新的钩子函数

4.2钩子函数实例和参数变化

4.3update函数触发变化

4.4参数binding对象学习方法和建议在教学中采用理论讲授法、启发引导法、案例分析法、，一定要能调动学生学习的主动性，让学生自己总结提高教学条件要求多媒体网络教室学生已有基础WEB前端HTML与CSS技术能力,JavaScript编程技术开发教师执教能力要求对ES6的前世今生了解得非常透彻，相关知识非常熟练，能够对学生的想法及时做出评价并善于引导学生

课程单元四过滤器课程单元名称过滤器课时数8学习目标通过学习,学生能够了解"过滤器原理概述",了解"过滤器注册",掌握"双向过滤器",掌握"动态参数",掌握"过滤器在Vue．js2．0中的变化"学习内容1.过滤器原理概述

2.过滤器注册

3.双向过滤器

4.动态参数

5.过滤器在Vue．js2．0中的变化

6.计算属性与过滤器学习方法和建议在教学中采用理论讲授法、启发引导法、案例分析法、，一定要能调动学生学习的主动性，让学生自己总结提高教学条件要求多媒体网络教室学生已有基础WEB前端HTML与CSS技术能力,JavaScript编程技术开发教师执教能力要求对ES6的前世今生了解得非常透彻，相关知识非常熟练，能够对学生的想法及时做出评价并善于引导学生

课程单元五过渡课程单元名称过渡课时数8学习目标通过学习,学生能够了解"CSS过渡",了解"CSS过渡的用法",掌握"CSS过渡钩子函数",掌握"显示声明过渡类型",掌握"自定义过渡类名"学习内容1.CSS过渡

1.1CSS过渡的用法

1.2CSS过渡钩子函数

1.3显示声明过渡类型

1.4自定义过渡类名

2.JavaScript过渡

2.1Velocity．js

2.2JavaScript过渡使用

3.过渡系统在Vue．js2．0中的变化

3.1用法变化

3.2类名变化

3.3钩子函数变化

3.4transition-group学习方法和建议在教学中采用理论讲授法、启发引导法、案例分析法、，一定要能调动学生学习的主动性，让学生自己总结提高教学条件要求多媒体网络教室学生已有基础WEB前端HTML与CSS技术能力,JavaScript编程技术开发教师执教能力要求对ES6的前世今生了解得非常透彻，相关知识非常熟练，能够对学生的想法及时做出评价并善于引导学生

课程单元六组件课程单元名称组件课时数8学习目标通过学习,学生能够了解"组件注册",了解"全局注册",掌握"局部注册",掌握"注册语法糖",掌握"组件选项"学习内容1.组件注册

1.1全局注册

1.2局部注册

1.3注册语法糖

2.组件选项

2.1组件选项中与Vue选项的区别

2.2组件Props

3.组件间通信

3.1直接访问

3.2自定义事件监听

3.3自定义事件触发机制

3.4子组件索引

4.内容分发

4.1基础用法

4.2编译作用域

4.3默认slot

4.4slot属性相同

4.5Modal实例

5.动态组件

5.1基础用法

5.2keep-alive

5.3activate钩子函数

6.Vue．js2．0中的变化

6.1event

6.2keep-alive

6.3slot

6.4refs学习方法和建议在教学中采用理论讲授法、启发引导法、案例分析法、，一定要能调动学生学习的主动性，让学生自己总结提高教学条件要求多媒体网络教室学生已有基础WEB前端HTML与CSS技术能力,JavaScript编程技术开发教师执教能力要求对ES6的前世今生了解得非常透彻，相关知识非常熟练，能够对学生的想法及时做出评价并善于引导学生

课程单元七Vue．js常用插件课程单元名称Vue．js常用插件课时数8学习目标通过学习,学生能够了解"Vue-router",了解"引用方式",掌握"基本用法",掌握"嵌套路由",掌握"路由匹配"学习内容1.Vue-router

1.1引用方式

1.2基本用法

1.3嵌套路由

1.4路由匹配

1.5具名路由

1.6路由对象

1.7v-link

1.8路由配置项

1.9route钩子函数

1.10路由实例属性及方法

1.11的变化

2.Vue-resource

2.1引用方式

2.2使用方式

2.3$http的api方法和选项参数

2.4拦截器

2.5$resource用法

2.6封装Service层

3.Vue-devtools

3.1安装方式

3.2使用效果学习方法和建议在教学中采用理论讲授法、启发引导法、案例分析法、，一定要能调动学生学习的主动性，让学生自己总结提高教学条件要求多媒体网络教室学生已有基础WEB前端HTML与CSS技术能力,JavaScript编程技术开发教师执教能力要求对ES6的前世今生了解得非常透彻，相关知识非常熟练，能够对学生的想法及时做出评价并善于引导学生

课程单元八Vue．js工程实例课程单元名称Vue．js工程实例课时数8学习目标通过学习,学生能够了解"准备工作",了解"webpack",掌握"vue-loader",掌握"目录结构",掌握"前端开发"学习内容1.准备工作

1.1webpack

1.2vue-loader

2.目录结构

3.前端开发

4.后端联调

5.部署上线

5.1生成线上文件

5.2nginx

5.3gitlab

5.4jenkins学习方法和建议在教学中采用理论讲授法、启发引导法、案例分析法、，一定要能调动学生学习的主动性，让学生自己总结提高教学条件要求多媒体网络教室学生已有基础WEB前端HTML与CSS技术能力,JavaScript编程技术开发教师执教能力要求对ES6的前世今生了解得非常透彻，相关知识非常熟练，能够对学生的想法及时做出评价并善于引导学生

课程单元九状态管理：Vuex课程单元名称状态管理：Vuex课时数8学习目标通过学习,学生能够了解"概述",了解"简单实例",掌握"所需组件",掌握"创建并注入store",掌握"创建action及组件调用方式"学习内容1.概述

2.简单实例

2.1所需组件

2.2创建并注入store

2.3创建action及组件调用方式

2.4创建mutation

2.5组件获取state

3.严格模式

4.中间件

4.1快照

4.2logger

5.表单处理

6.目录结构

6.1简单项目

6.2大型项目

7.实例

7.1state结构

7.2actions．js

7.3app．js

7.4组件结构

7.5base组件

7.6展示结果

8.Vue．js2．0的变化

8.1State

8.2Getters

8.3Mutations

8.4Actions

8.5Modules学习方法和建议在教学中采用理论讲授法、启发引导法、案例分析法、，一定要能调动学生学习的主动性，让学生自己总结提高教学条件要求多媒体网络教室学生已有基础WEB前端HTML与CSS技术能力,JavaScript编程技术开发教师执教能力要求对ES6的前世今生了解得非常透彻，相关知识非常熟练，能够对学生的想法及时做出评价并善于引导学生

课程单元十跨平台开发：Weex课程单元名称跨平台开发：Weex课时数8学习目标通过学习,学生能够了解"Weex简介",了解"Weex安装",掌握"ios环境安装",掌握"android环境安装",掌握"web端运行"学习内容1.Weex简介

2.Weex安装

2.1ios环境安装

2.2android环境安装

2.3web端运行

3.Weex实例与运行

4.Weex基础语法

4.1数据绑定

4.2事件绑定

4.3模板逻辑

5.Weex内置组件

5.1scroller

5.2list

5.3Switch

5.4Slider

5.5wxc-tabbar

5.6wxc-navpage

6.Weex内置模块

6.1dom

6.2steam

6.3modal

6.4animation

6.5webview

6.6navigator

6.7storage学习方法和建议在教学中采用理论讲授法、启发引导法、案例分析法、，一定要能调动学生学习的主动性，让学生自己总结提高教学条件要求多媒体网络教室学生已有基础WEB前端HTML与CSS技术能力,JavaScript编程技术开发教师执教能力要求对ES6的前世今生了解得非常透彻，相关知识非常熟练，能够对学生的想法及时做出评价并善于引导学生

课程单元十一Vue．js2．0新特性课程单元名称Vue．js2．0新特性课时数4学习目标通过学习,学生能够了解"