vue 的双向绑定是怎么实现的?
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。
案列:当我们使用vue初始化初始化数据上的对象并且打印出来会是什么样子?
var vm = new Vue({
data: {
obj: {
a: 1
}
},
created: function () {
console.log(this.obj);
}
});
我们可以看到属性a有两个相对应的get和set方法,为什么会多出这两个方法呢?因为vue是通过Object.defineProperty()
来实现数据劫持的。
vue-router
前端路由:
优点:用户体验好,不需要每次都次服务器中全部获取,快速展现给用户
缺点:
- 不利于SEO
- 每次前进后退,都会重新发起请求
- 单页面无法记住之前滚动的位置
构建SPA
<router-link></router-link> 或者this。$router.push({path:""})
<router-view></router-view>
vue-resource
https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
异步通信,发起数据请求
vue-resource插件具有以下特点:
- 体积小
vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远比jQuery的体积要小得多。
支持主流的浏览器 - 和Vue.js一样,vue-resource除了不支持IE 9以下的浏览器,其他主流的浏览器都支持。
支持Promise API和URI Templates - Promise是ES6的特性,Promise的中文含义为“先知”,Promise对象用于异步计算。
URI Templates表示URI模板,有些类似于ASP.NET MVC的路由模板。 - 支持拦截器
拦截器是全局的,拦截器可以在请求发送前和发送请求后做一些处理。
拦截器在一些场景下会非常有用,比如请求发送前在headers中设置access_token,或者在请求失败时,提供共通的处理方式。
var vm =new Vue();
//get 用then处理响应内容
vm.$http.get(url).then(respconsole.log();onse =>{
console.log(respconsole);
}.then(reject=>{
console.log(respconsole);
}));
//post
vm.$http.get(url,{
data:'发起post请求'
}).then(respconsole.log();onse =>{
console.log(respconsole);
}.then(reject=>{
console.log(respconsole);
}));
axios
https://github.com/axios/axios
https://www.cnblogs.com/peachmeimei/p/8916098.html
异步通信,发起数据请求
vue2.0之后,就不再对vue-resource更新,而是推荐使用axios。基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 Node.js 中使用。
功能特性
1、在浏览器中发送 XMLHttpRequests 请求
2、在 node.js 中发送 http请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求和响应数据
6、取消请求
7、自动转换 JSON 数据
8、客户端支持保护安全免受 CSRF/XSRF 攻击
安装 axios
$ npm install axios
在要使用的文件中引入axios
import axios from ‘axios’
GET请求