《Vue.js前端框架技术与实战》教学大纲与实训大纲

《前端框架技术与实战》教学大纲与实训大纲

《前端框架技术与实战》

教学大纲与实训大纲

学分：4

学时：64 (48时理论/16时上机)

一、课程的性质、地位与任务

《前端框架技术与实战》课程是计算机科学与技术、信息管理与信息系统、软件工程、网络工程、数字媒体技术、物联网工程等专业的一门专业（必修/选修）课程，也是其他计算机相关专业的普及型课程，通过对的特性和开发环境配置的了解和基础语法、指令、组件、过渡与动画、Vuex、Vue Router以及周边生态系统的学习和研究，让学生理解和掌握这一渐进式框架的核心概念（组件化、模块化），通过项目实践培养学生开发和设计复杂的单页面应用的基本技能和素质要求，适应目前Web前端工程师的岗位需要。

二、课程的教学目标与基本要求

本课程教学基本要求是让学生理解渐进式框架的核心概念，熟练掌握前端项目开发基本流程、开发环境部署与配置、单页面应用项目目录结构定义等基础知识。掌握基础语法、指令、组件开发、过渡与动画等关键概念；掌握使用Vue Router实现单页面内导航与路由设置，结合Vuex解决大中型Web前端项目数据共享问题，初步熟悉Vue3.0新特性,能够使用Vue

3.0新特性解决简易的web前端项目，通过比较法来加深对Vue3.0新特性的理解。

本课程的教学目标是让学生运用HTML5、CSS3、JavaScript熟悉地理解和掌握核心概念和基础语法，掌握Vue指令、组件、过渡与动画等语法与使用方法。熟练地使得Vue Router来构建单页面导航并渲染路由组件。在中小型项目中使用Vuex解决多组件状态数据共享的问题。让学生使用Vue CLI脚手架来搭建Vue2.6和Vue3.0项目，通过项目实训，培养学生具有开发含状态数据共享和路由导航功能于一体的中小型Web单页面的能力。

三、课程内容（重点△，难点★）

第1章 概述

1.1 了解简介

1.2

△学会生产环境配置

1.2.1 引入方法

1.2.2 安装Vue Devtools

1.3

△掌握VUE页面基本结构

1.3.1 template标记

1.3.2 script标记

1.3.3 style标记

1.4 熟悉开发工具（会熟练使用一种主流开发工具）

1.4.1 掌握Visual Studio Code【推荐】

1.4.2 Sublime Text

1.4.3 WebStorm

1

《前端框架技术与实战》教学大纲与实训大纲

1.4.4 掌握HBuilder X【推荐】

第2章 基础

2.1 理解MVC与MVVM模式

2.1.1 MVC模式

2.1.2 MVVM模式

2.2

△掌握数据绑定与插值

2.2.1 文本绑定

2.2.2 HTML代码绑定

2.2.3 属性绑定

2.2.4 JavaScript表达式绑定

2.3

△掌握计算属性与方法

2.3.1 计算属性基础应用

2.3.2

△计算属性缓存与方法比较

2.3.3 计算属性的setter和getter

2.4

★掌握侦听属性WATCH

2.4.1

★watch属性基本用法

2.4.2

★watch属性高级用法

2.5

★理解生命周期钩子函数

2.5.1 生命周期钩子函数作用

2.6 学会使用控制台CONSOLE对象

2.6.1

△显示信息的命令

2.6.2 占位符

2.6.3 分组显示()

2.5.2 生命周期钩子函数应用

2.6.4

△查看对象的信息()

2.6.5 显示某个节点的内容()

2.6.6 判断变量是否为真()

2.6.8 计时功能

2.6.9 性能分析

2.6.10 表格形式输出数组和对象()

2.7 掌握数据与方法

2.7.1

△数据对象的定义与使用

2.7.2

△Vue实例属性与方法

2.8

★掌握Vue中数组变动更新检测

2.8.1

★变异方法

2.8.2

★非变异方法

2.9 理解并掌握Vue中过滤器

2.6.7 追踪函数的调用轨迹()

2

《前端框架技术与实战》教学大纲与实训大纲

第3章 指令

3．1

△掌握内置指令

3.1.1

△条件渲染

3.1.2

△用key管理可复用的元素

3.1.3

△根据条件展示元素v-show

3.1.4

△列表渲染v-for指令

3.1.5

△绑定属性v-bind指令

3.1.6

△事件处理v-on指令

3.1.7 事件修饰符

3.1.8 按键修饰符

3.1.9

△v-model表单输入绑定

3.1.10 表单元素值绑定

3.1.11 v-model与修饰符

3.1.12 v-text与v-html指令

3.1.13

△v-cloak、v-once、 v-pre指令

3.2

△★掌握自定义指令

3.2.1

△自定义指令注册

3.2.2 对象字面量

3.2.3

★动态指令参数

3.2.4 自定义指令实际应用

第4章 基础案例实战

4.1 掌握简易图书管理

4.1.1 简易图书管理项目需求

4.1.2 简易图书管理项目实现

4.2 掌握我的待办事项MyToDos

4.2.1 我的待办事项项目需求

4.2.2 我的待办事项项目实现

第5章 组件开发

5.1 掌握组件基础

5.1.1 组件命名

5.1.2 组件注册

5.2

★掌握组件间通信

5.2.1

★父组件向子组件传值

5.2.2

★子组件向父组件传值

5.2.3

★兄弟组件之间通信

5.2.4

★父链与子组件索引

5.3 掌握单文件组件

5.4

★掌握插槽

5.4.1

★匿名插槽

5.4.2

★具名插槽

3

《前端框架技术与实战》教学大纲与实训大纲

5.4.3

★作用域插槽

5.4.4

★动态插槽名

第6章 过渡与动画

6.1

△掌握单元素/组件的过渡

6.1.1

△过渡的类名

6.1.2

△CSS过渡

