0 w; T g6 d2 O9 z+ x$ b
: y& W! N: V3 A1 A5 `
课程目录：
" k5 m8 v7 C" Y' M 第1章 课程介绍9 p! g0 j: _+ f
本章主要介绍课程的知识大纲，学习前提，讲授方式及预期收获。4 @9 Z3 |3 l+ O
% F P- [! T, W$ m9 h 1-1 课程简介* Q, U/ Y0 Q2 X0 n8 a* d" S0 w
) ^8 p* R( I4 H: |' t7 y& ?7 m. Z5 T& G( [/ N: V6 S
第2章 Vue 起步0 s9 @) ]9 H' k; I8 m) g6 C
本章将快速讲解部分 Vue 基础语法，通过 TodoList 功能的编写，在熟悉基础语法的基础上，扩展解析 MVVM 模式及前端组件化的概念及优势。* I0 z1 r. P0 b$ @; {
2-1 课程学习方法9 ]0 m" B( \& Y0 g/ g
) [$ n& @( x6 U, P' z 2-2 hello world4 O9 G% h# J4 j0 G7 {0 G
2-3 开发TodoList（v-model、v-for、v-on）0 J. | B& W, ~; F" Q: z9 ?: B& _6 J; C1 @0 ]' D. W% l8 \# n
2-4 MVVM模式2 M/ Z$ K1 ?% u! V" W, w n( y3 t8 ?3 [ ^
2-5 前端组件化- r6 `9 A- n# K7 {+ G- o. S! C
2-6 使用组件改造TodoList$ d% E# W/ }: i1 C/ Z
1 ^ e$ o' _4 l5 ~+ d 2-7 简单的组件间传值& Y8 J" ?. R2 ~) g) z
{0 S9 A1 Y% q% n5 f) c# S 2-8 章节小结; I- `7 J# Q$ x+ a- v, r
! u' {7 R4 j0 U5 C3 H3 c: r% C7 ^) V( Z
' c) n3 R) X8 [# y1 w 第3章 Vue 基础精讲$ h2 X( w5 X8 l4 E5 S) [
! q) h/ J* D/ E% v 本章通过精挑细选的案例，精讲 Vue 中的基础知识，包括实例、生命周期、指令、计算属性、方法、侦听器，表单等部分内容。
! I& |8 ~; k; v# K; C* u1 u 3-1 Vue实例
2 q3 F w. b3 w+ Z: O 3-2 Vue实例生命周期8 S6 i/ @# ^. l+ z& w2 d" |
3-3 Vue的模版语法/ J% ^& X! q. Z/ c0 A7 b6 z G, e% L$ s/ G( k
3-4 计算属性,方法与侦听器2 R" J3 Z( F. G& c6 f
3-5 计算属性的 getter 和 setter* b+ b; ]% O. J2 A/ |* `2 w
! ]4 F/ _8 y3 j! h# x( G0 f 3-6 Vue中的样式绑定
# |) E V9 L B" n 3-7 Vue中的条件渲染
3 d ?' _5 R0 v4 Y: ~9 z' K' F 3-8 Vue中的列表渲染 j3 q2 J' C; k
3-9 Vue中的set方法2 d5 d W* Q/ |+ W9 k# e8 u5 h( W! ^- q4 b- ~- s h# N" R
, r, m( M B$ i+ w" x; |
& C+ n) @2 n c1 |' _; G+ o$ H8 J 第4章 深入理解 Vue 组件/ Y& {9 h2 y: _$ R, a3 d% R0 q9 \
6 x0 W. y0 g% v1 {2 u 本章将深入讲解 Vue 组件使用的细节点，从父子组件的参数传递及校验入手，逐步深入到非父子组件间传值、插槽、作用域插槽、动态组件等内容的讲解。5 }' ?' x1 \ C% ]1 f! B. @
J( W* u7 s6 ]/ m: Y1 E 4-1 使用组件的细节点! A0 ?5 o1 q- m+ Q
4-2 父子组件间的数据传递& u$ x; |# _0 c3 }' J
4-3 组件参数校验与非 props 特性 m1 x* R* {( A3 ]7 b) x) }
4-4 给组件绑定原生事件
2 k' n- N' t- X2 j( G# y 4-5 非父子组件间的传值; F5 W+ L3 Q8 p _$ D) n, d3 x
4-6 在Vue中使用插槽* c* }! I1 g0 x3 `9 a* J: T
3 _9 ~' ?6 A* q, ?& h! a f 4-7 作用域插槽( c% h( H2 o! z. D8 b: C5 z O1 t( V0 D& _; T6 w7 w, a" @0 e% Q
4-8 动态组件与 v-once 指令' t+ n0 y' f# x+ \! w. @1 X
7 `% |$ v2 F, g* }9 F$ F6 [. q6 h* z' [0 ~$ ?$ G5 S4 G% V0 D Q* |
第5章 Vue 中的动画特效) p( E- A0 Z- `% Z4 p' q6 j6 g* v _, J4 _
本章将讲解 Vue 中的 Css 及 Js 动画原理，以及在 Vue 中如使用 Animate.css 及Velocity.js 动画库，在理解了基础动画原理后，本章还扩展了 Vue 中多元素及列表过渡效果实现的知识，并会带同学们学习如何对通用动画效果进行代码封装。...# [3 N+ D( j7 \" M+ ?8 b# |
8 w& ^- W! E# P. B9 ^5 p; U 5-1 Vue动画 - Vue中CSS动画原理
8 c' m. r% {$ w6 ] 5-2 在Vue中使用 animate.css 库5 f7 e) X: L/ V1 p' g& X `* t& z
- ?8 O7 n( R6 R 5-3 在Vue中同时使用过渡和动画/ s; F' _' [4 L" ^. n' M7 ~/ H( X: s* V( L, w) c
5-4 Vue中的 Js 动画与 Velocity.js 的结合- p5 n& h3 A8 H- i4 _% C( @: I
5-5 Vue中多个元素或组件的过渡2 e5 e/ O7 b& Y2 a" c
5-6 Vue中的列表过渡
( W/ ]; C" H7 }8 s& T3 J6 W; N 5-7 Vue中的动画封装2 G8 s$ |9 e* c+ H4 s" x; M
5-8 本章小节 Z/ c! H) K4 _8 V( p7 z7 N
4 L" a+ S* J( H4 B% w
第6章 Vue 项目预热) I7 j9 C* p3 P+ H1 ~6 _; |. @
本章首先讲解项目环境的基础配置，在此基础上分析工程代码目录结构，延展讲解 Vue中单文件组件及单页面应用路由的概念，最后将带大家整理项目目录，完成 stylus、reset.css 等基础工具及样式的引入，完成项目开发前的准备工作。...0 H2 O& ]8 n7 J$ b' o! J4 G% E0 V# c- ?) B5 G
6-1 Vue项目预热 - 环境配置9 Y) |) ^# j2 N. h6 y) g @: o7 P
6-2 Vue项目预热 - 项目代码介绍; Q4 R# W3 q+ Z+ T0 j5 `4 l2 e$ g I4 R$ Z, X" K; G
6-3 Vue项目预热 - 单文件组件与Vue中的路由
1 r7 O# [' x. E& {) C9 f# G 6-4 Vue项目预热 - 单页应用VS多页应用' S" I$ p7 L" ?" D6 d, o/ G: p4 @
6-5 Vue项目预热 - 项目代码初始化* _! J+ R0 t( G# L% U4 j
$ ]: s0 T. b" h4 G! O5 b& j. O) ^7 D1 R1 C0 m @! I* ]
2 A0 u% H0 i; M+ ~$ S, G8 }" i ~ 第7章 项目实战 - 旅游网站首页开发
( t3 S# O0 m, E8 } 本章正式进入项目开发环节，将带大家完整的实现项目中的首页，涵盖的功能点包含header组件拆分、iconfont引入、多区块轮播、热销推荐及周末游等展示模块。3 p# v2 e$ x1 r! n
$ {( u9 Z. B! t: G" L+ s. ^ 7-1 Vue项目首页 - header区域开发
7 N6 r( K$ B* P3 f( b 7-2 Vue项目首页 - iconfont 的使用和代码优化; z2 {* F" ?" i0 Q& X+ e5 m, l1 g8 E( d1 j& S
7-3 Vue项目首页 - 首页轮播图3 X5 w/ h- @2 `, e" O- d2 d% O8 e+ u. h
7-4 Vue项目首页 - 图标区域页面布局. e6 H3 Q: C. a
7-5 Vue项目首页 - 图标区域逻辑实现
" q5 j8 r- @/ B- P0 E6 V0 A4 Z( x- |, | 7-6 Vue项目首页 - 热销推荐组件开发, Q5 ?$ \" H. S4 s5 X0 u8 z0 f2 E6 c1 y
9 B9 ~8 ~) w; @" r* |, y) R+ M 7-7 Vue项目首页 - 开发周末游组件- Y( H2 V; z3 @1 l5 P- X/ \% w/ d* D- G) l# z
7-8 Vue项目首页 - 使用 axios 发送 ajax 请求
0 i% n+ B$ Z0 b 7-9 Vue项目首页 - 首页父子组组件间传值# b+ L5 d0 p a: H% A, T/ ~
1 b3 N! E, _, z' r
第8章 项目实战 - 旅游网站城市列表页面开发, ` H7 Y4 [, ^: P" O: e7 b6 s8 N
6 p1 }4 h2 s, H/ X2 z 本章将讲解景点详情页面的开发，主要讲解渐隐渐显 Header 组件的制作，公用组件的拆分，路由参数的获取与处理，以及递归组件的使用。在详情页面，我们还会对通用动画效果进行代码封装。: K' B+ A! e8 ] b6 u; _- ~8 X B5 A1 ^) Q4 m! B
8-1 Vue项目城市选择页 - 路由配置1 y7 f" B. W# @+ l) x" ` x% l
4 i* }, d' {$ Y& y 8-2 Vue项目城市选择页 - 搜索框布局- e/ }( t2 a( F3 O, B2 U9 {* x, Q
2 W$ ^5 K3 G( p% ^+ }& s: R 8-3 Vue项目城市选择页 - 列表布局# X4 T/ A5 D1 R% \% I. O% B) I/ c- }
5 ]$ q: i9 l" p: o$ Q2 u* Y- }; F 8-4 Vue项目城市选择页 - BetterScroll 的使用和字母表布局- S$ ?9 A( ]0 p- @) ]- P
- C4 I- T @6 p! O. s; N, S4 b 8-5 Vue项目城市选择页 - 页面的动态数据渲染
/ O- w ?, t* ]% W# G5 ? 8-6 Vue项目城市选择页 - 兄弟组件数据传递
# j- R8 m! _1 ]' n& e, l 8-7 Vue项目城市选择页 - 列表性能优化) X! q) {! a5 l) L' n0 C1 K! C- A5 a& ~
8-8 Vue项目城市选择页 - 搜索逻辑实现
& }3 M" U- F9 G5 ^9 d" V 8-9 Vue项目城市选择页 - Vuex实现数据共享
/ T- n( b: M# u 8-10 Vue项目城市选择页 - Vuex的高级使用及localStorage6 w4 l! F# z7 n8 d8 ~8 b& F# c5 i9 D' g5 N! h8 W! [6 ?) G' D" w6 a: f
8-11 Vue项目城市选择页 - 使用keep-alive优化网页性能7 [0 C. z6 i! T
8 }: e# p U6 {9 c9 b+ ~
第9章 项目实战 - 旅游网站详情页面开发
- k, W' c) `5 b3 o2 N* o/ U1 x 本章将讲解景点详情页面的开发，主要讲解渐隐渐显Header组件的制作，公用组件的拆分，路由参数的获取与处理，以及递归组件的使用。在详情页面，我们还会对通用动画效果进行代码封装。6 _( w0 x9 A. U( g) w
9-1 Vue项目详情页 - 动态路由和banner布局9 a* v& v @$ n* M3 D B, U) A
9-2 Vue项目详情页 - 公用图片画廊组件拆分/ g+ q1 b3 t, ~& M) z+ s
9 _8 ^* `5 |) W" L) {' n0 A0 ?$ E' E 9-3 Vue项目详情页 - 实现Header渐隐渐显效果
" U0 f- M0 r/ s- f/ w1 q9 ? 9-4 Vue项目详情页 - 对全局事件的解绑/ Y0 G1 L' P, \0 i% W) A
9-5 Vue项目详情页 - 使用递归组件实现详情页列表9 p( o. U, }9 g! Z+ p; j5 o; v
9-6 Vue项目详情页 - 动态获取详情页面数据5 `" p) F8 {, g5 j3 k; R# O, e# t1 t: {' \; e9 I( g- w
9-7 Vue项目详情页 - 在项目中加入基础动画
: H7 A- F6 Y" S9 l6 z
# y4 N8 s& l) y$ C: w0 G6 u/ b 第10章 实战项目 - 项目的联调，测试与发布上线; f/ i+ c8 s$ M: z1 }. [
$ r+ D3 Q. }5 x2 p; D& J3 T 本章将以公司级别项目的要求，给大家讲解当项目开发完成后，开发人员进行联调，测试，及发布的详细流程，同时点出过程中可能遇到的问题及修复方案。另外，还会给大家补充讲解异步组件的知识点，通过使用异步组件，我们可以大幅提高大型项目的首屏速度。最后，我们将给大家讲解，在这么课程学习完之后，继续深入学习Vue的方...+ s0 r& F* R6 [3 Q
3 O5 D, C, Y3 M3 I) H; c% |" f 10-1 Vue项目的联调测试上线 - 项目前后端联调" q$ b& v0 N2 y* m
g- J c8 Q, m2 }3 f. I0 L5 e 10-2 Vue项目的联调测试上线 - 真机测试" z a @3 D+ K* r* ] u+ Q) J! h2 o$ v1 }+ o. Q" r" z
10-3 Vue项目的联调测试上线 - 打包上线- C5 R5 V% `& D! Q* u4 u0 x, t0 y# m8 \; C& e$ b6 t
10-4 Vue项目的联调测试上线 - 异步组件实现按需加载* y9 S. m2 V2 J! L
" F' ^1 P. k% {, ?" w% q 10-5 Vue项目的联调测试上线 - 课程总结与后续学习指南9 Y)9 X9 ^* K2 B* Z' R3 d7 i. I; P
% {/ N E4 ]( |& |4 y ]下载地址：
z. w5 S% D3 m3 C1 A- m9 C0 A( `# t0 X# A& w* @
|
|
[复制链接]
