VUE全家桶学习曲线

vue学习路线总结曲线图，让学习路径更加清楚，学习起来更加快乐。

Vue全家桶

• 一，了解vue.js
  • 1，遇见
    • 为什么学vue.js
    • 前端开发的复杂化
    • vue的渐进式
    • vue.js的特点
  • 2，安装
    • 直接CDN引入
    • 下载和引入
    • NPM（基于node，要使用npm，必须先安装node）安装
    • CLI(脚手架)和NPM的结合使用
  • 3，体验
    • hello Vue.js
    • Vue显示列表
      • 通过for循环实现
    • 实现计数器
      • v-on:click点击事件
  • 4，MVVM架构
    • data和Vue对象的分离
    • Vue中的MVVM
      • • 子主题
• 二，vue的基础语法
  • 1，插值语法
    • mustach语法
      • 双括号插值法，动态渲染数据，将数据加载到页面上面
    • v-once
      • 数据只显示一次，刚开始加载显示的数据，就一直是那个数据，不会改变
    • v-html
      • 绑定标签
    • v-text
      • 添加文本
    • v-pre
      • 页面渲染，html页面中写的是什么就渲染出什么
    • v-cloak
      • 实现页面加载的一个缓冲效果，数据没有加载出来时，不显示
  • 2，绑定属性
    • v-bind绑定基本属性
      • v-bind:src
        • 绑定链接地址
      • :href
        • 绑定跳转地址，常用在a标签上
    • v-bind绑定常用属性
      • class（:class)
        • 对象语法
        • 数组语法
      • style样式（:style)
        • 对象语法
        • 数组语法
  • 计算属性
    • computed
      • 计算属性的基本使用
        • 数据的拼接
      • 计算属性的复杂使用
        • 数据总和的计算
      • 计算属性和methods的对比
        • 计算属性多次使用时只需要调用一次
        • 它是有缓存的
      • setter
      • getter
  • 3，事件监听
    • v-on介绍
    • v-on基础
    • v-on参数
      • 没有参数
        • 小括号可以省略
      • 有一个参数
        • 默认把event对象传递过来
      • 有一个或多个参数
        • $event拿取数据
    • v-on修饰符
      • stop
      • prevent
      • .enter
      • .once
      • .native
  • 4，条件循环
    • 条件渲染
      • v-if
      • v-else-if
      • v-else
    • v-show指令
    • v-if和v-show对比
    • v-for指令
  • 5，阶段案例
    • 购物车案例
      • • 普通for循环
        • for let in循环
        • 高阶函数
          • filter
          • map
          • reduce
        • for let of循环
    • 编程范式
      • 一
        • 命令式编程
        • 声明式编程
      • 二
        • 第一公民
          • 对象
            • 面向对象编程
          • 函数
            • 函数式编程
  • 6，表单绑定
    • 基本使用
    • v-model原理
      • v-bind:value v-on:input
    • 其它类型
    • 值绑定
      • radio
      • select
      • checkbox
    • 修饰符
      • lazy
      • number
      • trim
• ES6语法总结
  • let
  • const
  • 对象字面量的增强写法
    • 属性的增强写法
    • 函数的增强写法
• 三，组件开发
  • 1，认识组件化
    • 什么是组件化
      • 把一个页面拆分成一个个小小的功能
  • 2，组件化基础
    • 组件的基本使用
    • 全局组件，局部组件
    • 父组件，子组件
    • 注册的语法
    • 模板的分类写法
      • script
      • template
    • 数据的存放
      • 子组件不能直接访问父组件
      • 子组件中有自己的data，而且必须是一个数组
      • 为什么必须是一个函数
    • 父子组件的通信
      • 子传父
        • props
      • 父传子
        • $.emit 自定义函数
    • npm
      • npm install
        • 安装所有依赖项
      • npm run server
        • 运行项目
  • 3，组件化高级
    • 组件化开发
      • 父子组件的访问
        • children/refs
        • parent/root
      • slot插槽的使用
        • 基本使用
        • 具名插槽
        • 编译的作用域
        • 作用域插槽
    • 前端模块化
      • 为什么要使用模块化
        • 简单的js代码带来的问题
          • 变量的提升
        • 闭包引起的问题
        • AMD/CMD/CommonJS
      • ES6模块化的使用
  • 4，组件化生命周期
• 四，Vue CLI详解
  • 1，webpack
    • 什么是webpack
      • webpack和gulp对比
      • webpack依赖环境
      • 安装webpack
    • 起步
      • webpack命令
      • webpack配置
        • webpack.config.js
        • package.json
          • script
    • loader
      • css-loader/style-loader
      • less-loader/ess
      • babel-loader
      • url-loader/file-loader
    • webpack中配置vue
      • vue-loader
    • plugin
    • 搭建本地服务器
    • 配置文件分离
  • 2，Vue CLI脚手架
    • 什么是脚手架
    • 依赖
    • 安装
    • cli2初始化
  • 3，Vue CLI的使用
    • runtime-compiler和runtime-only的区别
    • 配置文件
      • Vue UI
      • 隐藏配置文件
      • 自定义vue.config.js
• 五，vue-router
  • 前端路由
    • 后端路由
    • 后端渲染
    • 前端路由SPA
  • 基本配置
    • 安装
    • Vue.use()
    • 配置映射关系
      • 创建组件
      • 配置映射关系
      • 使用router-link/router-view
    • 细节处理
      • 默认路由：redirect
      • mode:history
      • router-link -> tag => replace ->active-class
  • 动态路由
    • /user:id
    • this.$router.params.id
  • 参数传递
    • params
    • query -> URL的组成
  • 路由嵌套
  • 导航守卫
  • keep-alive
  • TabBar的封装
• 六，Vuex
  • vue的状态管理
• 七，网络封装
• 八，项目实战
• 九，项目封装