6.1.3

△CSS动画

6.1.4 自定义过渡的类名

6.1.5 同时使用过渡和动画

6.1.6 显性的过渡持续时间

6.1.7 JavaScript钩子

6.2 掌握初始渲染的过渡

6.3

△掌握多个元素的过渡

6.4

△掌握多个组件的过渡

6.5 掌握列表过渡

6.5.1

★列表的进入/离开过渡

6.5.2

★列表的排序过渡

6.5.3 列表的交错过渡

第7章 Vue项目开发环境与辅助工具部署

7.1 理解部署

7.1.1 简介

7.1.2 部署

7.1.3

△模块系统

7.1.4 创建第一个应用

7.2 掌握Node包管理器npm

7.2.1 npm简介

7.2.2

△npm常用命令

7.3

△掌握环境配置

7.4 掌握webpack打包工具

7.4.1 webpack简介

7.4.2

△webpack使用与基本配置

7.4.3

△★webpack配置加载器loaders

7.4.4

★webpack配置插件

7.4.5

△webpack配置开发服务器

7.5 掌握VUE CLI

7.5.1 Vue CLI安装

7.5.2

△Vue CLI创建Vue项目

7.5.3

△Vue CLI可视化创建Vue项目

4

《前端框架技术与实战》教学大纲与实训大纲

第8章 前端路由Vue Router

8.1

△掌握Vue Router概述

8.1.1 Vue Router安装与使用

8.1.2 Vue Router基础应用

8.2

△掌握Vue Router高级应用

8.2.1

△★动态路由匹配

8.2.2

△嵌套路由

8.2.3

△编程式导航

8.2.4

△命名路由

8.2.5

△命名视图

8.2.6

△重定向和别名

8.2.7

★路由组件传参

8.2.8

△HTML5 History 模式

第9章 状态管理模式Vuex

9.1掌握Vuex概述

9.1.1 Vuex定义

9.1.2 简单状态管理-store模式

9.2

△掌握Vuex基本使用

9.3

△掌握Vuex核心概念

9.3.1 一个完整的store结构

9.3.2 最简单的store

9.3.3 Vuex中state

9.3.4 Vuex中getter

9.3.5

△★Vuex中mutation

9.3.6

△★Vuex中action

9.3.7

△★Vuex中module

9.4 理解并掌握Vuex多模块实战案例

第10 章 Vue UI组件库

10.1 理解并掌握Vue PC端组件库

10.1.1

△Element UI

10.1.2 iView UI

10.1.3 其它PC端UI组件库

10.2 理解并掌握Vue移动端UI组件库

10.2.1 Mint UI

10.2.2

△Vant UI

第11 章 Vue高级项目实战

11.1 理解并掌握友联通讯录

11.1.1 项目需求

5

《前端框架技术与实战》教学大纲与实训大纲

11.1.2 实现技术

11.1.3 环境配置

11.1.4

★项目实现

11.2

★理解并掌握通用登录/注册管理系统

11.2.1 项目需求

11.2.2 实现技术

11.2.3 环境配置

11.2.4

★项目实现

第12 章 Vue 3.0基础应用

12.1 了解Vue 3.0新特性

12.1.1 新特性简介

12.1.2 下一阶段工作

12.1.3 Vue 3.0学习参考

12.2 学会Vue 3.0初步体验

12.2.1 Vue 3.0下载与引用

12.2.2 Vue 3.0创建简易应用

12.2.3 Vue 3.0发布文档的使用

12.3

△★掌握Vue 3.0新特性应用

12.3.1 使用脚手架创建项目

12.3.2

△组件选项setup()

12.3.4

△watch、watchEffect和computed

12.3.5

△ref引用DOM元素和组件实例

12.3.6

△Vue Router和Vuex

12.3.7

△Vue 3.0生命周期

12.3.9

★组合式API

12.3.10

★模板refs

12.4 理解并掌握VUE 3.0购物车实战

12.4.1 项目设计要求

12.4.2

△★项目实现

12.3.8

△提供provide()和注入inject()

6

《前端框架技术与实战》教学大纲与实训大纲

四、时间分配（以64学时为例）

教学环节（学时）

序

号

教 学 内 容

课时

1

第1 章 概述

第2章 基础

2

第3章 指令

8

6

讲课

教学形式

讲授+实操演示

讲授+实操演示

讲授+实操演示

讲授+实操演示

讲授+实操演示

讲授+实操演示

讲授+实操演示

讲授+实操演示

讲授+实操演示

讲授+实操演示

讲授+实操演示

内容

实训1-实训2

实训3

实训

小计

课时

2

教学形式

视频+上机演示

视频+上机演示

视频+自学

视频+上机演示

视频+上机演示

视频+上机演示

视频+上机演示

视频+上机演示

视频+上机演示

自学

视频+上机演示

8

2 10

3

第4章 基础案例实战

2 实训4 0 2

4

第5章 组件开发

6 实训5 2 8

5

第6章 过渡与动画

4 实训6 2 6

6

第7章 Vue项目开发环境与辅助工具部署

4 实训7 2 6

7

第8章 前端路由Vue Router

4 实训8 2 6

8

第9章 状态管理模式Vuex

4 实训9 2 6

9

第10 章 Vue UI组件库

2 实训10 0 2

10

第11 章 Vue高级项目实战

4 实训11 0 4

11

第12 章 Vue 3.0基础应用

总

计

4 实训12 2 6

48 16 64

7

《前端框架技术与实战》教学大纲与实训大纲

五、课程说明

课程英文名称 Front End Frame Technology and Actual Combat

主要先修课程 计算机导论、计算机网络、Web前端开发基础(HTML、CSS、JavaScript)

适用专业类别 软件工程、计算机科学与技术、信息管理与信息系统、网络工程等相关专业

主要教材

课程性质

考核方式

前端框架技术与实战

通识基础□ 学科基础□ 专业选修√ 集中实践环节□

