共计 1274 个字符，预计需要花费 4 分钟才能阅读完成。
在公司做了一次 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 的封装及使用