1.学习框架可以主要解决的问题是:高效的将服务器数据渲染到客户端,将用户填写数据高效的反应到视图上。
-
前端框架时间
- backbone angular1.0 2010
- React 2013
- vue1.0 2014
- vue2.0 2016
- es6 2016
- 微信小程序 2016
- angular 2016
- vue3.0 2019
- 2020年第一个季度开始全面使用
-
Vue的认识
- vue 1.0 2014
- VUE 2.0 2016年
- VUE属于轻量级的js框架
- MVVM-前端开发
- 个人开发项目
- 作者:尤雨溪
- 使用了VDOM(虚拟DOM)
- 双向数据绑定:vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
- jsx语法:JSX就是Javascript和XML结合的一种格式。React发明了JSX,利用HTML语法来创建虚拟DOM。当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析.
-
Vue构成
- 指令 - 操作VDOM(操作虚拟DOM)
- 组件系统 - 项目模块化
-
Vue基础
- 指令
- 哪些指令?这个指令的作用 v-if v-for v-model v-bind v-on v-html v-text v-pre(跳过这个元素和它的子元素的编译过程。) v-cloak(是解决屏幕闪动的好方法。) v-else v-else-if
- 如何自定义指令
- 全局定义 Vue.directive()
- 局部定义 directives 选项
- 自定义指令的钩子函数
- bind:只调用一次,指令第一次绑定到元素时候调用,用这个钩子可以定义一个绑定时执行一次的初始化动作。
- inserted: 被绑定的元素插入父节点的时候调用(父节点存在即可调用,不必存在document中)
- update:被绑定与元素所在模板更新时调用,而且无论绑定值是否有变化,通过比较更新前后的绑定值,忽略不必要的模板更新
- componentUpdate :被绑定的元素所在模板完成一次更新更新周期的时候调用
- unbind : 只调用一次,指令月元素解绑的时候调用
- Vue深入响应式原理
- Vue数据请求
- vue1.0 - vue-resource
- Vue2.0 - axios / fetch 的区别
-axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封 装,只不过它是Promise的实现版本,符合最新的ES规范,它本身具有以下特征:
1.从浏览器中创建 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口(重要,方便了很多的操作)
5.从 node.js 创建 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据
-fetch的优势主要优势就是:
- 指令
-
语法简洁,更加语义化
-
基于标准 Promise 实现,支持 async/await
-
同构方便,使用 isomorphic-fetch
4.更加底层,提供的API丰富(request, response)
5.脱离了XHR,是ES规范里新的实现方式
-
Vue计算属性
- computed
- 有条件
- 可以在template模板中想全局变量一样使用
- computed
-
Vue侦听属性
- watch
- 异步数据请求
- watch
-
Vue方法
- methods
- 事件处理程序
- methods
-
组件 - 组件是vue的扩展功能 Vue.extend()
- 定义组件
- 全局: Vue.component(组件名称,组件的选项)
- 局部: components选项
- 定义组件
-
is属性 和 动态组件 - 缓存组件
- component
- keep-alive
-
异步组件
-
组件通信
- 父子组件通信 props选项
- 子父组件通信 自定义事件 $emit
- 非父子组件同行
- ref
- bus事件总线
- vue-router
- vuex
-
vue生命周期
- 11个8个常用
- beforeCreate 创建之前
- created 创建 - vdom
- beforeMount 挂载之前
- mounted 挂载 - 数据请求 - 真实dom - 第三方库实例化
- beforeUpdate 更新之前 - vdom生成 - 通过diff比对生成patch补丁对象
- updated 更新 - 真实dom
- beforeDestory 销毁之前 - 调用条件: 开关 / $destory()会删除组件,但是组件dom外壳会遗留,需要手动删除
- destoryed 销毁
- 11个8个常用
-
vue-router
- 路由使用步骤
- 导航守卫
- 路由鉴权
- 路由拦截
- 数据预载
- 路由模式
- hash - 传统浏览器 - hashchange事件
- history - HTML5 - pop
- abstrict - 服务端
-
vuex
- 做什么的
- vuex的作用
- vuex使用流程
- vuex辅助工具
- vuex数据分片使用流程
- 前端异步处理
- 传统
- 回调函数
- 事件
- 封装
- promise
- async await
- generator函数
- 模块化
- 传统