在公司做了一次vue相关的培训,自己整理了一些大纲。供大家参考学习!

### 1. 项目构成及原理 [Vue](https://cn.vuejs.org/)###
* 主流框架见解及差别
* 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 入门](http://es6.ruanyifeng.com/)
* var => let const
* 箭头函数 this指向
* 异步(promise)回调地狱
* 数组及解构赋值

### 2. Vue路由 [Vue Router](https://router.vuejs.org/zh/)###
* 路由的作用及工作原理
* 以路径为键做模块加载
* 路由的两种模式: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](https://vuex.vuejs.org/zh/)###
* VueX是什么,为什么要使用VueX
* VueX的使用mutations、Action

### 7. Ajax请求 ###
* AXIOS的封装及使用

vue培训记录的更多相关文章

  1. Vue 问题记录

    Vue 问题记录 汇总日常开发中遇到的关于vue的问题 VeeValidator 语言设置 校验消息默认是英文的,定义中文或其他语言的错误提示消息 import VeeValidate from 'v ...

  2. 76.培训记录信息 Extjs 页面

    1.培训记录信息页面jsp <%@ page language="java" import="java.util.*" pageEncoding=&quo ...

  3. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  4. vue实战记录(五)- vue实现购物车功能之商品总金额计算和单选全选删除功能

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(五) GitHub:sue ...

  5. vue实战记录(六)- vue实现购物车功能之地址列表选配

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(六) GitHub:sue ...

  6. vue实战记录(四)- vue实现购物车功能之过滤器的使用

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(四) GitHub:sue ...

  7. vue实战记录(三)- vue实现购物车功能之渲染商品列表

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(三) GitHub:sue ...

  8. vue实战记录(二)- vue实现购物车功能之创建vue实例

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(二) GitHub:sue ...

  9. vue实战记录(一)- vue实现购物车功能之前提准备

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(一) GitHub:sue ...

随机推荐

  1. c# ftp 判断目录是否存在和创建文件夹

    工作中项目一直使用的ftp上传日志文件出现了问题,新的服务器搭建好后,日志无法上传.正好来学习一下ftp. 程序中的流程是,一个计时器,每分钟检测配置文件中本地日志文件路径下有没有日志文件,如果有就上 ...

  2. Xmind 常用快捷键列表(官方推荐)

    XMind中文版快捷键指南 XMind是一款非常实用的思维导图软件,能够帮助人们快速理清思路,打开新的局面.熟练地掌握快捷键的操作不光能够提供便捷,更能很大程度上的缩短制作时间,提高工作效率.本文总结 ...

  3. Mac Sublime 相关资源

    MAC上安装并破解最新SublimeText3103版本 http://blog.csdn.net/yanzi1225627/article/details/50703942 Mac版的Sublime ...

  4. paho_c_pub 使用方法

    Latest Paho Status (2) 摘自:http://modelbasedtesting.co.uk/ I last wrote about the state of Paho in Oc ...

  5. 实践作业3:白盒测试----junit的难点DAY11.

    本次白盒测试 需要独立完成整个项目和工具的配置安装运行操作,并编写.运行测试脚本,并完成实验的一些小细节等等. 首先,导入Junit测试框架所需的Jar包 然后编写测试脚本,为.java运行程序,见打 ...

  6. 【转】OJ提交题目中的语言选项里G++与C++的区别

    原文链接:http://blog.polossk.com/201405/c-plus-plus-g-plus-plus G++? 首先更正一个概念,C++是一门计算机编程语言,G++不是语言,是一款编 ...

  7. bt协议详解 基础篇(下)

    bt协议详解 基础篇(下) 最近开发了一个免费教程的网站,产生了仔细了解bt协议的想法,所以写了这一篇文章,后续还会写一些关于搜索和索引的东西,都是在开发这个网站的过程中学习到的技术,敬请期待. 1 ...

  8. JavaScript执行顺序

    当JavaScript引擎解析脚本时,它会在预编译期对所有声明的变量和函数进行处理.所以,就会出现当JavaScript解释器执行下面脚本时不会报错: alert(a);                ...

  9. [转]一次Delete&Insert引发的Mysql死锁

    近日遇到一个比较奇怪的deadlock错误, 错误详情: Deadlock found when trying to get lock; try restarting transaction; nes ...

  10. wp8.1 app退出操作提示

    微软的wp8.1 sdk相比之前wp8 sdk以及相关dll类库,微软又重新编译过,相关系统类库也经过精简,删改了部分传统dll库中的方法对象,很多常用方法对象被写进Windows.UI为前缀的命名空 ...