一：概述
1.说明
https://github.com/pagekit/vue-resource
2.使用方法
Vue.http.get('/someUrl', [config]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);
// in a Vue instance
this.$http.get('/someUrl', [config]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);
二：示例
1.添加包
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <script src="./lib/vue-2.4.0.js"></script> 10 <!-- 注意：vue-resource 依赖于 Vue，所以先后顺序要注意 --> 11 <!-- this.$http.jsonp --> 12 <script src="./lib/vue-resource-1.3.4.js"></script> 13 </head> 14 15 <body> 16 <div id="app"> 17 <input type="button" value="get请求" @click="getInfo"> 18 <input type="button" value="post请求" @click="postInfo"> 19 <input type="button" value="jsonp请求" @click="jsonpInfo"> 20 </div> 21 22 <script> 23 24 // 创建 Vue 实例，得到 ViewModel 25 var vm = new Vue({ 26 port: 8082, 27 el: '#app', 28 data: {}, 29 methods: { 30 getInfo() { // 发起get请求 31 // 当发起get请求之后， 通过 .then 来设置成功的回调函数 32 this.$http.get('http://localhost:8090/hello').then(function (result) { 33 // 通过 result.body 拿到服务器返回的成功的数据 34 console.log(result.body) 35 }) 36 }, 37 postInfo() { // 发起 post 请求 application/x-wwww-form-urlencoded 38 // 手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了 39 // 通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式 40 this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => { 41 console.log(result.body) 42 }) 43 }, 44 jsonpInfo() { // 发起JSONP 请求 45 this.$http.jsonp('http://localhost:8090/hello').then(function(result){ 46 console.log(result) 47 console.log(result.body) 48 }) 49 } 50 } 51 }); 52 </script> 53 </body> 54 55 </html>