平时（平时成绩30%+实训20%）50%+期末考试50%

其中平时成绩30%=课程实训视频10%+作业10%+签到10%

《前端框架技术与实战》课程是软件工程、计算机科学与技术、信息管理与信息系统等专业的一门专业课程，通过对渐进式框架的学习和研究，让学课程简介

生理解和掌握核心概念（组件化、模块化）和基础语法与开发环境配置方法，熟练掌握项目开发流程，通过项目实训，培养学生开发和设计复杂单页面应用的基本工程能力。

序号 项 目 名 称 实训内容提要

(1)学会定义Vue根实例对象，并初步掌握常用选项el和data的相关数据属性的定义。

(2)学会引入Vue,完成Vue视图的定义。

(3)学会使用v-model指令绑定select元素，通过下拉列表框选择相应的选项。

(4)学会启用浏览器调试，辅助项目调试。

学时

1.内置指令v-model实训--下拉列表框绑定

1

必开实训项目

0（课(1)学会引入Vue,完成项目初始化工作。

外实(2) 学会定义Vue实例对象，学会配置el、践）

template和data的选项。

2.模板中v-bind指(3)学会在template模板中使用data中的令实训--Vue实例中数据（{{dataOptions}}），并在模板中定义嵌选项的配置

套的div,用于显示专业描述，绑定class为“divStyle”。

(4) 学会使用CSS定义相关div的样式。

(1)学会引入,在Vue视图中定义表单。

(2)学会定义Vue实例对象，会配置el和data等选项。

1.侦听属性的综合(3)学会配置methods和watch等选项，并实训--动态观察学完成函数的定义。

生信息采集。

(4)学会使用v-model、v-bind、v-on等指令来完成表单绑定、属性绑定和事件绑定。

(5)学会使用CSS定义fieldset、input等标记的样式。

2 2

8

《前端框架技术与实战》教学大纲与实训大纲

(1)学会定义Vue实例对象，会配置el和data、methods、computed等选项。

(2)学会引入,并完成Vue视图中的表单的定义。

2.计算属性、方法、(3)学会使用v-model、v-on、v-for等指令过滤器的综合

来完成表单绑定、事件绑定、遍历商品。

(4)学会使用CSS定义table、tr、fieldset、input等标记的样式。

(5)学会定义filters和methods属性。

(1)学会引入Vue,完成简易表单设计。

(2)学会定义Vue实例对象，会配置el、data1.内置指令实训--和methods等选项。

人员添加并输出

(3)学会使用v-on 、v-model、v-bind及v-for等内部指令。

(1)学会引入Vue,完成HTML文档基本结构的定义。

(2)学会在一个文件中同时定义2个Vue实例对象，分别解决不同的应用需求，并配置el、data和directives等选项。

(3)学会使用自定义指令的注册方法。会用全局注册和局部注册的方式定义相关的指令。

(4)学会使用v-bind指令绑定style,给div设置相应的样式。

3

2.自定义指令实训--自定义字符装饰

2

4

(1)图书添加功能。使用HTML5表单元素，设计图书信息添加界面。图书信息包含：图书ID、图书名称、出版社、作者、插入日期等字段。将合法数据添加到数组中，并通过表格输出。

基础案例(2)图书搜索功能。在输入关键字文本框中实训--简易图书管输入相关信息，可以在图书中进行模糊查询，并理 通过表格展示查询到的图书信息。

(3)图书删除功能。在表格最右侧的“操作”栏目中，当单击“删除”时，可以将此条图书信息删除，同时表格内容同步更新。“编辑”按钮0（课的功能暂不要求设计。

外实(1)使用HTML5表单完成界面设计。表单实践）

现输入待办事项后按“添加”按钮，可以将待办事项添加到展示项目中。

(2)待办事项处理。对已经完成的待办事项打上勾号“√”标记一下，同时也可以通过“×”基础案例

标记删除该事项。如图4-5所示。待办项目使用复选框进行展示，并在每个待办项目后面添加一个“×”号,用于删除该事项。

(3)状态显示栏设置：剩余项目数/项目数、全部、待完成、已完成、清除完成等功能。

9

《前端框架技术与实战》教学大纲与实训大纲

1.组件间通信

（1）学会定义Vue组件，并学会注册组件。

（2）学会使用CSS定义div、button、input及img标记的样式。

（3）学会使用事件总线来实现任意组件间相互通信，能够使用$emit()和$on()来发送和接收消息。

（4）学会定义Vue实例和配置相关选项，会定义相关方法。学会定义HTML5表单。

（1）学会全局定义Vue组件，并完成组件的设计。

（2）学会使用CSS定义div、button、h3及slot等标记的样式。

（3）利用props属性实现父组件向子组件传值。

（4）学会定义具名插槽来展示传递信息，利用动态插槽名的变更实现内容和样式的更新传递。

（5）学会定义Vue实例和配置相关选项，会定义相关方法实现相关功能。

(1)学会定义Vue实例，并完成相关选项的配置。

(2)学会使用CSS定义超链接等标记的样式，学会使用过渡类名，并完成多组件过渡样式定义。

(3)学会trsnaition组件及动态组件实现多个组件切换显示。

2

2 5

2.插槽综合实训--页面布局换肤

1.多组件过渡

6

(1)学会定义Vue实例，并完成相关选项的配置。

(2)学会使用CSS3定义按钮、列表及列表项2.列表过渡实训--的样式效果。

列表添加、删除及重(3)学会使用来定义列表项弹跳新排序

式动画（洗牌（_.shuffle(arrayName)）效果。

(4)学会使用transition-group组件来实现列表的进入/离开的过渡、排序过渡的效果。

(1) 学会使用Vue创建工程项目。

(2) 学会编写、、等文件。

(3) 学会使用DOM操作创建、添加新元素。

k打包资源

(4) 学会导入CSS样式文件、图像文件到JavaScript文件中。

