阶段08 · Vue2 与 Vue3 基础 + 阶段项目

Vue2 模板与指令、组件化与通信、Vue Router 与 Vuex、电商后台项目实战，以及 Vue3 的响应式原理（Proxy）、组合式 API 与生态。

本模块共 73 个教学单元、424 段视频、约 104 小时 19 分。

学习顺序

#	单元	视频数	时长
01	vue介绍与官网（Lesson1 1/4）	6	1 小时 2 分
02	Vue 环境的配置与JS-Vue-React操作DOM（Lesson1 2/4）	6	1 小时 14 分
03	不同Vue实例挂载到不同元素与模板中的插值表达式（Lesson1 3/4）	6	1 小时 20 分
04	v-bind(属性渲染)-重点中的重点与v-on 事件（Lesson1 4/4）	5	44 分钟
05	vue介绍与官网（Lesson2 1/3）	5	1 小时 11 分
06	Vue 的基本用法及模板语法与Vue实例（Lesson2 2/3）	5	1 小时 17 分
07	v-html与v-text与v-if v-else-if v（Lesson2 3/3）	5	1 小时 35 分
08	v-cloak与v-pre 与 v-once（Lesson3 1/3）	5	1 小时 29 分
09	过滤器的串联与过滤器的属性渲染（Lesson3 2/3）	5	1 小时 29 分
10	计算属性(重点)与基本使用（Lesson3 3/3）	5	56 分钟
11	购物车（略）与组件（重点中的重点）（Lesson4 1/3）	6	1 小时 20 分
12	组件嵌套与组件示例（Lesson4 2/3）	6	1 小时 24 分
13	为什么要将data设置为函数与父向子传递参数-属性（Lesson4 3/3）	5	1 小时 34 分
14	为组件增加事件与全局组件（Lesson5 1/3）	7	1 小时 58 分
15	动态组件与ref（Lesson5 2/3）	7	59 分钟
16	ref与v-for结合使用与ref与组件结合使用（Lesson5 3/3）	6	59 分钟
17	自定义指令与基本使用（Lesson6 1/3）	6	2 小时 35 分
18	切换-侦听与切换-计算属性（Lesson6 2/3）	5	58 分钟
19	$watch与$el（Lesson6 3/3）	5	31 分钟
20	$nextTick与Vue响应式的原理（Lesson7 1/3）	6	1 小时 48 分
21	实现响应式与生命周期（Lesson7 2/3）	6	1 小时 30 分
22	渲染函数render与脚手架说明（Lesson7 3/3）	5	52 分钟
23	组件的使用与使用过滤器（Lesson8 1/3）	6	1 小时 36 分
24	todoList与在脚手架中使用axios（Lesson8 2/3）	6	1 小时 15 分
25	渲染数据与加载中（Lesson8 3/3）	5	56 分钟
26	卖座网数据调用与猫眼网数据调用（跨域）（Lesson9 1/2）	6	1 小时 39 分
27	创建路由对应的组件与实现路由一（Lesson9 2/2）	5	2 小时 21 分
28	路由导航切换与路由切换时的钩子函数（Lesson10 1/3）	6	1 小时 0 分
29	路由切换时的钩子函数与路由导航亮度显示（Lesson10 2/3）	5	1 小时 10 分
30	路由传递参数（重点）与二级路由（Lesson10 3/3）	5	1 小时 37 分
31	需求与路由守卫（Lesson11 1/3）	6	1 小时 56 分
32	Vuex与理解Vuex（Lesson11 2/3）	6	1 小时 28 分
33	抽离一与抽离二（外部）（Lesson11 3/3）	6	1 小时 26 分
34	异步获取数据列表并完成渲染-未使用actions与异步获取数（Lesson12 1/3）	7	1 小时 26 分
35	异步获取数据列表并完成渲染-使用actions与module（Lesson12 2/3）	6	1 小时 33 分
36	modules与插槽（Lesson12 3/3）	6	1 小时 4 分
37	匿名插槽与具名插槽（Lesson13 1/3）	7	2 小时 25 分
38	具名插槽与作用域插槽（Lesson13 2/3）	7	1 小时 2 分
39	作用域插槽（Lesson13 3/3）	6	1 小时 23 分
40	启动项目DEMO与通过脚手架搭建项目（Lesson14 1/3）	6	1 小时 32 分
41	创建基本的路由与实现导航切换（Lesson14 2/3）	6	1 小时 0 分
42	axios二次封装与api封装（Lesson14 3/3）	6	1 小时 2 分
43	完成底部渲染与首页轮播图功能实现（Lesson15 1/2）	6	1 小时 39 分
44	底部品牌广告与楼层（Lesson15 2/2）	5	1 小时 57 分
45	创建全局过滤器与猜你喜欢（可以不练，但必须掌握）（Lesson16 1/3）	5	1 小时 23 分
46	收集搜索关键词与合并类别及关键字搜索（Lesson16 2/3）	5	35 分钟
47	调用接口获取数据与渲染数据-商品列表（Lesson16 3/3）	5	1 小时 19 分
48	按品牌进行搜索与如果没有搜索条件隐藏面包屑导航（Lesson17 1/3）	6	1 小时 31 分
49	实现排序与搜索框优化（Lesson17 2/3）	5	1 小时 8 分
50	渲染连续页码与优化连续页码（Lesson17 3/3）	5	1 小时 19 分
51	优化搜索与创建产品详情路由（Lesson18 1/2）	7	2 小时 30 分
52	抽离为组件与使用第三方模块--vue-photo-zoom-（Lesson18 2/2）	6	1 小时 11 分
53	购买数量加减与加入购物车成功界面（Lesson19 1/3）	6	1 小时 28 分
54	搭建购物车路由与获取购物车数据（Lesson19 2/3）	5	1 小时 32 分
55	删除购物车商品与删除选中购物车商品（Lesson19 3/3）	5	50 分钟
56	完成全选功能与操作购物车数量（Lesson20 1/2）	7	2 小时 47 分
57	element-ui的基本使用与element-ui按需引入（Lesson20 2/2）	6	1 小时 7 分
58	完成登陆与根据TOKEN获取个人信息（Lesson21 1/2）	7	1 小时 28 分
59	解决刷新个人信息丢失与退出登陆（Lesson21 2/2）	6	1 小时 30 分
60	完成提交订单-使用store与将两个参数合并为一个（Lesson22 1/3）	5	1 小时 34 分
61	弹出支付窗口与生成二维码（Lesson22 2/3）	5	1 小时 13 分
62	路由懒加载与图片懒加载（Lesson22 3/3）	5	1 小时 41 分
63	了解 Vue3与了解相关信息（Lesson23 1/2）	7	2 小时 8 分
64	分析脚手架文件与差异（Lesson23 2/2）	7	1 小时 31 分
65	生命周期组合式API与计算属性-computed（Lesson24 1/3）	6	1 小时 54 分
66	计算属性-computed与侦听-watch（Lesson24 2/3）	6	2 小时 12 分
67	watchEffect与nextTick（Lesson24 3/3）	6	49 分钟
68	路由与搭建一个基本路由（Lesson25 1/3）	7	1 小时 9 分
69	三级路由与优化路由（Lesson25 2/3）	6	1 小时 18 分
70	pinia与安装（Lesson25 3/3）	6	1 小时 3 分
71	vue2父向子通过属性传递参数与Vue3父向子通过属性进行参（Lesson26 1/3）	7	1 小时 49 分
72	vue3通过mitt完成事件总线与v-model实现父子数据（Lesson26 2/3）	6	1 小时 24 分
73	vue3之useAttrs与vue2之$refs-$chil（Lesson26 3/3）	6	1 小时 10 分

前置知识

需要先掌握 JavaScript 基础（ES6 语法、DOM、事件）与模块化、npm 的使用。