# n% Z: i! P; Q" I1 }
0 `" t* |. n/ H$ M6 e〖课程介绍〗
' f* q1 d* S; Q课程从 Vue3 基础语法，到组件原理、动画、代码设计，再到新语法扩展，全面系统地梳理 Vue 知识点。学习过程中，老师将倾囊相授多年的“避坑经验” ，带你以企业级代码质量和工程开发流程完成“京东到家”应用，实现对框架的彻底掌握。$ u( w" i6 J, X4 V/ q5 t- J
〖课程目录〗 f6 G8 c3 {7 z, W! c1 v& q
第1章 Vue 语法初探 试看6 节 | 57分钟
* d) \8 N/ X# H1 j+ }! @7 j1-1 课前须知，这里有你需要了解的一切 (04:34)
" j' Y `9 K' B- X0 L! w1-2 【讨论题】对于不断推出的前端新框架，我们应该如何学习？ . n1 K1 C h( t# G) w
1-3 初学编写 HelloWorld 和 Counter (14:41) 3 a5 f; n: ~, K
1-4 编写字符串反转和内容隐藏小功能 (09:32)
+ T- O4 V) S; r% E1-5 编写TodoList 小功能，了解循环和双向绑定 (11:18)
" [, _1 x& b: u& O1-6 组件概念初探，对 TodoList 进行组件代码拆分 (16:47)8 R6 _" w" i2 X1 J) o
2 h; e( z$ q' z
第2章 Vue 基础语法18 节 | 161分钟
; Q9 d* w5 s3 n, E3 c7 N2-1 Vue 中应用和组件的基础概念 (09:32)
3 H/ A) s% L" z8 _2 a% I, s& h2 n2-2 理解 Vue 中的生命周期函数（1） (10:49)
2 o+ o2 l1 n; y0 @2-3 理解 Vue 中的生命周期函数（2） (12:56) ; {8 r9 ~; U* R, {' ~, O# i: _) p: j
2-4 【讨论题】生命周期函数的深度分析 , O: i9 O2 g7 @, }0 R3 @/ x
2-5 常用模版语法讲解（1） (09:55) $ `1 T0 }: r5 G% S( Z
2-6 常用模版语法讲解（2） (08:46)
& P! h! d3 i" G' Q4 a2 u2-7 【讨论题】模版语法的发展历程是怎样的？ 5 K3 t3 k5 T; E8 M8 ]3 e& h
2-8 数据，方法，计算属性和侦听器（1） (15:47) 7 G* W0 E2 `/ B4 H ~) W
2-9 数据，方法，计算属性和侦听器（2） (06:10)
# q+ n) V0 ~8 |: D! k! p2-10 样式绑定语法 (12:48)
* M1 Z, g: v- ?+ t) \* h/ t2-11 条件渲染 (06:41)
* L: ^( U% Z# X' p* G9 c! q2-12 列表循环渲染（1） (11:38)
6 F" U# R, \) M" t) A2-13 列表循环渲染（2） (10:45) 9 b- W7 Q5 R$ {* f1 t
2-14 事件绑定（1） (13:28) 4 I6 `5 V, O3 m3 t2 L$ ~
2-15 事件绑定（2） (07:15) 0 w: j2 f9 x- q; s' G
2-16 表单中双向绑定指令的使用（1） (07:54)
7 d2 u3 F) S* w2-17 表单中双向绑定指令的使用（2） (07:22) & w# j. s8 ?; v! o0 [ I
2-18 表单中双向绑定指令的使用（3） (08:51) x7 u4 N" j- S* V) D0 I& {/ n
* @: [. F6 Q- `, e8 d; W
第3章 探索组件的理念14 节 | 141分钟7 l' E' u; i/ T9 o4 l' {- ?9 p
3-1 组件的定义及复用性，局部组件和全局组件（1） (10:19) ( f* v: l8 v9 Y: }
3-2 组件的定义及复用性，局部组件和全局组件（2） (10:28)
5 }, H, U1 o$ M. o3-3 【讨论题】组件究竟是什么？ & s1 f8 X: j. l2 Z
3-4 组件间传值及传值校验 (15:41)
, f7 k4 t! e, g, o1 {! s3-5 单向数据流的理解 (12:37) , Y5 @/ |- l& L: D j. H5 K u9 r2 j
3-6 Non-Props 属性是什么 (09:34)
! x9 S0 u! A6 t5 e; g3-7 父子组件间如何通过事件进行通信（1） (12:32) + |+ ?/ v/ r, d
3-8 父子组件间如何通过事件进行通信（2） (05:26) ! \; t3 p- M r P( E
3-9 组件间双向绑定高级内容（选学） (12:09) 5 @2 ~* u f, d5 U
3-10 使用插槽和具名插槽解决组件内容传递问题（1） (10:20) ( n" |+ Z7 p, O) |* b$ x% X! B
3-11 使用插槽和具名插槽解决组件内容传递问题（2） (07:45) 5 J3 ^+ k2 D* e! B" f/ t
3-12 作用域插槽 (08:17)
% O0 u# O4 W3 [4 y3-13 动态组件和异步组件 (12:20)
^8 \- H. ^8 U9 F. q& _3-14 基础语法知识点查缺补漏 (12:59)
+ u- Y7 |6 f+ o# ~
* r7 U3 U+ ?% `% k2 V: d: n第4章 Vue 中的动画8 节 | 80分钟
+ Q6 z. X0 C3 C2 ~4-1 使用 Vue 实现基础的 CSS 过渡与动画效果 (14:22)
% w; s8 i5 {6 f4-2 使用 transition 标签实现单元素组件的过渡和动画效果（1） (13:39) & h- F# q3 F& x3 H0 ^
4-3 使用 transition 标签实现单元素组件的过渡和动画效果（2） (12:36)
$ j+ y: V1 }4 ^$ g5 [" S/ Y' _4-4 使用 transition 标签实现单元素组件的过渡和动画效果（3） (13:09) $ e2 {+ E& o. m# P) Y) S% Q( o4 F
4-5 组件和元素切换动画的实现 (12:12) $ t' Q/ h/ s" z
4-6 列表动画 (07:07) 1 t/ {$ Z2 D. B4 y6 G; x
4-7 状态动画 (06:50)
( l/ T0 b0 X% F2 L3 Y, p" p! j4-8 【讨论题】前端动画是如何实现的？& F& t+ {/ F% Y' z! O2 R
( s7 n9 N C- C! T& l$ x; n! G
第5章 Vue 中的高级语法 试看9 节 | 93分钟
3 o8 ~6 Q! L% B5 _- B5-1 Mixin 混入的基础语法（1） (07:20)
6 P Y" \- m( G2 L( j! X5 V! D h5-2 Mixin 混入的基础语法（2） (15:13)
: r! p4 C, O( u$ o! m5-3 开发实现 Vue 中的自定义指令（1） (09:47)
" E8 U0 Y% \1 }3 f, M/ y! f' Z: L5-4 开发实现 Vue 中的自定义指令（2） (10:17)
) O% q5 W6 ^! p% v% u( n5-5 Teleport 传送门功能 (10:11) " p; y, Y! b7 z. ]; l
5-6 更加底层的 render 函数（选学） (15:57)
6 K+ d9 v' `% G6 [2 K5-7 插件的定义和使用 (10:28)
. F: L9 V3 Z( x; F& F! M* c( I5-8 数据校验插件开发实例 (12:54)
7 f( s+ V; o7 K5-9 【讨论题】为什么插件机制相对于Mixin是更优雅的代码扩展; D, x3 r6 R3 M t/ N7 y# D( o
1 [& i7 R- h& ~( Y/ g+ {! [* p3 c4 W第6章 Composition API13 节 | 119分钟
; s, O4 M; Z( v; _- u: f8 F# P2 f8 H& a6-1 Setup 函数的使用 (10:13) M1 T' l/ h9 o5 d
6-2 ref，reactive 响应式引用的用法和原理（1） (10:49) 6 v3 ]% ]" i( K. k V# j
6-3 ref，reactive 响应式引用的用法和原理 （2） (07:17) 5 g- ^! D! z4 h: k. W7 o+ M
6-4 toRef 以及 context 参数（1） (04:11) : I" y" R( I. B: O1 s
6-5 toRef 以及 context 参数（2） (10:22)
' `% R" p* f# A5 K! I# }6-6 使用 Composition API 开发TodoList（1） (09:57) , ?7 ^" {% L [+ V
6-7 使用 Composition API 开发TodoList（2） (06:45) 3 \% g5 B8 ^1 J4 {; z, [
6-8 computed方法生成计算属性 (10:59)
9 ]: `$ |+ c% X2 t6-9 watch 和 watchEffect 的使用和差异性（1） (11:30) % D- D# C' n4 F) k* I0 | v, K
6-10 watch 和 watchEffect 的使用和差异性（2） (10:48)
8 O7 X) R! v5 w2 U6-11 生命周期函数的新写法 (10:54) % w3 t3 M- J' {/ j
6-12 Provide,Inject,模版 Ref 的用法 (14:53) - \5 }$ S1 ^: ]9 M2 a5 Q9 b* R v4 W( _
6-13 【讨论题】Composition API 的产生背景是什么
& _$ _1 d% x/ k. j! v
, _4 y f8 }8 ^第7章 Vue 项目开发配套工具讲解13 节 | 93分钟 $ Y* n$ _, {7 W( v! f3 w) x" ^
7-1 VueCLI 的使用和单文件组件（1） (09:37) 0 h. O& S9 X0 f" M! P& E5 n# h# r
7-2 VueCLI 的使用和单文件组件（2） (08:34)
7 B5 m& h1 L1 u1 M4 B; f7-3 使用单文件组件编写 TodoList (11:46) 1 y# C; f; a; a) p- z l. n
7-4 【讨论题】单文件组件这种语法设计，背后实现的原理是什么 ( a' g$ m' ~1 i( b$ p
7-5 Vue-Router 路由的理解和使用（1） (12:28)
$ Z/ [0 [/ b, }5 r7-6 Vue-Router 路由的理解和使用（2） (04:50)
/ x$ v9 ?1 a5 B8 m, c" b7-7 【讨论题】对前端路由，你有怎样的理解？ H. n; s% y# P6 \! |& |: w8 m" q
7-8 VueX 的语法详解（1） (09:42)
* y K$ V1 L% X, l; }7-9 VueX 的语法详解（2） (13:12)
! O5 _9 z( s, V# y+ v2 w7-10 VueX 的语法详解（3） (09:12) : S0 e/ J* V* o$ x M( P2 A
7-11 CompositionAPI 中如何使用 VueX (07:06)
, j+ m/ _- n( _& p7-12 【讨论题】对前端数据管理框架，你有怎样的理解？
8 G1 Z0 G1 t3 j) k7-13 使用 axios 发送ajax 请求 (05:34)% L) h' U" f$ L( h6 L) M. ]
* }/ X; B/ p( ?- D. z( p8 }第8章 “京东到家”项目首页开发12 节 | 155分钟
' W5 J* P+ n# a8-1 工程初始化 (04:09)
- t, I5 o6 I8 w8-2 工程目录代码简介及整理 (10:50) 8 p* ~" f3 X0 }
8-3 基础样式集成及开发模拟器的使用 (06:33)
8 c$ j7 G& ~1 Q$ F8-4 flex + iconfont 完成首页 docker 样式编写 (22:21)
{1 n1 \6 d5 H& \, v8-5 使用Scss 组织地址区域布局 (21:18)
6 L* K! E% [8 M0 H# b& `8-6 利用CSS技巧实现搜索及 banner 区域布局 (15:54) ) e8 d2 P' f R( j1 q- e8 \
8-7 使用 flex布局实现图标列表布局 (11:48)
* S: U/ \5 t5 m4 H0 X8-8 首页布局收尾 (18:50) , i* u$ L, H( R9 Z, @
8-9 首页组件的合理拆分 (16:28) _6 J! G( [8 l6 Y; B
8-10 使用v-for, v-html 指令精简页面代码 (17:52) ; P0 e4 c4 L, Z8 V. O
8-11 CSS 作用域约束以及 Vue 开发者工具的安装使用 (08:39) 8 V. V9 G$ z# p8 _
8-12 【讨论题】说说你在开发项目时，用到过的比较好的工具吧* X6 q# U) L/ O- j7 G
6 Z4 k$ M' N8 {3 e第9章 登陆功能开发10 节 | 116分钟) P: s( M" W' G( _
9-1 登陆页面布局开发 (21:15) 7 G- K3 [5 m. ~# H
9-2 路由守卫实现基础登陆校验功能 (12:28)
1 q# K% d9 ?: v9-3 注册页面开发及路由串联复习 (09:59)
8 K. {6 L( j7 h: [+ A( k) t' }8 I3 d9-4 使用axios 发送登陆 Mock 请求 (16:38)
0 x2 e6 H" L, d0 ~1 v0 B! f9-5 请求函数的封装 (12:15)
; Z: G# Y, C, }" u9-6 【讨论题】请求逻辑可以封装哪些内容？
# w, b8 ?& T- f9 g+ X' O9-7 Toast 弹窗组件的开发 (10:13)
( e3 s" R$ Q) c% \; H9-8 通过代码拆分增加逻辑可维护性 (09:03)
. E, M" m+ O8 g9-9 Setup函数的职责以及注册功能的实现（1） (11:12) 5 a, A* T# s7 O: B$ E% j. ?* r* y* K
9-10 Setup函数的职责以及注册功能的实现（2） (12:34)9 e5 f# m/ [0 a
. D6 T+ X- U7 S* ^5 y8 Q
第10章 商家展示功能开发（上）14 节 | 157分钟7 y; s/ _; d0 \: c; \
10-1 首页附近店铺数据动态化-详情页准备 (11:41)
; E# T# [! E S, m0 e- M$ ~10-2 动态路由，异步路由与组件拆分复用（1） (14:02)
7 S/ t2 ]$ L2 X" s) _2 |/ L, q10-3 动态路由，异步路由与组件拆分复用（2） (07:49) 5 M/ P2 L2 R& `
10-4 搜索布局及路由跳转（1） (11:40)
% B$ u; h" a6 u! l10-5 搜索布局及路由跳转（2） (06:36)
. V E$ V1 L' k# `; t0 r# w10-6 路由参数的传递以及商家详情的获取（1） (12:28)
# u- S( {. D% L5 s) i4 \10-7 路由参数的传递以及商家详情的获取（2） (10:42)
|! l. B+ H, ^+ ?, U10-8 商家页面核心样式开发（1） (12:30) : R/ u+ r" E( e4 ^7 r
10-9 商家页面核心样式开发（2） (11:22)
" V1 M' i) a3 N( u) S10-10 样式的优化与代码复用（1） (09:10)
* v: A1 c W' ~2 d10-11 样式的优化与代码复用（2） (10:33)
, Q! B+ k* u( M& k- P x/ D4 n10-12 【讨论题】说说 CSS 中的设计模式
9 ?, o5 M3 q a% R0 j7 b10-13 商家详情页分类及内容联动的实现 (21:27) 1 D' J! i1 L0 F. V
10-14 使用 watchEffect 巧妙的进行代码拆分 (16:07): n/ A/ G+ q2 p* h3 P# {) a) T
; ?; n! T4 n2 S$ f6 b' _2 Y第11章 商家展示功能开发（下）17 节 | 203分钟 N& S+ U" Z8 `1 v5 f
11-1 购物车的样式开发 (19:21) 2 `4 e4 X- }$ l% w
11-2 Vuex中购物车数据结构的设计（1） (16:26)
# G( ` K" t* Q11-3 Vuex中购物车数据结构的设计（2） (08:40)
j& t: j. f7 _: G11-4 使用 computed 完成订单价格计算 (18:14) . q1 D9 W+ c. W+ }* L: `1 T
11-5 购物车及列表双向数据同步功能开发（1） (14:31)
8 @7 z, a( |- z2 s% O# }# Q11-6 购物车及列表双向数据同步功能开发（2） (08:50)
3 K" `/ w% _- h4 p9 F; R11-7 根据购物车选中状态计算订单金额（1） (12:51) ( z' B# P& S) f$ m) \
11-8 根据购物车选中状态计算订单金额（2） (11:37)
( c# k' Y% X' h+ c11-9 全选及清空购物车的功能实现（1） (15:14) - t& S9 | V/ ?7 n4 z& u% P0 C
11-10 全选及清空购物车的功能实现（2） (14:24) 8 F2 T4 U4 @% v' J6 B2 o
11-11 商家详情页面代码优化（1） (11:25) , B* t4 f/ H0 S _ d1 A+ L$ h
11-12 商家详情页面代码优化（2） (06:27)
+ v0 X# U0 P# \& l) h. N11-13 购物车数据结构的变更（1） (09:12)
! d5 F) L( \' q11-14 购物车数据结构的变更（2） (11:05)
. w" X8 B6 ]; j/ h( G11-15 【讨论题】作为前端，你在开发中是如何进行代码调试 Debug
' c9 }/ z& L$ ]7 c8 k11-16 通过 LocalStorage 实现购物车信息持久存储（1） (13:46)
6 z7 o6 q6 k2 Q# K11-17 通过 LocalStorage 实现购物车信息持久存储（2） (10:02)
- o3 N* h- y0 V9 w; x3 n' a3 k( v4 H
第12章 核心购物链路开发19 节 | 192分钟( U% L+ ~# s5 m5 ^6 I- g
12-1 确认订单页面创建及顶部布局（1） (16:51)
* t" J; {8 n, g% H* |8 y12-2 确认订单页面创建及顶部布局（2） (11:39) ' y8 A P7 z" ?! Z, j! J
12-3 订单商品列表数据获取与布局（1） (17:39) + u0 Q0 Q+ o* u1 Y+ n9 A' u/ x
12-4 订单商品列表数据获取与布局（2） (11:46)
+ R$ E- {6 f+ ]" h) |: C" ]12-5 页面布局及展示逻辑开发（1） (09:20)
1 ]3 {: r6 F2 @7 v% _12-6 页面布局及展示逻辑开发（2） (14:46) : M; A8 R. c* z* X8 x( w6 x
12-7 确认订单页面组件拆分及弹框布局制作（1） (12:02)
% d: u) N( H" F2 u( r% x12-8 确认订单页面组件拆分及弹框布局制作（2） (14:03)
6 D [4 M# s5 t/ E# z+ H: c12-9 购物流程开发完成（1） (11:04) : l; q4 O7 g1 M6 {4 u9 B# Z
12-10 购物流程开发完成（2） (15:44) 5 m1 a0 h$ m8 {) j2 |' j9 q
12-11 下单流程开发优化 (05:03)
; V# Y0 F, T' Q- Y3 ?+ y12-12 订单列表页布局开发（1） (07:34) 2 o) h C9 f& O: J& W) x
12-13 订单列表页布局开发（2） (12:40)
( o7 d* W0 G9 ?12-14 订单列表逻辑开发（1） (16:25)
; T4 ~; I& v8 S M* X12-15 订单列表逻辑开发（2） (14:25)
# J$ v6 K! u3 s! P3 B" L) X# L12-16 【讨论题】Composition API使用时会注意哪些方面 % V1 A( y. r9 a6 Q, a: Z
12-17 【学习任务】结合本地购物车数据，完成多店铺购物车页面开发 " x# M" a! g2 [
12-18 【学习任务】结合增删改查逻辑，实现地址功能编辑页面 : P" ^7 r& s; E( J$ |$ N' S# }% H7 ~
12-19 【学习任务】还原设计稿个人信息页面，并实现登出功能
+ r4 u! ~* |4 _ ?# S
( a" S, c1 q1 k第13章 真机调试及工程发布流程5 节 | 41分钟
: Y- d/ p& i* G4 A3 }2 p& Z13-1 如何进行真机调试 (06:18)
) f0 Q/ Y2 F- q' i7 z2 i+ S+ P% n13-2 解决真机调试过程中的展示问题 (12:59) : V! L Q( g# j) x1 L3 b7 E
13-3 实现项目对不同设备的展示适配 (07:18)
; [7 Z0 n) d4 k6 r8 C- d13-4 【讨论题】说说你在进行移动端开发时，遇到问题及解决方案 & Y9 V; Q2 L) g% _1 j
13-5 项目上线和课程总结 (14:09)
# [" Z6 f% L' |5 \# t
8 _2 y* i, u0 A% d" q〖下载地址〗) |) f. l- [/ c. {- L9 T+ A0 q/ k3 B
! u# q" G2 v9 m* S& G0 n〖升级为永久会员免金币下载全站资源〗" b% h4 m( ~$ T) J$ M3 V
全站资源高清无密，每天更新，一次充值，永久可查看网站全部资源：http://www.mano100.cn/rjyfk_url-url.html
& m. y2 o3 W5 U4 |2 w |
|
[复制链接]