(5) 学会使用webpack编译和打包工程文件，并能在调试状态下运行项目。

7 2

10

《前端框架技术与实战》教学大纲与实训大纲

（1）学会使用Vue UI启动图形化界面创建-cli可视化创工程项目。

建项目实训--创建（2）学会使用Vue UI创建与管理Vue项目webpack-ex-2项目

（创建、预设、配置等）。

(1)学会使用webpack模板创建Vue项目。

(2)学会在项目中安装和导入vue-router插件。

+Vue

(3)学会使用Vue Router设置导航、定义路Router+webpack组由、定义路由组件、定义路由管理器实例。

合实训

(4)参照天猫中“服饰主会场”中部分页面效果。使用Vue+Vue Router+ Webpack完成项目实训。

(1)学会使用webpack模板创建Vue项目。

(2)学会在项目中安装和导入vue-router插件。

(3)学会使用Vue Router设置导航、定义路由及嵌套路由、定义路由组件、定义路由管理器实例。

(1)学会使用webpack模板创建Vue项目。

(2)学会在项目中安装和导入Vuex。

(3)学会使用Vuex的state、getters、mutations、actions等核心概念解决工程应用中状态共享问题。

(4)学会使用计算属性和辅助函数获取Vuex状态。

(5)学会在组件中使用this.$获取状态，使用this.$触发mutation及使用this.$ch分发action。

(6)学会编写action和mutation函数，并习惯使用action去触发mutation。

综合运用Vuex的五大核心概念，使用多module来分割store，同时使用命名空间来区分使用不同模块的action。以“IT管理学院信息管理系统”为例，简易实现教师和学生的管理。

(1) 教师端。主要功能是输入教师信息，并添加到教师列表中，然后可能给指定ID的教师增加薪酬，并将增加薪酬的教师信息添加背景颜色来标识一下。

(2) 学生端。主要功能是给学生增加成绩，每次递增5分，最高成绩为100分，成绩范围：30～95。

11

8 2

Router+webpack

项目实训--计数器counter

9 2

项目实战

《前端框架技术与实战》教学大纲与实训大纲

官方示例合集实训--使用Vant搭建应用

10

(1)学会从GitHub上下载相关项目资源（/youzan/vant-demo），并能够按照提示的步骤进行项目部署。

(2)熟悉Vant-Demo（vant-demo-master）项目中vant/base子项目所采用的技术栈（Vue、Vue Cli、Vue Router、Vant）。

(3)学会使用Vue Router定义路由、定义路由组件、定义路由管理器实例。

(4)熟悉使用Vue+Vue Router+Vant构建项0（课目，了解项目文件构成结构。

外实(1)学会使用CDN或本地引入Vue和践）

Element UI。

(2)熟悉Element UI组件库中组件的分类，重点掌握输入框组件（el-input）、表格组件(el-table、el-table-column)、行/列组件(el-row、el-col)和按钮(el-button)等组件的使用方法。

(3)掌握分页组件(el-pagination)的layout、background、page-size、pager-count、total、small等属性的含义与设置方法。

自己动手，完成“友联通讯录”的所有功能实训练习。并尝试对友联通讯录主页面文件进行修改，使用Element

UI中Pagination分页组件实现通讯录按设定的“行/页”格式显示。

+Element表格组件实训--带搜索功能的表格数据分页显示

高级应用实训--友联通讯录

11

熟悉Vue前后端分离项目的开发流程，自己动手，完成“通用登录/注册管理系统”的所有功能实训练习。

0（课(1) 在数据库login中增加一个数据表外实books，设置bookno（字符，13位）、bookname(字践）

高级应用符，50位)、pubpress(字符，30位)、bookdate(日实训--通用登录/注期，如“2020-09-21”)、price(浮点)、count(整册管理系统

数，库存)等字段。

(2) 参照user表，编写图书操作的CRUD的和,并在左侧导航中增加相应的图书操作的菜单和编写相对应的Vue组件。

3.0提供/注入实训--父组件操控子组件中div样式

(1)掌握使用Vue CLI创建Vue 3.0简易工程项目的方法。

(2)掌握Vue 3.0中的提供/注入provide()/inject()函数的使用方法。

(3)学会定义setup()函数和创建ref响应式对象。

12

12 2

《前端框架技术与实战》教学大纲与实训大纲

(4)学会使用provide()函数提供普通数据共享和ref响应式数据共享。

(5)学会按需导入项目中所需要的函数。

3.0中Vuex和Vue Router实训--简易图书选购

(1)学会使用Vue CLI创建集成Vuex和Vue

Router功能的Vue 3.0工程项目。会使用手动或自动方式进行项目初始选项的设置。

(2)熟悉默认初始创建项目的文件结构，并会与Vue2.x项目文件结构进行比较，总结Vue

3.0项目文件结构的特点。

(3)学会使用Vue Router定义路由、定义路由组件。会使用createRouter、

createWebHistory两个API创建路由管理器router和history对象。

(4)学会使用createStore创建store对象。根据状态数据的操作需要编写相关的mutations和actions。

(5)学会在组件中导入useStore API函数，并在setup()函数内触发相关的mutations或分发actions。学会导入useRouter API函数，并在setup()函数中使用路由器来切换路由。

(6)完成项目的开发任务。

13

《前端框架技术与实战》教学大纲与实训大纲

六、课内实训

（一）本课程实训的目的与要求

通过本课程的课堂学习和实训，使学生加深理解核心概念和基本语法，掌握内部指令和自定义指令、组件定义与通讯和过渡与动画等基础知识。能够熟练地运用Vue Router和Vuex组件技术解决实际工程中单页面导航和组件渲染及多组件状态数据共享。通过项目实训，让学生使用Vue CLI脚手架来搭建Vue2.6和Vue3.0项目，通过项目实训，培养学生具有开发含状态数据共享和路由导航功能于一体的中小型Web单页面的能力。

