0 G( a$ D4 O1 c# O6 E# g
5 ]& I7 N! Z/ V" @6 m5 g* h% x
〖课程介绍〗( W# S/ [; F* p8 w
课程从 Vue3 基础语法，到组件原理、动画、代码设计，再到新语法扩展，全面系统地梳理 Vue 知识点。学习过程中，老师将倾囊相授多年的“避坑经验” ，带你以企业级代码质量和工程开发流程完成“京东到家”应用，实现对框架的彻底掌握。8 A- G5 o/ _" p$ [ S3 [
〖课程目录〗
; [* P1 j) o' m7 ?第1章 Vue 语法初探 试看6 节 | 57分钟
" s) ]8 D3 x8 m) ^# G1 ^1-1 课前须知，这里有你需要了解的一切 (04:34)
3 l, H" K7 b2 J) a" \: p9 A1-2 【讨论题】对于不断推出的前端新框架，我们应该如何学习？
) h% z7 `& H5 R; Q5 D' L1-3 初学编写 HelloWorld 和 Counter (14:41)
& d' c2 _. m) ]8 _5 o2 w1-4 编写字符串反转和内容隐藏小功能 (09:32)
; m% t" p% K9 l C3 x% J5 u: i1-5 编写TodoList 小功能，了解循环和双向绑定 (11:18)
. S$ `+ u$ B' B; O$ [6 s1-6 组件概念初探，对 TodoList 进行组件代码拆分 (16:47)+ ]$ [7 x% D3 c* M3 I' {
, z5 Q3 q) P0 t" t/ V6 D! {
第2章 Vue 基础语法18 节 | 161分钟" S7 R6 R: X* C1 O) j
2-1 Vue 中应用和组件的基础概念 (09:32)
1 u* G0 U: S+ P" Y1 U6 A7 U; ?9 [2-2 理解 Vue 中的生命周期函数（1） (10:49) ' K* N( V1 o; j* @
2-3 理解 Vue 中的生命周期函数（2） (12:56) ) G( }* K% \ p* r3 z2 _; b9 M
2-4 【讨论题】生命周期函数的深度分析
3 J7 |; F. S6 i4 u# F, H2-5 常用模版语法讲解（1） (09:55) 3 ~1 c* j7 M7 f4 `. \' f: {
2-6 常用模版语法讲解（2） (08:46)
# t% Z0 A0 m" R* ?. p4 U; B: W& B2-7 【讨论题】模版语法的发展历程是怎样的？ ( x8 a; m5 z. k, a
2-8 数据，方法，计算属性和侦听器（1） (15:47)
" w Z$ ?4 t/ Q7 Z2 d4 h2-9 数据，方法，计算属性和侦听器（2） (06:10) 2 @9 U3 J6 y8 G# `; F
2-10 样式绑定语法 (12:48) : G, {9 s r6 T9 M H' l" |( x
2-11 条件渲染 (06:41) % L& I) T3 T) Q' g$ J" k5 u+ P- X
2-12 列表循环渲染（1） (11:38) : k8 `2 |0 B l4 S2 ]
2-13 列表循环渲染（2） (10:45) . B. M. r r' g" _# N: C2 P& j1 Q! A
2-14 事件绑定（1） (13:28)
9 f# V; u0 ~6 l' M& f2-15 事件绑定（2） (07:15) 9 Z& N# B1 P9 Y7 s
2-16 表单中双向绑定指令的使用（1） (07:54)
8 U: }# q6 m* T/ i2-17 表单中双向绑定指令的使用（2） (07:22)
- E; x* U6 F: o& w( c! H) b, h2-18 表单中双向绑定指令的使用（3） (08:51) o) o1 M' N! m
; ^2 H4 f7 c# e第3章 探索组件的理念14 节 | 141分钟6 O! {- f2 e* a
3-1 组件的定义及复用性，局部组件和全局组件（1） (10:19) , T" x& a5 i% A9 |) {; M6 S1 W
3-2 组件的定义及复用性，局部组件和全局组件（2） (10:28) 6 p. e7 J" ], P* Z/ z8 u2 Z4 Y
3-3 【讨论题】组件究竟是什么？
4 ^$ V) M" C7 p9 N$ S. B3-4 组件间传值及传值校验 (15:41) ' C8 h# l# n. `# K
3-5 单向数据流的理解 (12:37) 1 N" ^$ }6 Z j. @! c, [
3-6 Non-Props 属性是什么 (09:34) 6 q4 a# y) a3 A a) ?
3-7 父子组件间如何通过事件进行通信（1） (12:32) ' ^# F& o% i0 C
3-8 父子组件间如何通过事件进行通信（2） (05:26)
6 y" X* ^+ W/ d$ o3-9 组件间双向绑定高级内容（选学） (12:09) 4 N X& T4 ]- S- Q, r' c0 D
3-10 使用插槽和具名插槽解决组件内容传递问题（1） (10:20)
+ l" i# K5 x P3-11 使用插槽和具名插槽解决组件内容传递问题（2） (07:45) 5 D$ c8 `2 ^! r1 K* Z
3-12 作用域插槽 (08:17) 4 h a6 [% D" T; `! |7 T1 p( Y3 T
3-13 动态组件和异步组件 (12:20)
5 T0 N. e: H& ~6 y7 _. P3-14 基础语法知识点查缺补漏 (12:59)
# [3 `0 o% ?6 \5 t$ Z! w; T9 {9 y+ O% M- @2 p4 Z8 h1 o
第4章 Vue 中的动画8 节 | 80分钟
- C5 I8 f2 E0 c& b/ [( l4-1 使用 Vue 实现基础的 CSS 过渡与动画效果 (14:22)
! R! L0 l% U" i/ b, G& X+ |4-2 使用 transition 标签实现单元素组件的过渡和动画效果（1） (13:39)
w s0 O0 M _+ M4-3 使用 transition 标签实现单元素组件的过渡和动画效果（2） (12:36)
1 e& D/ _/ n$ ^& z4-4 使用 transition 标签实现单元素组件的过渡和动画效果（3） (13:09)
# Z) O& U- {; d' ?4-5 组件和元素切换动画的实现 (12:12) 6 T7 s% L# U+ V0 W2 r
4-6 列表动画 (07:07)
, _1 K% D% e+ X1 ?4-7 状态动画 (06:50)
5 k8 P8 m- y3 Y6 d0 h l' q2 H4-8 【讨论题】前端动画是如何实现的？6 G9 @% h+ y* I) t/ {/ @, o; z
( K+ l9 F) L" L" e& G# k0 v第5章 Vue 中的高级语法 试看9 节 | 93分钟
9 e- G& S7 S/ V$ E% X1 _5-1 Mixin 混入的基础语法（1） (07:20)
; o( D, }% B- H2 ]: u5-2 Mixin 混入的基础语法（2） (15:13)
* J5 [3 ?4 ]2 q0 Z5-3 开发实现 Vue 中的自定义指令（1） (09:47) 1 M' h% } b7 }& H6 g w- @
5-4 开发实现 Vue 中的自定义指令（2） (10:17) 1 ^, F+ t, y( ?# x# j5 @
5-5 Teleport 传送门功能 (10:11) 5 }/ S/ L- s' w
5-6 更加底层的 render 函数（选学） (15:57)
& l6 s1 r0 m+ f9 Y8 m5-7 插件的定义和使用 (10:28) 6 q4 ?* D5 k7 k2 G+ F
5-8 数据校验插件开发实例 (12:54)
: V2 ^3 A- `7 b% ^3 v1 b5-9 【讨论题】为什么插件机制相对于Mixin是更优雅的代码扩展
# J# ?, c' A" G( [0 }- @
3 S4 @) r# H$ F7 [ `* [! ~, O% }第6章 Composition API13 节 | 119分钟
6 R; Z0 {: H. ~- z/ m6-1 Setup 函数的使用 (10:13)
9 R7 _& a! C0 b- t; _6-2 ref，reactive 响应式引用的用法和原理（1） (10:49) 4 Y4 g# Q& w6 S0 k
6-3 ref，reactive 响应式引用的用法和原理 （2） (07:17)
1 x. O3 F( c5 v6-4 toRef 以及 context 参数（1） (04:11)
; ]' n+ L2 u, Q6-5 toRef 以及 context 参数（2） (10:22)
' i& S( F, |6 i, |/ j7 P6-6 使用 Composition API 开发TodoList（1） (09:57)
6 i6 R6 }5 }. l) V4 A0 {6-7 使用 Composition API 开发TodoList（2） (06:45)
# k3 R9 _/ p/ t3 d3 s6-8 computed方法生成计算属性 (10:59) 2 Y. h" n8 W' M$ D) S- j- l3 A
6-9 watch 和 watchEffect 的使用和差异性（1） (11:30)
9 Y: W U+ v) ~5 `6-10 watch 和 watchEffect 的使用和差异性（2） (10:48) - W$ w1 }$ M% w* u! Z
6-11 生命周期函数的新写法 (10:54)
5 {7 p* S, `! y6-12 Provide,Inject,模版 Ref 的用法 (14:53) 2 {: [5 ^3 z7 Q" w; t' F% p- _
6-13 【讨论题】Composition API 的产生背景是什么
) \- V4 \% l2 ?. a% ^+ ], ?) O; S$ ~# ~
第7章 Vue 项目开发配套工具讲解13 节 | 93分钟 ) I9 h( j9 F& n8 a
7-1 VueCLI 的使用和单文件组件（1） (09:37)
) v! X2 q7 Z2 h) V7-2 VueCLI 的使用和单文件组件（2） (08:34)
7 n$ V3 F' C' h. V' v+ p7-3 使用单文件组件编写 TodoList (11:46) 1 R0 f/ |2 z# S7 {# M
7-4 【讨论题】单文件组件这种语法设计，背后实现的原理是什么 ; ^# m4 w0 F2 T" }
7-5 Vue-Router 路由的理解和使用（1） (12:28)
- n; Z+ D' G( e6 T8 s5 R7-6 Vue-Router 路由的理解和使用（2） (04:50)
2 X, K" v: L7 k' G0 M3 y( \7-7 【讨论题】对前端路由，你有怎样的理解？ * @2 M* ?2 J* e3 h$ m" G( B: q- t# `* n8 P
7-8 VueX 的语法详解（1） (09:42)
3 G$ M- R% ^. u6 O$ `2 _7-9 VueX 的语法详解（2） (13:12) " V; i# F3 z1 O" S h5 N
7-10 VueX 的语法详解（3） (09:12)
4 h" m0 ~2 w% A/ b/ e; S7-11 CompositionAPI 中如何使用 VueX (07:06) " G% F+ f: E2 v! U3 B3 [
7-12 【讨论题】对前端数据管理框架，你有怎样的理解？ . H& U$ D e8 F% `% G* c& o
7-13 使用 axios 发送ajax 请求 (05:34)
/ ~$ n! J+ R! {" N5 M5 G
, |7 o! X4 O9 k q' w8 u第8章 “京东到家”项目首页开发12 节 | 155分钟
" ?% T, i. Z9 z' { S8-1 工程初始化 (04:09) , R F/ i0 \, z
8-2 工程目录代码简介及整理 (10:50)
: }% t- r8 f: J- z8-3 基础样式集成及开发模拟器的使用 (06:33) z, o- y# k, E4 p; H0 z$ w
8-4 flex + iconfont 完成首页 docker 样式编写 (22:21)
" |7 O: ?% w0 c5 h0 v8-5 使用Scss 组织地址区域布局 (21:18) 3 S2 X5 v" j$ c" ]* n
8-6 利用CSS技巧实现搜索及 banner 区域布局 (15:54) 7 C9 f! o( m3 r; o/ U. }
8-7 使用 flex布局实现图标列表布局 (11:48) $ [4 i6 f. v. D2 n; M6 j
8-8 首页布局收尾 (18:50) 4 l, \ F" v" Z0 r
8-9 首页组件的合理拆分 (16:28) 2 P: N4 O! J" U9 J9 \+ [4 b
8-10 使用v-for, v-html 指令精简页面代码 (17:52)
( u- d) E! o* h- H8-11 CSS 作用域约束以及 Vue 开发者工具的安装使用 (08:39) ; L; A s+ q: v% @7 i$ c
8-12 【讨论题】说说你在开发项目时，用到过的比较好的工具吧( u/ ?$ h. p/ `/ ^) p2 L
. ]5 h5 q, y! E" E( U! ?& h" p$ @
第9章 登陆功能开发10 节 | 116分钟
D: h) r9 V5 E6 i1 e4 Q; K9-1 登陆页面布局开发 (21:15)
3 B2 V. z0 {, x! ~2 T1 A9-2 路由守卫实现基础登陆校验功能 (12:28)
& Y' ]! E d' c9-3 注册页面开发及路由串联复习 (09:59) 3 n# |. m6 g% E# q( e3 k
9-4 使用axios 发送登陆 Mock 请求 (16:38) * d7 M( Q9 S* U1 N! ?/ V
9-5 请求函数的封装 (12:15) e3 R# V+ m# e. a$ P4 V
9-6 【讨论题】请求逻辑可以封装哪些内容？ + W% z! E) y( S9 b( d
9-7 Toast 弹窗组件的开发 (10:13) 3 W$ R! p/ B+ ^) b- ~% T" a
9-8 通过代码拆分增加逻辑可维护性 (09:03) " X2 s: C9 N9 ^, y; Q7 [& G
9-9 Setup函数的职责以及注册功能的实现（1） (11:12)
1 t8 a5 H% {- U; s* U1 _( r1 @9 g9-10 Setup函数的职责以及注册功能的实现（2） (12:34)9 M; U" t# l7 K
' v. D8 i9 G2 o& {第10章 商家展示功能开发（上）14 节 | 157分钟6 C1 z4 U9 ~6 H" X6 K, o# e
10-1 首页附近店铺数据动态化-详情页准备 (11:41) 7 C, Z! N8 Z2 x5 C% Z( J
10-2 动态路由，异步路由与组件拆分复用（1） (14:02) e1 T, a2 P$ Y5 U4 H, X- W
10-3 动态路由，异步路由与组件拆分复用（2） (07:49) " E& V# t9 d7 i# Z# F; X) ~
10-4 搜索布局及路由跳转（1） (11:40) 5 k8 W6 t. E: M* n" S; u
10-5 搜索布局及路由跳转（2） (06:36)
$ _; R+ i8 s/ D$ Y/ g8 |/ ^7 q10-6 路由参数的传递以及商家详情的获取（1） (12:28)
+ O: e9 M; h( n3 F) c* |10-7 路由参数的传递以及商家详情的获取（2） (10:42)
" f1 C1 q7 K* V1 P, W. e. O10-8 商家页面核心样式开发（1） (12:30) ( E1 J+ v2 J2 y# g |! C
10-9 商家页面核心样式开发（2） (11:22) 5 W" \" q8 v" N4 j$ Q) U
10-10 样式的优化与代码复用（1） (09:10) ' `* K( _9 S! n6 G; p7 Y" ^- A8 k
10-11 样式的优化与代码复用（2） (10:33)
`/ a u" n! K+ ~10-12 【讨论题】说说 CSS 中的设计模式 7 d; s0 K3 J5 S9 ~/ b
10-13 商家详情页分类及内容联动的实现 (21:27)
6 `! g$ Y- y& O' F0 g1 l0 f( u. \. I10-14 使用 watchEffect 巧妙的进行代码拆分 (16:07)2 R, E8 h, q( H4 q* a# Y5 l
) n& `7 h' h# j+ i3 z$ B2 w! n8 Q
第11章 商家展示功能开发（下）17 节 | 203分钟) z# L6 s# u" ^ A: G% H
11-1 购物车的样式开发 (19:21)
2 V; Q, w0 e, g# a11-2 Vuex中购物车数据结构的设计（1） (16:26)
4 t6 N: {& a: x2 E# m' ]. Z11-3 Vuex中购物车数据结构的设计（2） (08:40) 5 h$ E. u) a& \2 u! p( x: ]; s
11-4 使用 computed 完成订单价格计算 (18:14) + \) u3 A% G/ Z* i1 d
11-5 购物车及列表双向数据同步功能开发（1） (14:31)
4 R6 `3 l$ S5 e6 Q- s" G11-6 购物车及列表双向数据同步功能开发（2） (08:50)
2 Y4 N1 b5 M% q( f" \: ~11-7 根据购物车选中状态计算订单金额（1） (12:51) # M, H# L; ~. I) G
11-8 根据购物车选中状态计算订单金额（2） (11:37) ' k; f7 i& ]5 @
11-9 全选及清空购物车的功能实现（1） (15:14) 8 Y% l6 i9 C5 B z7 x# F! N" B
11-10 全选及清空购物车的功能实现（2） (14:24)
8 I7 o0 u! |% u0 ~11-11 商家详情页面代码优化（1） (11:25) 7 Y$ q. q. c8 m+ k, q: Z. D3 G
11-12 商家详情页面代码优化（2） (06:27)
/ V& K& ?) K2 w+ Z11-13 购物车数据结构的变更（1） (09:12)
3 I5 o+ R9 a# }; a11-14 购物车数据结构的变更（2） (11:05)
7 L) \% O7 q5 D11-15 【讨论题】作为前端，你在开发中是如何进行代码调试 Debug ; c4 [, _3 i& g# i* z; m6 r
11-16 通过 LocalStorage 实现购物车信息持久存储（1） (13:46) ( c2 M6 A R- E# u3 Z( I
11-17 通过 LocalStorage 实现购物车信息持久存储（2） (10:02)1 W/ h, Z! ]$ e( m9 f. J* Y) N
( _$ J9 K4 ]( b
第12章 核心购物链路开发19 节 | 192分钟
! N3 A4 x+ e, q- Z6 l0 G# _1 s12-1 确认订单页面创建及顶部布局（1） (16:51)
6 C7 p' \8 U8 G8 ~4 V12-2 确认订单页面创建及顶部布局（2） (11:39)
. ?: R: n% s q7 ]12-3 订单商品列表数据获取与布局（1） (17:39)
9 ^6 Q8 w+ Q1 ?12-4 订单商品列表数据获取与布局（2） (11:46) - Y3 z" o) l2 b( S. \
12-5 页面布局及展示逻辑开发（1） (09:20) 4 o0 W; P+ y( E; H) ~6 B" D
12-6 页面布局及展示逻辑开发（2） (14:46) 7 {7 X, e1 b0 T5 l. @6 f/ U
12-7 确认订单页面组件拆分及弹框布局制作（1） (12:02)
6 j }- v0 [8 t- `5 b, k H, _12-8 确认订单页面组件拆分及弹框布局制作（2） (14:03)
3 v' N6 v, M4 k; Y5 m m$ Q* ^12-9 购物流程开发完成（1） (11:04)
5 } C! b# Z; U h8 r+ s! z1 a& ^12-10 购物流程开发完成（2） (15:44)
, M- B* g: x3 p12-11 下单流程开发优化 (05:03) , u1 k8 u9 Q; A0 {$ w0 P$ m6 I
12-12 订单列表页布局开发（1） (07:34) 7 v: J. o3 X/ Q6 _0 z' q. `
12-13 订单列表页布局开发（2） (12:40)
) X1 x0 D$ ]' p1 Z4 ~- v12-14 订单列表逻辑开发（1） (16:25) 4 j# }! C# z0 h* N
12-15 订单列表逻辑开发（2） (14:25) 4 D+ t- S" D' }1 u& C2 E# [
12-16 【讨论题】Composition API使用时会注意哪些方面
, b1 ~1 X Q; ~. @/ P- Y" w1 `6 C12-17 【学习任务】结合本地购物车数据，完成多店铺购物车页面开发 1 o0 ]0 i( x. G( e' Q( c" r6 O/ ]
12-18 【学习任务】结合增删改查逻辑，实现地址功能编辑页面
, K+ i8 i# J, J& U6 s% J- H+ [% F12-19 【学习任务】还原设计稿个人信息页面，并实现登出功能# k! ~" G# Q5 H) Y
$ [& y- p; Y: Z x- M1 L2 S) Y第13章 真机调试及工程发布流程5 节 | 41分钟2 U6 n+ C# t- s
13-1 如何进行真机调试 (06:18)
) n2 i" Q h! `) a13-2 解决真机调试过程中的展示问题 (12:59)
; W9 H, r5 E3 b7 d2 I13-3 实现项目对不同设备的展示适配 (07:18)
0 a! e1 d9 ]5 s4 p13-4 【讨论题】说说你在进行移动端开发时，遇到问题及解决方案
1 g0 r2 |$ j' j13-5 项目上线和课程总结 (14:09)1 L* R/ f! j8 x$ z- _7 c+ u" E
: o' u' W! y9 o4 \6 a' Y〖下载地址〗* S1 L4 u9 C8 ?% j
c2 S+ ^: z) d( A9 }1 |- Q; l〖升级为永久会员免金币下载全站资源〗5 Z9 R( z8 f& y+ o, ]' N
全站资源高清无密，每天更新，一次充值，永久可查看网站全部资源：http://www.mano100.cn/rjyfk_url-url.html% B; |9 l% w" \
|
|
[复制链接]
