作为前端人员，在开发过程中，我们大多数情况都需要从后台请求数据，那么在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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-resource请求数据</title>
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="../../node_modules/jquery/dist/jquery.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script src="../../node_modules/vue-resource/dist/vue-resource.js"></script>
</head>
<body>
<div class="row" id="paper" style="padding: 20px">
<div class="col-lg-12 col-sm-12 col-xs-12">
<div class="widget radius-bordered">
<div class="widget-header bordered-bottom bordered-themeprimary">
<span class="widget-caption">票据信息列表</span>
</div>
<div class="widget-body">
<div class="query-form">
<div class="row">
<div class="form-group col-md-3">
<input type="text" v-model="paperId">
<div class="horizontal-space"></div>
</div>
<div class=" form-group col-md-1">
<button @click="search()" type="button" class="btn btn-primary shiny">查询</button>
<div class="horizontal-space"></div>
</div>
</div>
</div>
<div class="row">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>票据ID</th>
<th>分店</th>
<th>合作商</th>
<th>票据类型</th>
<th>票据编码</th>
<th>票据金额</th>
</tr>
</thead>
<tbody>
<tr v-for="row in paperlist">
<td>{{row.paperId}}</td>
<td>{{row.storeId}}</td>
<td>{{row.partnerId}}</td>
<td>{{row.paperClsNo}}</td>
<td>{{row.paperCode}}</td>
<td>{{row.paperAmt}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
2.js
所有在页面上绑定的数据都需要在data中声明，否则报错。
<script>
var vm = new Vue({
el: '#paper',
data: {
paperId: '',
paperlist: []
},
mounted:function() { //钩子函数
this.get();
},
methods: {
get: function(){
this.$http.get('data1.json', {
paperId: this.paperId
}).then(
function(res){
this.paperlist = res.data;
console.log(this.paperlist);
},function(res){
console.log(res.status);
})
},
search: function(){
this.get();
}
}
})
</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请求：
this.$http.post(
'http://example.com',
// 请求体重发送数据给服务端
{
cat: 1,
name: 'newBook'
},{
'headers': {
'Content-Type': 'x-www-form-urlencoded'
}
}).then(function () {
// 成功回调
}, function () {
// 失败回调
});
请求选项对象
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发送 |