基本要求：

1.熟练掌握前端框架技术主流开发工具和环境部署方法。

2.掌握Vue项目的组件化和模块化构建技术的核心思想与方法。

2.深入学习Vue Router和Vuex组件技术，解决实际项目中路由导航和状态数据共享问题。

4.学会使用Vue CLI构建Vue 2.6和Vue 3.0项目。

（二）本课程实训的项目和主要内容

序号

学时

项目名称

1-1.内置指令v-model实训--下拉列表框绑定

1-2.模板中v-bind指令实训--Vue实例中选项的配置

主要内容

(1)学会定义Vue根实例对象及el和data选项。

(2)学会引入Vue,完成Vue视图的定义。

(3)学会使用v-model指令绑定select元素。

类型

1

2

0

(课外(1)学会引入Vue、定义Vue实例及配置el、template和实data的选项。

践)

(3)学会在template模板中使用data中的数据，并在模板中绑定class。

(1) 学会引入及定义Vue实例对象、配置el和data等选项。

(2)学会配置methods和watch等选项，并完成函数的定义。

(3)学会使用v-model、v-bind、v-on等指令来完成表单绑定、属性绑定和事件绑定。

(1)学会定义Vue实例对象、配置el和data、methods、computed等选项。

(2)学会引入,使用v-model、v-on、v-for等指令来完成表单绑定、事件绑定、遍历商品。

(3)学会定义filters和methods属性。

设计性

设计性

3

2-1.侦听属性的综合实训--动态观察学生信息采集。

2

2-2.计算属性、方法、过滤器的综合实训--邮购商品业务

设计性

4 设计性

14

《前端框架技术与实战》教学大纲与实训大纲

5

3-1.内置指令实训--人员添加并输出

(1)学会引入Vue,定义Vue实例对象及配置el、data和methods等选项。

(2)学会使用v-on 、v-model、v-bind及v-for等内部指令。

2

设计性

6

3-2.自定义指令实训--自定义字符装饰

(1)学会引入Vue,同时定义2个Vue实例对象，分别解决不同的应用需求，并配置el、data和directives等选项。

(2)学会使用自定义指令的注册方法。会用全局注册和局设计性

部注册的方式定义相关的指令。

(3)学会使用v-bind指令绑定style,给div设置相应的样式。

使用HTML5表单元素，设计图书信息添加界面完成图书添加、图书搜索、图书删除。图书信息包含：图书ID、图书名称、出版社、作者、插入日期等字段。

综合性 7

基础案例实训--简易图书管理

8

0

(课使用HTML5表单完成界面设计。按“添加”按钮将外待办事项添加到展示项目中。

基础案例实在复选框中打上勾号“√”标记一下完成的待办事实训--我的待办事项

践)

项，单击“×”符号删除该事项。

完成状态显示栏设置。剩余项目数/项目数、全部、待完成、已完成、清除完成等功能。

（1）学会定义Vue组件，并学会注册组件。

（2）学会使用事件总线来实现任意组件间相互通信，能够使用$emit()和$on()来发送和接收消息。

（3）学会定义Vue实例和配置相关选项，会定义相关方法。学会定义HTML5表单。

(1)学会全局定义Vue组件，并完成组件的设计。

(2)利用props属性实现父组件向子组件传值。

(3)学会定义具名插槽来展示传递信息，利用动态插槽名的变更实现内容和样式的更新传递。

(1)学会定义Vue实例，并完成相关选项的配置。

(2)学会使用CSS定义超链接等标记的样式，学会使用过渡类名，并完成多组件过渡样式定义。

(3)学会trsnaition组件及动态组件实现多个组件切换显示。

2

综合性

9

5-1.组件间通信实训--友谊聊吧

2

5-2.插槽综合实训--页面布局换肤

设计性

10

设计性

6-1.多组件过渡实训11 --京东--智能生活-部分菜单仿真设计

设计性

6-2.列表过渡实训--12 列表添加、删除及重新排序

(1)学会定义Vue实例，并完成相关选项的配置。

(2)学会使用CSS3定义按钮、列表及列表项的样式效果。

(3)学会使用来定义列表项弹跳式动画（洗牌设计性

（_.shuffle(arrayName)）效果。

(4)学会使用transition-group组件来实现列表的进入/离开的过渡、排序过渡的效果。

15

《前端框架技术与实战》教学大纲与实训大纲

13

k打包资源

2

(1)学会使用Vue创建工程项目。

(2)学会编写、、等文件。

(3)学会使用DOM操作创建、添加新元素。学会导入CSS样式文件、图像文件到JavaScript文件中。

(4)学会使用webpack编译和打包工程文件，并能在调试状态下运行项目。

设计性

-cli可视化14 创建项目实训--创建webpack-ex-2项目

(1)学会使用Vue UI启动图形化界面创建工程项目。

验证性/(2)学会使用Vue UI创建与管理Vue项目（创建、预设、操作性

配置等）。

(1)学会使用webpack模板创建Vue项目。

(2)学会在项目中安装和导入vue-router插件。

(3)学会使用Vue Router设置导航、定义路由、定义路由组件、定义路由管理器实例。

(4)参照天猫中“服饰主会场”中部分页面效果。使用Vue+Vue Router+ Webpack完成项目实训。

2

(1)学会使用webpack模板创建Vue项目。

(2)学会在项目中安装和导入vue-router插件。

(3)学会使用Vue Router设置导航、定义路由及嵌套路由、定义路由组件、定义路由管理器实例。

(4)参照“百度推广”首页导航（/ebaidu/home）。使用Vue+Vue

Router+ Webpack完成项目实训。

(1)学会使用webpack模板创建Vue项目。

(2)学会在项目中安装和导入Vuex。

(3)学会使用Vuex的state、getters、mutations、actions等核心概念解决工程应用中状态共享问题。

