《Vue 3基础入门》教学大纲.doc

《Vue3基础入门》

课程教学大纲

（课程英文名称）

课程编号：

学分：学分

学时72学时（其中：讲课学时36上机学时36）

先修课程：计算机基础、计算机网络、HTML、CSS、JavaScript

适用专业：信息技术及其计算机相关专业

开课部门：计算机系

一、课程的性质与目标

《Vue3基础入门》是一本讲解如何利用Vue.js框架进行Web前端组件化开发的教材，内容涉及Vue的基本概念以及优势、Vue开发环境的搭建、Vue实例对象、内置指令、组件、事件、生命周期、全局API以及实例属性、过渡动画、路由、状态管理等。通过本课程的讲解，让学生掌握如何使用Vue快速创建单页面应用，如何实现页面的交互效果以及购物车功能等。本课程提供了丰富的案例，让学生能够根据不同的业务需求开发出不同的功能，如组件过渡效果、购物车等，对于案例的实现思路进行了细致地分析和总结，让学生理解复杂案例的实现过程。最后一章还讲解了综合实战项目“红色旅游APP项目”的开发过程，让学生学会使用vue-cli脚手架工具快速搭建项目，把学习的理论知识灵活地运用到实际项目的开发过程中。

二、教学条件要求

操作系统：Windows7/8/10

开发工具：Chrome、VisualStudioCode编辑器等工具

三、课程的主要内容及基本要求

第一章Vue3简介

学习单元

第一章Vue3简介

学时

2

学习目标

了解Web前端框架

认识Vue3

选择IDE

掌握配置Node.js环境

安装Vue3

熟悉vue-devtools调试工具

学习内容

知识点

了解

掌握

重点

难点

前端框架的诞生

√

MVC模式

√

从MVC模式到MVVM模式

√

什么是Vue3

√

Vue3的优势

√

选择IDE

√

配置Node.js环境

√

√

独立版本安装

√

CDN方式安装

√

npm方式安装

√

√

使用前端脚手架安装

√

√

√

vue-devtools调试工具

√

√

第二章HelloWord与Vue3的基础特性

学习单元

第二章HelloWord与Vue3的基础特性

学时

2

学习目标

掌握HelloWord示例

掌握Vue3组件的生命周期

掌握Vue生命周期钩子函数的使用

掌握Vue组件之间的数据传递的方法

掌握Vue的数据绑定

学习内容

知识点

了解

掌握

重点

难点

HelloWord示例

√

Vue3应用的核心对象

√

√

Vue3的组件结构

√

√

认识生命周期

√

√

√

Vue生命周期的钩子函数

√

√

√

文本插值

√

插入原始HTML

√

利用表单实现简单登录页面

√

利用过滤器过滤指定字符

√

第三章Vue基本指令

学习单元

第三章Vue3基本指令

学时

4

学习目标

掌握Vue条件渲染指令

掌握Vue列表渲染指令v-for

掌握数据绑定指令v-bind

掌握v-model与表单

掌握vue方法、计算属性与监听属性

掌握vue事件处理

掌握vue其他基本指令

掌握vue自定义指令

学习内容

知识点

了解

掌握

重点

难点

条件渲染v-if、v-else-if、v-else

√

条件渲染v-show

√

v-show与v-if的选择

√

列表渲染指令v-for

√

数组更新

√

v-for的其他操作

√

数据绑定指令v-bind

√

√

V-bind动态绑定

√

√

v-model与表单

√

√

表单修饰符

√

Vue3中的方法

√

√

√

计算属性

√

√

√

监听属性

√

√

方法、计算属性与监听属性的区别

√

√

监听事件v-on

√

事件处理函数

√

内联处理函数

√

多事件监听

√

事件修饰符

√

按键修饰符

√

系统修饰键

√

首次渲染指令v-once

√

注册自定义指令

√

钩子函数

√

动态指令参数

√

函数简写与对象字面量

√

第四章Vue组件应用

学习单元

第四章组件应用

学时

4

学习目标

了解组件基础概念

掌握组件间数据传递

掌握Vue3提供了一套内容分发的API

掌握vue3其他应用

掌握列表过渡的实现

掌握封装可复用过渡动画的方法

学习内容

知识点

了解

掌握

重点

难点

基本使用方法

√

组件复用

√

组织结构

√

钩子函数

√

通过props属性传递数据

√

√

通过“总线”传递数据

√

√

√

通过监听事件传递数据

√

√

√

内容分发api基本使用方法

√

√

√

编译作用域

√

后备内容

√

具名插槽

√

√

√

作用域插槽

√

动态插槽名

√

动态组件

√

异步组件

√

√

实现日历组件

√

利用组件实现“弹出层”

√

第五章样式绑定

学习单元

第五章样式绑定

学时

2

学习目标

掌握绑定HTML样式

熟练绑定内联样式

[