Vue基础自学系列 | Vue基础 - 课程介绍

Posted 2022-08-29 COCOgsta

视频来源：B站《黑马程序员Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端必会的框架教程》

一边学习一边整理老师的课程内容及试验笔记，并与大家分享，侵权即删，谢谢支持！

附上汇总贴：Vue基础自学系列 | 汇总_COCOgsta的博客-CSDN博客

---

前置储备

必备前提：

• html + CSS + javascript

• WebAPI (DOM + BOM)

• Ajax

可选前提：

• Node.js

第一天：前端工程化与Webpack

• 前端工程化的相关概念

• Webpack的常见用法

• 打包发布

• Source Map

目标：

1. 了解工程化的前端开发方式

1. 能够知道Webpack在实际开发中所起到的作用

第二天：vue基础入门 - part1

• Vue的基本使用步骤

• Vue中常用的指令

• vue-devtools调试工具

目标：

1. 能够使用Vue的指令完成页面结构的渲染

1. 能够使用Vue的调试工具辅助Vue的开发

第三天：vue基础入门 - part2

• 过滤器和侦听器

• 计算属性的用法

• axios的基本用法

• vue-cli的安装和使用

目标：

1. 能够在实际开发中合理运用过滤器、侦听器、计算属性解决自己遇到的问题

1. 能够使用axios发起Ajax请求

1. 能够使用vue-cli工具生成工程化的Vue项目

第四天：组件与生命周期

• 组件的注册与使用

• 组件的props自定义属性

• 解决组件样式冲突

• 组件的生命周期

• 组件之间的通讯（数据共享）

目标：

1. 能够掌握.vue单文件组件的基本用法

1. 能够掌握组件通讯的三种方式

1. 掌握组件生命周期的的执行顺序和应用场景

第五天：ref&购物车案例

• 使用ref引用DOM元素和组件实例

• $nextTick的基本使用

• 购物车案例

目标：

1. 能够使用ref获取页面上DOM或组件的引用

1. 能够知道$nextTick的的应用场景并合理地使用

1. 通过“购物车案例”巩固前4天所有学知识

第六天：Vue组件的高级用法

• 动态组件的使用

• 插槽的使用（默认插槽、具名插槽、作用域插槽）

• 自定义指令

• ESLint的使用

目标：

1. 能够使用keep-alive实现组件的缓存

1. 能够使用插槽提高组件的复用性

1. 能够了解常用的ESLint语法规则

第七天：路由（vue-router）

• 路由的基本配置与使用

• 路由重定向

• 嵌套路由、动态路由

• 编程式导航、路由导航守卫

目标：

1. 能够在项目中安装和配置路由

1. 能够使用路由实现单页面应用程序的开发

1. 能够使用导航守卫控制路由的访问权限

第八天：黑马头条（收尾案例）

• Vant组件库

• 封装axios

• 上拉加载 & 下拉刷新

• Vant主题定制

目标：

1. 掌握Vant组件库的基本使用

1. 能够知道如何封装axios请求模块

1. 能够知道如何实现上拉加载和下拉刷新功能