Resource插件简介javascript
Vue.js的插件提供了使用XMLHttpRequest或JSONP 进行Web请求和处理响应的服务html
单来讲，vue-resource就像jQuery里的$.ajax，用来进行数据交互vue
Vue-resource的特色java
1.体积小 node
vue-resource很是小巧，在压缩之后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。ios
2.支持主流浏览器ajax
和Vue.js同样，vue-resour ce除了不支持IE 9如下的浏览器，其余主流的浏览器都支持。vue-router
3.支持Promise API和URI Templates(了解)npm
Promise是ES6的特性，Promise的中文含义为“先知”，Promise对象用于异步计算。json
URI Templates表示URI模板，有些相似于ASP.NET MVC的路由模板。
4.支持拦截器
拦截器是全局的，拦截器能够在请求发送前和发送请求后作一些处理。
Vue-ressource的安装
基本使用
1.基于全局Vue对象使用http
<script src="https://cdn.jsdelivr.net/vue.resource/1.2.1/vue-resource.min.js"></script> < script src = "https://cdn.jsdelivr.net/vue.resource/1.3.1/vue-resource.min.js" > </ script >
2.在一个Vue实例内使用$http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
选项options
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback); this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
url:发送请求的URL
body:做为请求主体发送的数据
headers:标题对象做为HTTP请求表头发送
params:做为url参数发送的参数对象
$http方式数据请求
get
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.2.1/vue-resource.min.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="sendGet()">发送get请求</button>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: "#app",
methods: {
sendGet: function() {
//这里的this指代的是 vm对象
var url = "http://127.0.0.1:3000/login?username=admin&password=123";
this.$http.get(url).then(function(res) {
console.log(res.data)
},function(err){
console.log(err)
})
}
}
})
</script>
post
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.2.1/vue-resource.min.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="sendPost()">发送post请求</button>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: "#app",
methods: {
sendPost: function() {
//这里的this指代的是 vm对象
var url = "http://127.0.0.1:3000/postLogin";
/**
* vue的post参数:若是是普通的post请求,最后一个就是{emulateJSON:true}
*
* 参数一:url
*
* 参数二:data-要传递的数据-对象的形式
*
* 参数三:若是是普通的post请求,最后一个就是{emulateJSON:true}
*
* */
this.$http.post(url, {
username: 'lisi',
password: 'lisi'
}, {
emulateJSON: true
}).then(function(res) {
console.log(res.data)
})
}
}
})
</script>
jsonp
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.2.1/vue-resource.min.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="sendPost()">发送post请求</button>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: "#app",
methods: {
sendPost: function() {
//这里的this指代的是 vm对象
var url = "http://127.0.0.1:3000/postLogin";
/**
* vue的post参数:若是是普通的post请求,最后一个就是{emulateJSON:true}
*
* 参数一:url
*
* 参数二:data-要传递的数据-对象的形式
*
* 参数三:若是是普通的post请求,最后一个就是{emulateJSON:true}
*
* */
this.$http.post(url, {
username: 'lisi',
password: 'lisi'
}, {
emulateJSON: true
}).then(function(res) {
console.log(res.data)
})
}
}
})
</script>
axios具体用来作什么
axios的基本使用&安装
使用npm安装并引入
从浏览器中建立XMLHttpRequests 让HTTP从node.js的请求 支持Promise API 截取请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防范XSRF
使用cdnnpm install axiso
<script src='https://unpkg.com/axios/dist/axios.min.js'> </script>