(4)学会使用计算属性和辅助函数获取Vuex状态。

(5)学会在组件中使用this.$获取状态，使用this.$触发mutation及使用this.$ch分发action。

(6)学会编写action和mutation函数，并习惯使用action去触发mutation。

2

综合运用Vuex的五大核心概念，使用多module来分割store，同时使用命名空间来区分使用不同模块的action。以“IT管理学院信息管理系统”为例，简易实现教师和学生的管理。

 教师端。主要功能是输入教师信息，并添加到教师列表中，然后可能给指定ID的教师增加薪酬，并将增加薪酬的教师信息添加背景颜色来标识一下。

 学生端。主要功能是给学生增加成绩，每次递增5分，最高成绩为100分，成绩范围：30～95。

16

15

+Vue

Router+webpack组合

设计性

16

Router+webpack项目

设计性

17

项目实训--计数器counter

设计性

项目实战18 --Vuex-IT管理学院信息管理系统

综合性

《前端框架技术与实战》教学大纲与实训大纲

官方示例19 合集实训--使用Vant搭建应用

+Element表格组件实训--带搜索20

功能的表格数据分页显示

0

(课外实(1)学会使用CDN或本地引入Vue和Element UI。

践)

(2)熟悉Element UI组件库中组件的分类，重点掌握输入框组件（el-input）、表格组件(el-table、el-table-column)、行/列组件(el-row、el-col)和按钮(el-button)等组件的使用方法。

(3)掌握分页组件(el-pagination)的layout、background、page-size、pager-count、total、small等属性的含义与设置方法。

(1)学会从GitHub上下载相关项目资源（/youzan/vant-demo），并能够按照提示的步骤进行项目部署。

(2)熟悉Vant-Demo（vant-demo-master）项目中vant/base子项目所采用的技术栈（Vue、Vue Cli、Vue

Router、Vant）。

(3)学会使用Vue Router定义路由、定义路由组件、定义路由管理器实例。

(4)熟悉使用Vue+Vue Router+Vant构建项目，了解项目文件构成结构。

验证性

设计性

21

高级应用实训--友联通讯录

自己动手，完成“友联通讯录”的所有功能实训练习。并尝试对友联通讯录主页面文件进行修改，使用Element UI中Pagination分页组件实现通讯录按设定的“行/页”格式显示。

0

(课外实践)

综合性

高级应22 用实训--通用登录/注册管理系统

熟悉Vue前后端分离项目的开发流程，自己动手，完成“通用登录/注册管理系统”的所有功能实训练习。

(1)在数据库login中增加一个数据表books，设置bookno（字符，13位）、bookname(字符，50位)、pubpress(字符，30位)、bookdate(日期，如综合性

“2020-09-21”)、price(浮点)、count(整数，库存)等字段。

(2)参照user表，编写图书操作的CRUD的和,并在左侧导航中增加相应的图书操作的菜单和编写相对应的Vue组件。

(1)掌握使用Vue CLI创建Vue 3.0简易工程项目的方法。

(2)掌握Vue 3.0中的提供/注入provide()/inject()函数的使用方法。

(3)学会定义setup()函数和创建ref响应式对象。 综合性

(4)学会使用provide()函数提供普通数据共享和ref响应式数据共享。

(5)学会按需导入项目中所需要的函数。

(1)学会使用Vue CLI创建集成Vuex和Vue Router功能的Vue 3.0工程项目。会使用手动或自动方式进行项目初始选项的设置。

(2)熟悉默认初始创建项目的文件结构，并会与Vue2.x项目文件结构进行比较，总结Vue 3.0项目文件结构的17

3.0提供/注23 入实训--父组件操控子组件中div样式

2

3.0中24 Vuex和Vue Router实训--简易图书选购

综合性

《前端框架技术与实战》教学大纲与实训大纲

特点。

(3)学会使用Vue Router定义路由、定义路由组件。会使用createRouter、 createWebHistory两个API创建路由管理器router和history对象。

(4)学会使用createStore创建store对象。根据状态数据的操作需要编写相关的mutations和actions。

(5)学会在组件中导入useStore API函数，并在setup()函数内触发相关的mutations或分发actions。学会导入useRouter API函数，并在setup()函数中使用路由器来切换路由。

(6)完成项目的开发任务。

（三）实验说明

课程总学分

考核方式

4 实验学时数 16 实验项目数 24

日常考核√ 操作技能考核□ 卷面考核□ 提交实验结果√ 面试□

适用专业与年级：计算机科学与技术、软件工程、信息管理与信息系统、网络工程、数字媒体技术、物联网工程等相关专业1-3年级

七、课程实施计划

序教学 作业要求

教学内容

号 方式

第1 章 概述

1.1 了解简介

1.2 △学会生产环境配置

1.3 △掌握VUE页面基本结构

1.4 熟悉开发工具

第2章 基础

课堂2.1 理解MVC与MVVM模式

1

讲课 2.1.1 MVC模式

2.1.2 MVVM模式

2.2

△掌握数据绑定与插值

2.2.1 文本绑定

2.2.2 HTML代码绑定

2.2.3 属性绑定

2.2.4 JavaScript表达式绑定

第2章 基础

课堂讲课

2.3

△掌握计算属性与方法

2.3.1 计算属性基础应用

教学目标

掌握常用的开发工具。

学会配置生产环境。

掌握页面的基本组成。

学会编写最基本的页面。

理解MVC、MVVM模式的工作机制。

掌握多种类型数据绑定的方法。

练习1

2

2.3.2

△计算属性缓存与方法比较

2.3.3 计算属性的setter和getter

2.4

★掌握侦听属性WATCH

掌握计算属性与方法在使用上的区别。

学会使用侦听属性处理数据变化的相关事务。

学会基本的控制台输出语句【根据学时和教学要求自选确定教学内容】

18

《前端框架技术与实战》教学大纲与实训大纲

2.4.1

