适用人群:
本课程对于有一定CSS,JS基础的小伙伴们!
教学目标:
1.使用Vue快速提高开发效率8
2.掌握MVVM的开发思想
3.开发可复用的自定义
4.独立使用Vue开发完整项目
课程大纲:
一.入门vue$
1.掌握数组新增的es5及es6常用方法forEach,map,filter,reduce
2.掌握es6常见语法 解构赋值,箭头函数,拓展运算符的使用#
3.vue基础使用 取值表达式的引用
4.v-model双向数据绑定 介绍Object.defineProperty用法,实现一个双向绑定
5.简介常用指令 v-bind,v-text,v-html,v-once,v-cloak的使用% v- L4 v/ I! w! i2 n! w B
6.深入响应原理 Object.assign 和数组的变异1 S+ v1 [3 S% W0 m$ c, X
7.v-for的使用 嵌套循环以及key的使用) v G# ]% r* j7 {% `% U
8.事件的使用 在vue中绑定事件,详解事件源和事件修饰符的用法
9.双向绑定之表单元素 checkbox,input,radio的使用
二.vue中的数据获取以及进阶用法
; @* F# f% |* ]5 Q# ~3 ^4 P. ^
1.axios的基础使用
2.介绍promise的用法 自己封装promise版的ajax' w1 p( G1 V, m
3.实现购物车功能3 m1 f: ~: }& p, ]: ^( o
4.计算属性&&watch应用 对比method,watch和computed的异同7 l1 v5 M0 k- o* B. ^8 Y
5.vue中的动画 transition以及transition-group的使用
6.动态绑定数据 v-bind的使用,绑定样式:class :style
7.自定义指令以及过滤器的使用 directive filter的应用
8.实现todoList
三.探索vue的生命周期
1.vue中的钩子函数6 |' x( C$ u ~& f$ D' }
2.keep-alive缓存的使用 缓存的钩子activated deactivated# q( X5 D6 Y* Q; \. P- I
四.vue中的组件
4 Y N7 f3 p- |2 ]6 j) P
1.全局组件和局部组件的使用 组件中的data函数" r6 X Z* Y, N9 ?
2.组件交互之父传子 props的应用,与属性检验type,require,validator等
3.组件交互之子传父 通过eventBus,自己实现发布订阅模式
4.组件案例之模态框5 a( V% k. o! u/ T1 t
5.ref的应用 获取dom元素,已经组件实例9 a5 A6 H. J( Z* v( @
6.nextTick用法解析
7.slot用法解析
8.实现面板组件
五.webpack的基础应用% V% Y; n8 j& L7 K( @8 T o
1.babel解析es6,es7) @1 L0 M4 ~4 Z
2.处理css,less样式
3.处理图片以及图标字体/ j2 ]5 g b! r' r' M( X
4.解析vue-loader,.vue文件
5.html-webpack-plugin的使用- H1 [4 U: m: A# ^
6.封装vue插件之notify组件
六.进阶vue路由
1.基础路由搭建
2.编程式导航# a% c. p" X3 V
3.路由的嵌套5 d6 X/ R) K4 ]. i8 P6 ]5 Z4 G
4.在路由中发送ajax获取数据
5.路由导航钩子的使用; X6 w* U/ v5 [- s5 p( v1 Z; T
6.实现路由动画 r4 g! E2 c, t# J
七.vue-cli应用4 g1 Z7 h1 I+ ?# w9 v* T( `
1.vue-cli代码解析0 ?2 ^% Y Z2 \7 B) ^
2.应用vue-cli搭建书城项目
下载地址:
|
|