Vue应用程序开发教学大纲

一、课程基本信息

1.课程名称：Vue应用程序开发

2.课程英文名称： Application Development of Vue

3.课程类别：理论课

4.先修课程：《HTML与CSS设计基础》《JavaScript程序设计》

5.学时安排：

二、教学目标

1.教学目标的总体概括

（1）专业能力目标：掌握Vue.js框架的基本特性和基本语法，能够使用vue-cli开发、打包和测试项目。

（2）素质能力目标：培养学生通过查阅搜索资料方式进行学习，引导学生学习。

（3）工程能力目标：培养学生项目的基本需求分析和和设计能力，使学生能够开发移动Web、移动App、微信小程序、微信小游戏和快应用等。

理解Vue.js手机开发技术的基本知识和常用的实现方法，涉及网页设计、CSS样式、JavaScript、面向对象程序设计,响应式、前端常用框架等内容,通过本课程的学习,学生能够了解Web前端开发中,使用面向对象编程思想进行代码封装的基本方法与基本思路；使用优秀的前端框架（Vue.js）；并且通过这些框架的学习和使用,培养学生运用新技术，解决Web前端开发的综合能力。

1 / 82.教学目标列表

三、各单元知识点、技能点分布及学时分配

2 / 82)使用CDN引入Vue.js；

3)通过npm安装；

4)Vue.js的Hello World。

2.2实例及选项模板,数据,方法,计算属性、过滤器等。

2.3数据绑定1)插值；

2)表达式绑定；

3)双向数据绑定；

4)过滤器。

2.4 计算属性

1)计算属性介绍及用法；

2)计算属性与方法的区别。

2.5生命周期生命周期对应的方法。

第一个Vue.js应用

2.6 章节案例简单的秒表

运用第3章

Vue.js内置指令3.1基本指令

1)v-text 和v-html指令；

2)v-cloak指令；

3)v-once指令；

4)v-if 、v-else和v-show指令；

5)v-on指令；

理解

运用

4 4

3 / 86)v-for指令；

7)数组更新。

3.2v-bind指令

1)v-bind指令基本用法；

2)v-bind绑定样式。

3.3v-model指令3)v-model指令基本用法；

4)用v-for动态渲染选项；

5)绑定值；

6)修饰符。

4.1组件的基本使用1)全局组件；

2)局部组件；

3)组件内的data必须是一个函数；

4)使用template元素创建组件；

5)组件嵌套；

6)使用props传递数据。

第4章Vue.js组件

4.2组件通信1)父组件向子组件传递数据；

2)子组件向父组件传递数据；

3)非父子组件通信；

理解

运用

6 6

4 / 8

5 / 8 4)创建自定义组件；

5)内容分发。

4.3动态组件 基础用法,keep-alive,activate 钩子函

数。

4.4动手实践 使用Vue 组件开发购物车。

5.1过滤器的注册和使

用 1)过滤器注册； 2)双向过滤器。

5.2过滤器参数 参数、动态参数。

5.3自定义指令注册和

使用 1)自定义全局指令； 2)局部的自定义指令。 5.4钩子函数 Vue 提供了自定义指令的几个钩子函

数。

5.5对象字面量 使用JavaScript 对象字面量。 第5章 Vue.js 过滤器和自

定义指令 5.6章节案例

1)使用过滤器移除数组中的重复项；

2)使用自定义指令实现彩虹标题效果；

理解

运用 4 4

6.1CSS 过渡

CSS 过渡的用法,CSS 过渡钩子函数,显

示声明过渡类型,自定过渡类名。

第6章 Vue.js 过渡和动画

6.2CSS 动画 CSS 动画使用。 理解 运用 2 2

6 / 8 6.3JavaScript 过渡 JavaScript 过渡使用。

6.4自定义过渡类名 漂亮的列表过渡动画。

7.1快速构建项目 Vue CLI 简介，使用Vue CLI 构建项目。

7.2前端路由 前端路由的简单实现，Vue 中的前端路

由。

7.3服务器端数据访问

axios

1)跨域请求； 2)Get 请求； 3)Post 请求。 7.4webpack 讲解 Webpack 讲解

第7章

Vue 脚手架 7.5章节案例 课程和教师列表管理。

理解 运用 6 8

8.1Vuex 的概述和安

装 1)Vuex 的概述； 2)Vuex 的安装。

8.2Vuex 的基本使用

1)Store 概述； 2)Vuex 的使用。 8.3Vuex 的复杂使用 state 、mutations 和actions 。

第8章

Vuex 8.4章节案例 虚拟用户管理。

运用 2 4

第9章 9.1Weex 简介、Weex

安装与运行 1)了解Weex 前端框架； 理解 运用 2 2

2)创建实例并运行；

跨平台开发Weex

3)在Weex中使用Vue.js。

9.2Weex基本概念、

Weex基本概念、内置组件、内置模块。

内置组件、内置模块

四、实践项目实施计划表

单人实现

五、教学方法

讲授教学法、演示教学法、案例教学法、指导教学法、自主学习法。

六、教学资源

1.教材

《Vue应用程序开发》

七、课程考核

1.形成性考核标准

7 / 8

2.终结性考核安排

8 / 8