乐趣区

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 的封装及使用

退出移动版