vue培训记录

在公司做了一次vue相关的培训，自己整理了一些大纲。供大家参考学习！
当然 优先要先看官方文档

1. 项目构成及原理 Vue

• 主流框架见解及差别

  • react ALL IN JS 灵活
  • angular 架构清晰 层级多 重
  • vue 类似react并吸收了angular的一些优点

• Node运行在服务端的JS

  • 谷歌V8引擎 使JS语言能在服务器端运行

• Webpack—一个前端的打包工具

  • 模块化拆分js
  • 使开发环境的代码能被浏览器编译

• Vue单页spa框架

  • 实则是一个html
  • 没有刷新页面过渡可编译

• Vue核心思想

  • 以数据驱动视图，尽量少用直接对DOM的操作
  • 一切都是模块组件
  • 单向数据流

• Vue-cli脚手架工具 去年出的3.0

  • 以更好的项目架构去搭建vue项目
  • 打包创建一些需要的依赖
• Vue项目创建
• Vue的项目构成

• Vue的一些常用es6 ECMAScript 6 入门

  • var => let const
  • 箭头函数 this指向
  • 异步（promise）回调地狱
  • 数组及解构赋值

2. Vue路由 Vue Router

• 路由的作用及工作原理

  • 以路径为键做模块加载
  • 路由的两种模式：hash history
• 基础路由的配置
• 路由全局守卫beforeEach、beforeResolve 、afterEach、beforeEnter
• 组件内路由守卫beforeRouteEnter、beforeRouteUpdate 、beforeRouteLeave
• 动态路由配置this.$router.addRoutes 只能添加顶级路由
• keep-alive activated deactivated

3. 模板语法

• v-if、v-for、v-show
• dom指令 v-if v-for
• 视图 v-show
• 巧用三元运算
• 方法绑定 '@'、'v-on'
• 修饰符
• 数据绑定 ':'、'v-bind'、'v-model'

4. Vue实例对象

• 实例this

• vue函数对象

  • this指向当前函数对象

• 方法对象methods

  • 所有调用的方法集

• 数据对象data

  • 数据驱动视图的核心
  • 只当create的时候赋值一次

• 计算属性computed 性能优势

  • 利用缓存计算
  • 不能直接修改

• 过滤器filter 注意this

  • 对字符串进行加工处理
  • 过滤器中取不到this

• 数据监听watch 慎用深度监听

  • 对数据进行监听 做相应动作
  • 深度监听影响性能

• 生命周期 beforecreated、created、beforeMount、mounted、beforeUpdate、updated、beforeDestory、destoryed

  • 常用created 获取数据，不触发updated，不造成页面2次渲染
  • 常用mounted 操作dom，触发update，造成页面2次渲染

5. 组件

• 组件引用书写 'components'
• 组件传参 props 传方法@
• 修饰符sync语法糖
• v-model语法糖

• 父子组件交互 $emit $refs

  • 子组件通过$emit触发父组件传入的方法，并传入参数
  • 父组件通过在子组件添加ref,在方法中用$refs来拿子组件中的参数或调取子组件方法

6. 状态管理 VueX

• VueX是什么，为什么要使用VueX
• VueX的使用mutations、Action

7. Ajax请求

• AXIOS的封装及使用