Vue.js 是什么 vue是一套用于构建用户界面的渐进式框架 ,(对他的理解)Vue被设计为可以自底向上逐层应用。Vue的核心库只关心图层,易上手,也方便与第三方库或既有的项目整合 ● mvvm模型:m:model–数据模型 (data) v:view—视图(dom) vm:viewModel—视图模型(Vue实例) ● node.js:本质上是一个JavaScript的运行环境,方便搭建响应速度快、易于扩展的网络应用,他也有很多的缺点:不适合做CPU密集型应用。只支持单核CPU,不能充分利用。可靠性比较低,一旦代码的某个环节彭亏了,整个系统其实都会崩溃的。 vue.js的两个核心:数据驱动和组件化思想 v-show指令是通过修改元素的display的css属性让其现实和隐藏 v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果
Vue的实例 Vue 的生命周期:就是从开始创建,初始化数据、编译模板挂载DOM->渲染、更新->渲染、销毁等一系列的过程,就是Vue 的生命周期 ● 计算属性的getter和setter参数是不固定的 自定义 组件内的数据data必须是一个函数 data:function(){ return {count:0} } prop的使用方法 当父组件给子组件的prop传递一个值的时候,这个值就变成了子组件实例的一个实例属性 Vue CLI(脚手架) vue CLI 是一个基于Vue.js进行快速开发的一个完整的系统 ● 通过 实现的交互式的项目脚手架 Vue CLI致力于将Vue生态中的工具基础标准化,确保了各种构建工具能够基于智能的默认配置平稳衔接。 Vue 是一个全局安装的npm包,提供了终端里的Vue命令,他可以通过Vue create快速搭建一个新项目。或者乐意直接通过Vue serve构建新想法的原型,你也可以通过Vue ui通过一套图形化界面管理你的所有的项目。 Vue 的双向绑定 Vue实现双向数据绑定的原理就是利用了Object.defineProperty()这个方法重新定义了对象获取属性值(get)设置属性值(set)的操作来实现的 jQuery的知识 jQuery库 可以通过一行简单的标记被添加到网页中 为什么要使用这个呢,目前网络上有大量的开源的JS代码库,但是jQuery是目前最流行的JS代码库,而且提供了大量的扩展。他可以考虑到不同的浏览器的兼容问题,所以他可以兼容于所有的主流浏览器。 jQuery语法是通过选取HTML元素,并对选取的元素执行某些操作 组件的设计原则 (1)页面上的每个独立的可视/可交互的区域视为一个组件(页面的头部,尾部,可复用的区域) (2)每个组件对应一个工程目录,组件所需要的各种资源就在这个目录下就近维护(就近维护体现了前端的工程化思想,为前端开发提供了很好的分治策略)在这个目录下其实是可以找到功能单元所有的内部逻辑 (3)页面是组件的容器,组件可以嵌套自由组合成完整的页面 Vue事件是如何使用event对象的
- 其实各种库、框架多少都有针对event对象进行处理的
如jQuery,对内部进行封装的时候,我们开发无需关注event对象的部分兼容性问题,这样在写阻止冒泡的时候,只需统一写成event.preventDefault() - vue中的event对象
相比于jqery,Vue的事件绑定可以显得更加的直观和便捷。 fetch、axios、ajax的比较 - ajax可以在不更新全局的情况下更新局部页面,通过在与服务器进行数据交换,可以使页面实现异步更新。
ajax的原理是:通过XHR对象来向服务器发起异步请求,从服务器上获得数据,然后用JS来操作DOM更新页面。 通过XMLHttpRequest.open()方法与服务器建立连接。XMLHttpRequest.send()方法中如果Ajax请求是异步的,那么这个方法发送请求后就会返回,如果是同步的,那么请求必须响应后才能返回。 缺点: ● 本是针对MVC架构,不符合前端MVVM的浪潮(补充:MVVM是Model-View-ViewModel的简写。是M-V-VM三部分组成,他是MVC的改进版,是将其中的View的状态和行为抽象化。采用的是双向数据绑定,MVVM的核心就是关注model的变化,让MVVM 框架利用自己的机制自动更新DOM ,所谓的数据-视图分离,数据是不影响视图的。) ● 基于原生的XHR开发 ● 配置和调用的方式混乱。 - axios
axios的原理是:使用 promise 封装的 ajax,他内部有两个拦截器,分别是 request 拦截器和 response 拦截器。 ● 请求拦截器的作用是:在请求发送之前进行一些操作,例如在每个请求上加入taken ● 响应拦截器的作用是:接受到响应后做一些操作,例如登录失效后,重新登录跳转到登录页。 特点: ● 由浏览器发端发起的请求,在浏览器中创建XHR ● 支持promise API ● 监听请求和返回 ● 更好的格式化,自动将数据转换为json数据 ● 安全性更高,可以抵御CSRF的攻击 常用的方法: axios常用的方法有:get,post,put,patch,delete等,其中get和post返回的都是promise对象,可以使用promise方法。 相关的配置: ● URL:用于请求服务器的URL ● method:请求方法,默认为get ● baseURL:会自动加到URL的前面 ● proxy:用于配置代理 ● transformRequest:允许在服务器发送请求之前 修改请求的数据 发送请求拿到数据的一个过程:请求拦截器、发送请求、响应拦截器、响应回调的联系 - fetch
fetch是http请求数据的方式,它使用promise,但是不使用回调函数,fetch采用模块化设计,通过数据流处理数据,对于请求大文件或者网速慢的情况是很有用的,默认的情况下,fetch是不会接收和发送cookies的 优点: ● 采用模块化思想,将输入、输出。状态跟踪分离 ● 基于promise,返回一个promise 缺点: ● 过于底层,有很多的状态码没有进行封装 ● 无法阻断请求 ● 兼容性比较差 ● 无法检测请求进度 4.fetch、ajax、axios的区别 ● 传统的ajax利用的是HMLHttpRequest这个对象,和后端进行交互。而JQury ajax是对原生的XHR的封装,多请求间有嵌套的话,就会出现回调地域的问题 ● axios使用promise封装XHR,解决了回调地域的问题。 ● fetch没有使用XHR,使用的是promise
最后的总结: ● Ajax是一种web数据交互的方式,他可以使页面在不重新加载的情况下请求数据并进行局部更新,它的内部使用了XHR来进行异步请求。 Ajax在使用XHR发起异步请求时得到的是XML格式的数据,如果想要json格式,需要额外的转换;Ajax本身是针对MVC格式的,不符合现在的MVVM框架,ajax有回调地域的问题。Ajax的配置复杂。 ● fetch是HXR的代替品,它基于promise实现的,并且不使用回调函数,他是采用的模块化结构设计,使用数据流进行传输,对于大文件和网速慢的情况是非常友好的,但是fetch不会对请求和响应进行监听;不能阻断请求。对于底层,对一些代码是没有封装的;他的兼容型也是很差的。 ● axios是基于promise对XHR进行封装,他的内部有两个拦截器。axios可以对请求和响应进行监听,返回promise对象,可以使用promise的API;返回JSON 格式的数据,由浏览器发起的请求,安全性更高,可以抵御CSRF的攻击。 XHR:全称为XMLHttpRequest,用于与服务器交互数据。是ajax功能所依赖的对象、jQuery中的ajax就是对XHR的封装。
同步请求和异步请求 浏览器发送请求给服务器,有同步和异步两种方式。
- 同步请求
在发送一个请求之后,需要等待服务器响应返回,这样才能发送下一个请求。 - 异步请求
在发送一个请求之后,不需要等待接收方发回响应,接着可以发送走一个请求。 同步:如果使用这服务运行的过程中阻塞时崩溃了,当他重新启动的时候,将无法重新连接到正在进行的调用,所以响应丢失。 异步:如果使用者在as请求之后等待响应时崩溃了,当他重新启动时,可以继续等待响应,所以响应市场不会丢失的。 数据的输入、处
|