★watch属性基本用法

2.4.2

★watch属性高级用法

2.5

★理解生命周期钩子函数

2.5.1 生命周期钩子函数作用

2.5.2 生命周期钩子函数应用

2.6 学会使用控制台CONSOLE对象

2.6.1

△显示信息的命令

2.6.2 占位符

2.6.3 ()分组显示

2.6.4

△查看对象的信息()

【选学】2.6.5 显示某个节点的内容()

【选学】2.6.6 判断变量是否为真()

【选学】2.6.7 追踪函数的调用轨迹()

【选学】2.6.8 计时功能

【选学】2.6.9 性能分析

【选学】2.6.10 表格形式输出数组和对象()

第2章 基础

2.7 掌握数据与方法

2.7.1

△数据对象的定义与使用

课堂2.7.2

△Vue实例属性与方法

3

讲课

2.8

★掌握Vue中数组变动更新检测

2.8.1

★变异方法

2.8.2

★非变异方法

2.9 理解并掌握Vue中过滤器

4

上机实训2-1、实训2-2

实训

3．1

△掌握内置指令

3.1.1

△条件渲染

3.1.2

△用key管理可复用的元素

3.1.3

△根据条件展示元素v-show

3.1.4

△列表渲染v-for指令

第3章 指令

课堂讲课

3.1.5

△绑定属性v-bind指令

3.1.6

△事件处理v-on指令

3.1.7 事件修饰符

3.1.8 按键修饰符

19

理解生命周期钩子函数在使用上的差异性。

学会定义及使用数据对象

掌握数据实例的相关方法

掌握数据中数组对象的变异与非变异方法

学会定义与使用过滤器

练习2

理解指令的定义与分类。

掌握条件渲染指令的使用与注意事项。

掌握列表渲染指令v-for的多种定义方法

v-for指令及v-bind:key属性配合使用的方法。

掌握数据绑定的多种方式。

掌握事件处理指令及事件修饰符的使用方法。

5

课堂讲课

6

《前端框架技术与实战》教学大纲与实训大纲

第3章 指令

3.1.9

△v-model表单输入绑定

3.1.10 表单元素值绑定

3.1.11 v-model与修饰符

3.1.12 v-text与v-html指令

3.1.13

△v-cloak、v-once、

v-pre指令

第3章 指令

3.2

△★掌握自定义指令

课堂3.2.1

△自定义指令注册

8

讲课 3.2.2 对象字面量

3.2.3

★动态指令参数

3.2.4 自定义指令实际应用

9

上机实训3-1、实训3-2

实训

练习3

掌握Vue自定义指令定义与注册的方法。

掌握v-model、v-text、v-html等内置指令的作用与使用方法。

掌握v-cloak、v-once、 v-pre等其它内置指令的作用与使用方法。

7

课堂讲课

第4章 基础案例实战

4.1 简易图书管理

4.1.1 简易图书管理项目需求

课堂10 4.1.2 简易图书管理项目实现

讲课

4.2 我的待办事项MyToDos

4.2.1 我的待办事项项目需求

4.2.2 我的待办事项项目实现

第5章 组件开发

5.1 掌握组件基础

5.1.1 组件命名

5.1.2 组件注册

5.2

★掌握组件间通信

5.2.1

★父组件向子组件传值

5.2.2

★子组件向父组件传值

第5章 组件开发

12

上机实训

5.2.3

★兄弟组件之间通信

5.2.4

★父链与子组件索引

5.3 掌握单文件组件

第5章 组件开发

5.4

★掌握插槽

课堂5.4.1

★匿名插槽

13

讲课

5.4.2

★具名插槽

5.4.3

★作用域插槽

5.4.4

★动态插槽名

14

上机实训5-1、实训5-2

实训

掌握Vue简易项目基本组成。

学会在项目中引入。

课外实掌握常用v-for、v-bind、v-on、v-model、训4-1、v-show等指令的使用方法。

4-2

掌握Vue过滤器的定义方法。

11

课堂讲课

熟悉组件的命名规范。

掌握全局、局部注册组件的方法。

掌握组件间常用的通信方法。

掌握兄弟组件间通信方法。

学会使用父链this.$parent和子组件索引this.$refs来使用组件的数据

理解单文件组件的构成。

掌握插槽的分类和定义方法。

练习5

20

《前端框架技术与实战》教学大纲与实训大纲

第6章 过渡与动画

6.1

△掌握单元素/组件的过渡

6.1.1

△过渡的类名

6.1.2

△CSS过渡

课堂6.1.3

△CSS动画

15

讲课 6.1.4 自定义过渡的类名

6.1.5 同时使用过渡和动画

6.1.6 显性的过渡持续时间

6.1.7 JavaScript钩子

6.2 掌握初始渲染的过渡

第6章 过渡与动画

6.3

△掌握多个元素的过渡

6.4

△掌握多个组件的过渡

6.5 掌握列表过渡

6.5.1

★列表的进入/离开过渡

6.5.2

★列表的排序过渡

6.5.3 列表的交错过渡

练习6

掌握列表进入/离开、排序和交错过渡的实现方法。

学会编写带有过渡和动画效果的页面。

熟悉过渡类名的含义和命名规范。

掌握单元素/单组件的过渡方法。

掌握初始渲染过渡的方法。

16

课堂讲课

17

上机实训6-1、实训6-2

实训

第7章 Vue项目开发环境与辅助工具部署

7.1 理解部署

7.1.1 简介

7.1.2 部署

18

课堂讲课

7.1.3

△模块系统

7.1.4 创建第一个应用

7.2 掌握Node包管理器npm

7.2.1 npm简介

7.2.2

△npm常用命令

7.3

△掌握环境配置

第7章 Vue项目开发环境与辅助工具部署7.4 掌握webpack打包工具

7.4.1 webpack简介

7.4.2

△webpack使用与基本配置7.4.3

△★webpack配置加载器loaders

