Web Developer

Vue 训练大纲

现代JavaScript ES6 & 更高版本

简介

  1. 为什么ES6和更高版本被认为是现代JavaScript? (2 minutes)
  2. var, let, const的异同 (5 minutes)
  3. 在ES6中如何使用 =>箭头函数 (9 minutes)
  4. ES6 模板字符串 (6 minutes)
  5. ES6 Object 新特性 (5 minutes)
  6. 在JavaScript(ES6)函数中设置默认参数值 (4 minutes)
  7. Rest和Spread运算符在ES6中的用途 (6 minutes)
  8. ES6 如何export & import (4 minutes)
  9. 如何在ES6中创建类 (5 minutes)
  10. 了解类继承在JavaScript ES6中的工作原理 (5 minutes)

ES6基础知识

  1. Promise
  2. Asnyc/Await
  3. Set & Map
  4. Symbols
  5. Array常用方法: map, reduce, filter, foreach
  6. ES6中新增的Object方法
  7. ES6中新增的String方法

单文件组件

  1. vue/cli 3.0简介 (6 minutes)
  2. 单文件组件简单介绍 (4 minutes)
  3. 创建第一个单文件组件 (3 minutes)
  4. 引入单文件组件 (2 minutes)
  5. 使用CSS编译器 (3 minutes)
  6. Scoped/Module Styles (4 minutes)
  7. 如何组件好单文件组件 (10 minutes)
  8. 异步加载远端组件 (9 minutes)

Vue组件知识

起步

  1. 学习方法介绍
  2. 使用Vue编写Hello World
  3. 使用Vue开发TodoList
  4. MVVM设计模式

小案例

  1. 组件化思维修改TodoList
  2. 简单的父子组件传值

基础

  1. 什么是组件? (3 minutes)
  2. 组件模板(template) (2 minutes)
  3. 利用props重复使用组件 (7 minutes)
  4. 计算属性，方法与侦听器 (8 minutes)
  5. 嵌套组件 (2 minutes)
  6. 全局组件 & 本地组件 (3 minutes)

进阶

  1. 组件命名最佳实践 (7 minutes)
  2. 组件生命周期钩子函数 (2 minutes)
  3. 计算属性的setter和getter
  4. Vue中的set方法

Vue中的动画

  • Vue中的CSS动画原理
  • Vue中使用animate.css库
  • Vue中同时使用过渡与动画效果
  • Vue中使用Velocity.js库
  • Vue中多组件和列表过度
  • Vue中动画的封装

实战

  1. 创建一个User Profile组件 (8 minutes)
  2. 创建一个message通知组件 (5 minutes)

自定义Vue指令

  1. 什么是Vue指令? (2 minutes)
  2. 创建一个自定义指令 (1 minutes)
  3. 验证指令的效果 (3 minutes)
  4. 指令参数 (1 minutes)
  5. 修改指令 (1 minutes)
  6. 绑定钩子(bind hook) (2 minutes)
  7. 解绑钩子(unbind hook) (2 minutes)
  8. 注册本地指令 (2 minutes)

Vue表单校验

  1. 自己实现表单校验 (6 minutes)
  2. 使用Vuelidate进行表单校验 (5 minutes)
  3. 校验表单时显示详细的错误信息 (3 minutes)
  4. 在用户输入之后显示错误信息 (3 minutes)
  5. 基于校验的状态使用不同的CSS class (1 minutes)
  6. 提交表单时显示表单校验的错误信息 (2 minutes)
  7. 在用户输入完成时显示错误信息 (2 minutes)
  8. 验证器的作用 (2 minutes)
  9. Form表单验证器 (3 minutes)
  10. 自定义Vuelidate规则 (3 minutes)
  11. 条件验证 (1 minutes)
  12. 异步验证 (5 minutes)

Vue多step表单

  1. 多step动态表单 (2 minutes)
  2. 表单间通讯 (9 minutes)
  3. 禁用导航直至step有效 (2 minutes)
  4. 父组件传递数据给step (2 minutes)
  5. 动态组件 (3 minutes)
  6. 组件状态保持 (4 minutes)
  7. 通过 refs 控制子组件 (6 minutes)
  8. 提交数据到父组件 (3 minutes)
  9. 添加异步状态 (2 minutes)
  10. 在操作步骤中异步 (7 minutes)
  11. Vue监听器&当前激活的钩子函数 (3 minutes)
  12. 在step执行异步操作时加载提示符 (3 minutes)
  13. 使用promise替代Event Bus在组件间通信 (14 minutes)

vue-router 学习目标

  1. 如何创建一个vue.js工程
  2. 如何创建router(含命名路由)
  3. 路由懒加载
  4. 路由传参
  5. 动态路由
  6. 什么是HTML5 History模式&如何启用它
  7. 路由动画
  8. 404
  9. 路由守卫
  10. 实现一个登录认证的中间件
Last Updated: 8/31/2019, 10:35:40 AM

Vue 开发技巧 →