在公司做了一次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 deactivated3. 模板语法v-if、v-for、v-showdom指令 v-if v-for视图 v-show巧用三元运算方法绑定 ‘@’、‘v-on’修饰符数据绑定 ‘:’、‘v-bind’、‘v-model'4. Vue实例对象实例thisvue函数对象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. 状态管理 VueXVueX是什么,为什么要使用VueXVueX的使用mutations、Action7. Ajax请求AXIOS的封装及使用
vue培训记录
March 27, 2019 · 1 min · jiezi