熟悉Vue项目基本开发环境和常用的辅助工具。

掌握常用NPM包管理器命令。

课堂19

讲课

7.4.4

★webpack配置插件

7.4.5

△webpack配置开发服务器

7.5 掌握VUE CLI

7.5.1 Vue CLI安装

7.5.2

△Vue CLI创建Vue项目

7.5.3

△Vue CLI可视化创建Vue项目

学会webpack安装和配置。

学会Vue CLI安装与项目创建。

20

上机实训7-1、实训7-1

实训

21

练习7

《前端框架技术与实战》教学大纲与实训大纲

第8章 前端路由Vue Router

8.1

△掌握Vue Router概述

课堂8.1.1 Vue Router安装与使用

21

讲课 8.1.2 Vue Router基础应用

8.2

△掌握Vue Router高级应用

8.2.1

△★动态路由匹配

第8章 前端路由Vue Router

8.2.2

△嵌套路由

8.2.3

△编程式导航

8.2.4

△命名路由

8.2.5

△命名视图

8.2.6

△重定向和别名

8.2.7

★路由组件传参

8.2.8

△HTML5 History 模式

23

上机实训8-1、实训8-1

实训

第9章 状态管理模式Vuex

9.1掌握Vuex概述

9.1.1 Vuex定义

9.1.2 简单状态管理-store模式

上机9.2

△掌握Vuex基本使用

24

实训

9.3

△掌握Vuex核心概念

9.3.1 一个完整的store结构

9.3.2 最简单的store

9.3.3 Vuex中state

9.3.4 Vuex中getter

第9章 状态管理模式Vuex

9.3.5

△★Vuex中mutation

课堂25

9.3.6

△★Vuex中action

讲课

9.3.7

△★Vuex中module

9.4 理解并掌握Vuex多模块实战案例

26

上机实训9-1、实训9-1

实训

第10 章 Vue UI组件库

10.1 理解并掌握Vue PC端组件库

10.1.1

△Element UI

课堂10.1.2 iView UI

27

讲课 10.1.3 其它PC端UI组件库

10.2 理解并掌握Vue移动端UI组件库

10.2.1 Mint UI

10.2.2

△Vant UI

练习8

学会安装和配置Vue Router。

学会定义路由表和路由。

掌握router-link和router-view标记的基本语法。

理解Vue Router的各种高级应用-动态路由。

22

课堂讲课

理解Vue Router的各种高级应用。

学会使用Vue Router实现单页应用中的导航。

掌握Vuex的工作原理。

掌握Vuex五个核心概念。

掌握Vuex中mutation和action的定义与使用方法。

熟悉多模块的应用场景。

掌握Element桌面端UI框架的引入与组件使用方法。

掌握iView桌面端UI框架的引入与组件使用方法。

掌握Mint移动端UI框架的引入与组件使用方法。

掌握Vant桌面端UI框架的引入与组件使用方法。

练习9

22

《前端框架技术与实战》教学大纲与实训大纲

第11 章 Vue高级项目实战

11.1 理解并掌握友联通讯录

课堂11.1.1 项目需求

28

讲课 11.1.2 实现技术

11.1.3 环境配置

11.1.4

★项目实现

第11 章 Vue高级项目实战

学会Vue-Router安装与路由的配置方课外实法。

训11-1 掌握WebStorage对象的常用方法。

学会使用Element UI相关组件解决实际11.2

★理解并掌握通用登录/注册管理系统 工程问题。

课堂课外实29 11.2.1 项目需求 学会安装与配置MySQL、Express、axios、讲课 训11-2

11.2.2 实现技术 body-parser等模块。

11.2.3 环境配置

11.2.4

★项目实现

第12 章 Vue 3.0基础应用

12.1 了解Vue 3.0新特性

12.1.1 新特性简介

12.1.2 下一阶段工作

12.1.3 Vue 3.0学习参考

12.2 学会Vue 3.0初步体验

12.2.1 Vue 3.0下载与引用

课堂12.2.2 Vue 3.0创建简易应用

30

讲课 12.2.3 Vue 3.0发布文档的使用

12.3

△★掌握Vue 3.0新特性应用

12.3.1 使用脚手架创建项目

12.3.2

△组件选项setup()

12.3.3 ref()、reactive()和toRefs()

12.3.4

△watch、watchEffect和computed

第12 章 Vue 3.0基础应用

12.3.5

△ref引用DOM元素和组件实例

12.3.6

△Vue Router和Vuex

12.3.7

△Vue 3.0生命周期

12.3.8

△提供provide()和注入inject()

12.3.9

★组合式API

12.3.10

★模板refs

12.4 理解并掌握VUE 3.0购物车实战

12.4.1 项目设计要求

12.4.2

△★项目实现

32

上机实训12-1、实训12-1

实训

练习12

学会使用Vue CLI脚手架创建Vue3.0工程项目

学会使用crateApp函数创建实例对象。

学会在Vue文件中script标记中定义setup()函数

学会使用ref和reactive函数来创建响应式对象。

学会使用toRefs将响应式对象转换为普通对象。

学会使用computed、watch和watchEffect定义和监听响应式数据。

31

课堂讲课

学会使用ref引用DOM元素和组件实例。

学会使用Vue 3.0中集成的Vuex和Vue

Router来开发项目。

学会使用Vue 3.0中的provide和inject来解决数据共享问题。

学会使用其它Vue 3.0新特性。

23

《前端框架技术与实战》教学大纲与实训大纲

八、教学工具软件

教学工具软件：建议使用VS Code、HBuilder X等主流开发工具。

浏览器工具：建议使用Chrome、Firefox等。

调试工具：Vue2.x 建议使用。Vue3.x建议使用Vue-devtools v 6.0.0 beta

10以上。如果是混合开发，建议使用Vue-devtools v 6.0.0 beta 10以上。

执笔人：

审核人： 时间：

24