admin 管理员组

文章数量: 1086019


2024年4月15日发(作者：it课程有什么)

《基础与应用开发实战（微课版）》教学大纲

课程介绍：

是一套用于构建用户界面的渐进式框架，采用“模型—视图—视图模型”的模式，

支持数据驱动和组件化开发。

本课程在模块化、层次化、活页式、在线式等方面做了大量的探索与实践，构建了独特

的模块化结构。本课程构建了应用开发的理论知识学习与编程技能训练的层次化结

构，由易到难、由浅入深，分为10个单元（包括9个教学单元和1个综合应用实战单元），

分别为起步、Vue网页模板制作、Vue数据绑定与样式绑定、Vue项目创建与运行、

Vue组件构建与应用、Vue过渡与动画实现、Vue路由配置与应用、Vuex状态管理、服务器

端渲染和Vue综合应用实战。

学习层次：

理论知识学习的3个层次：

 入门知识：公共的基础知识，是学习必修知识和项目开发的前提。

 必修知识：应用开发的重点内容，是必须理解、掌握，并能灵活应用的知识。

 拓展知识：有的是难度较高的知识，有的是从知识的完整性、系统性等方面考虑而

列出的知识，有的是为学习能力较强的学习者提供的知识。

编程技能训练的3个层次：

 验证程序编写：以单条语句在命令行窗口中执行，或者编写简单程序代码，对相关

知识进行验证与讲解。

 实例程序编写：以完整程序方式，对知识进行验证性训练，在程序开发环境

中编写程序代码，运行后查看结果。

 综合应用实战：根据待解决的实际问题或待实现的功能需求，应用相关知识编写程

序、实现要求的功能，运行程序并查看结果，主要训练知识应用能力和问题分析能

力。

学习时间：

64学时。

学习内容：

单元 1 起步

Vue概述

下载、安装与引入Vue

Vue应用入门

v2.x的API

Vue实例的生命周期

认知MVVM模式

实战：

 编写程序代码计算金额

 反向输出字符串

 编写程序代码实现图片轮播

1

单元 2 Vue网页模板制作

Vue的指令

模板内容渲染

模板逻辑控制

Vue数组更新及过滤排序

Vue事件处理

template模板制作

鼠标修饰符与键值修饰符

实战：

 使用带有v-for指令的template标签渲染多个元素块

 使用v-for和v-if指令循环显示嵌套的对象

单元 3 Vue数据绑定与样式绑定

Vue表单控件的数据绑定

绑定value

修饰符

class绑定

style绑定

定义与使用过滤器

实战：

 编写程序代码实现英寸与毫米之间的单位换算

 编写程序代码实现图片自动播放与单击播放功能

 编写程序代码实现图片自动缩放与图片播放功能

单元 4 Vue项目创建与运行

熟悉创建Vue项目的多种方法

认知Vue项目的组成结构与自定义配置

认知Vue项目的运行流程

实战：

 基于“++MySQL”实现前后端分离的登录与注册功能

 创建Vite项目实现多种方式浏览与操作图片

单元 5 Vue组件构建与应用

组件基础

组件注册与使用

组件构建

Vue组件选项props

组件之间的通信

Vue自定义事件

Vue组件动态切换

Vue插槽应用

Vue混合

2

实战：

 在自定义组件中利用Vue的transition属性实现图片轮换功能

 在Element UI中实现Table与Pagination组件化

单元 6 Vue过渡与动画实现

通过CSS方式实现过渡效果

通过JavaScript方式实现Vue的过渡效果

实现Vue多元素与多组件过渡

实现Vue列表的过渡效果

实战：

 使用data属性与JavaScript通信以实现列表的渐进过渡效果

 使用CSS实现列表的渐进过渡效果

 使用Vue的transition属性实现图片轮播功能

 使用Vue的transition-group组件实现图片轮播功能

单元 7 Vue路由配置与应用

vue-router的基本使用

重定向和使用别名

设置与使用根路径

设置与使用嵌套路由

设置与使用命名路由

设置与使用命名视图

设置与使用动态路由

实现编程式导航

使用导航钩子函数

使用懒加载

vue-router的API

实战：

 实现用户登录与应用路由切换页面

 基于“+Axios+axios-mock-adapter”实现用户登录

单元 8 Vuex状态管理

Vuex概述

简单的store应用

Vuex的配置选项

Vuex的API

实战：

 使用Vuex在单个HTML文件中实现计数器功能

 使用Vuex的属性与方法实现人员列表查询功能

 使用Vuex结合vue-cli实现计数器功能

单元 9 服务器端渲染

区分服务器端渲染和客户端渲染

手动搭建项目实现简单的服务器端渲染

3

使用框架实现服务器端渲染

Vue-SSR的工作原理

实战：

 创建一个简单的vue-ssr服务器端渲染项目

 创建vue-cli改造而成的vue-ssr服务器端渲染项目

 基于创建一个服务器端渲染应用——旅游网站

单元 10 Vue综合应用实战

编写程序实现简单的登录注册评论功能

编写程序实现简单的购物车功能

综合应用多项技术实现前后端分离的移动版网上商城项目

综合应用多项技术实现前后端分离的网上商城项目

4


本文标签： 实现 应用 知识 使用 项目

版权声明：本文标题：Vue.js基础与应用开发实战(微课版)-教学大纲 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1713115327a620606.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。