作为前端人员，在开发过程中，我们大多数情况都需要从后台请求数据，那么在vue中怎样从后台获取数据呢？接下来，我简单介绍一下vue-resource的使用方法，希望对大家有帮助。
一、下载vue-resource
1、npm install vue-resource --save -dev
2、github: https://github.com/pagekit/vue-resource
两种方式都可以下载，根据自己喜好进行选择。
二、引入文件
引入vue.js和vue-resource.js，注意先后顺序，先引vue.js。记住所有vue插件都需要在vue.js之后加载。
三、使用
我今天写了一个小demo，比较简单。
1.HTML
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue-resource请求数据</title> 6 <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css"> 7 <script src="../../node_modules/jquery/dist/jquery.js"></script> 8 <script src="../../node_modules/bootstrap/dist/js/bootstrap.js"></script> 9 <script src="../../node_modules/vue/dist/vue.js"></script> 10 <script src="../../node_modules/vue-resource/dist/vue-resource.js"></script> 11 12 </head> 13 <body> 14 <div class="row" id="paper" style="padding: 20px"> 15 <div class="col-lg-12 col-sm-12 col-xs-12"> 16 <div class="widget radius-bordered"> 17 <div class="widget-header bordered-bottom bordered-themeprimary"> 18 <span class="widget-caption">票据信息列表</span> 19 </div> 20 <div class="widget-body"> 21 <div class="query-form"> 22 <div class="row"> 23 <div class="form-group col-md-3"> 24 <input type="text" v-model="paperId"> 25 <div class="horizontal-space"></div> 26 </div> 27 28 <div class=" form-group col-md-1"> 29 <button @click="search()" type="button" class="btn btn-primary shiny">查询</button> 30 <div class="horizontal-space"></div> 31 </div> 32 </div> 33 </div> 34 <div class="row"> 35 <table class="table table-bordered table-hover"> 36 <thead> 37 <tr> 38 <th>票据ID</th> 39 <th>分店</th> 40 <th>合作商</th> 41 <th>票据类型</th> 42 <th>票据编码</th> 43 <th>票据金额</th> 44 </tr> 45 </thead> 46 47 <tbody> 48 <tr v-for="row in paperlist"> 49 <td>{{row.paperId}}</td> 50 <td>{{row.storeId}}</td> 51 <td>{{row.partnerId}}</td> 52 <td>{{row.paperClsNo}}</td> 53 <td>{{row.paperCode}}</td> 54 <td>{{row.paperAmt}}</td> 55 </tr> 56 </tbody> 57 </table> 58 </div> 59 60 61 </div> 62 </div> 63 </div> 64 </div> 65 66 </body>
2.js
所有在页面上绑定的数据都需要在data中声明，否则报错。
1 <script> 2 var vm = new Vue({ 3 el: '#paper', 4 data: { 5 paperId: '', 6 paperlist: [] 7 }, 8 mounted:function() { //钩子函数 9 this.get(); 10 }, 11 methods: { 12 get: function(){ 13 this.$http.get('data1.json', { 14 paperId: this.paperId 15 }).then( 16 function(res){ 17 this.paperlist = res.data; 18 console.log(this.paperlist); 19 },function(res){ 20 console.log(res.status); 21 }) 22 }, 23 24 search: function(){ 25 this.get(); 26 } 27 28 } 29 }) 30 </script>
3.相关知识点
(1)钩子函数
钩子函数是Windows消息处理机制的一部分，通过设置“钩子”，应用程序可以在系统级对所有消息、事件进行过滤，访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序，通过系统调用，把它挂入系统。（百度百科）
对于前端来说，钩子函数就是指再所有函数执行前，我先执行了的函数，即 钩住 我感兴趣的函数，只要它执行，我就先执行。
el被新创建的 vm.el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.el 也在文档内
该钩子在服务器端渲染期间不被调用。
(2)vue-resource 提供的便捷方法：
-
get(url, [data], [options]);
-
post(url, [data], [options]);
-
put(url, [data], [options]);
-
patch(url, [data], [options]);
-
delete(url, [data], [options]);
-
jsonp(url, [data], [options]);
都是接受三个参数：
-
url（字符串），请求地址。可被options对象中url属性覆盖。
-
data（可选，字符串或对象），要发送的数据，可被options对象中的data属性覆盖。
-
options 请求选项对象
便捷方法的POST请求：
1 this.$http.post( 2 'http://example.com', 3 // 请求体重发送数据给服务端 4 { 5 cat: 1, 6 name: 'newBook' 7 },{ 8 'headers': { 9 'Content-Type': 'x-www-form-urlencoded' 10 } 11 }).then(function () { 12 // 成功回调 13 }, function () { 14 // 失败回调 15 });
请求选项对象
option对象的各属性及含义
| 参数 | 类型 | 描述 |
|---|---|---|
| url | string | 请求的URL |
| method | string | 请求的HTTP方法，例如：'GET', 'POST'或其他HTTP方法 |
| body | Object,FormDatastring | request body |
| params | Object | 请求的URL参数对象 |
| headers | Object | request header |
| timeout | number | 单位为毫秒的请求超时时间 (0 表示无超时时间) |
| before | function(request) | 请求发送前的处理函数，类似于jQuery的beforeSend函数 |
| progress | function(event) | ProgressEvent回调处理函数 |
| credentials | boolean | 表示跨域请求时是否需要使用凭证 |
| emulateHTTP | boolean | 发送PUT, PATCH, DELETE请求时以HTTP |
| emulateJSON | boolean | 将request body以application/x-www-form-urlencoded content type发送 |
