原文出处：http://mp.toutiao.com/preview_article/?pgc_id=6530408768281248260
今天要分享的技术是关于Vue 数据交互之Http的使用。这里需要通过一个例子来说明，页面上有三个按钮，点击后发送请求，并将数据返回显示在页面中，如下图：
测试的效果图
一、准备工作
在 Vue 中使用数据交互需要引入vue-resource.js 文件，本身Vue.js 是不具备交互框架的。
1. 首先要下载vue-resource.js文件，并将文件保存至目录lib\vue 下，与vue.js 同级，方便管理。 文件下载地址：https://cdn.jsdelivr.net/npm/vue-resource ,右击另存为即可保存。
2. 准备html代码框架，并引入相关文件，如下图1-1-1：
图1-1-1
二、准备编写代码
数据请求有三种方式：Get、Post、Jsonp 下面通过例子具体说明。
- 编写html 代码，准备好三个按钮事件，代码如下图1-1-2：
图1-1-2
2. 编写Vue 代码及事件方法，如图1-1-3
图1-1-3
3. 实现请求交互
(1) Get 请求方法的实现，如图1-1-4：
图1-1-4
注： 使用方法为：
(1) this.$http.get/post/jsonp(#请求URL#,参数，额外属性).then(“#成功方法实现#”，“#失败方法实现#”);
(2) 上图方法中的successData 存放的是请求成功后所返回的数据，而errorData是指请求失败后所返回的数据。 且名字可以自定义。
(3) successData.data 指获取successData 中的data 值，而successData.status 指获取请求响应的状态码（404指找不到页面、500指服务器异常响应失败、200指请求响应成功）。
(4) "请求的URL" 可以是网址，也可以是文件，只要能访问并有数据返回就行。
(2) Post 请求方法的实现，如图1-1-5：
图1-1-5
注：
(1) 在同级页面下新建 testlogin.php文件， 代码如下图1-1-6
图1-1-6
(2) 由于是php 页面，所以需要php 运行环境，可以百度搜索。
(3) Jsonp 请求方法的实现，如图1-1-7：
图1-1-7
注：
(1) 使用 jsonp 请求数据接口，前提必须要服务接口支持，否则将无法正常获取数据。
(2) 淘宝数据接口请求成功后，数据格式如下：
JSON数据结果
(3) JSON.parse 指解析JSON数据.
三、完整代码如下：
<html>
<head>
<title> 测试Vue 交互例子 </title>
<meta charset="utf-8"/>
<script src="lib/vue/vue.js" type="text/javascript" charset="utf-8"> </script>
<script src="lib/vue/vue-resource.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function (){
new Vue({ // 实例化Vue 对象
el:"#box",
data:{
resultMsgByGet:"", // 显示Get方式请求的结果
resultMsgByPost:"", // 显示Post 方式请求的结果
taoBaoData:[] // 定义一个数组，存放数据请求结果的集合
},
// 声明请求方法
methods:{
requestByGet: function (){
console.log("==========requestByGet==========")
this.$http.get("test.txt").then(function (successData){
this.resultMsgByGet = successData.data+"=======请求响应码是"+successData.status;
},function (errorData){
console.log("=====errorData==="+errorData)
});
},
requestByPost: function (){
console.log("==========requestByPost==========")
var baseUrl = "testlogin.php";// POST请求PHP 页面
var params = { // 请求数据
username:"小明",
userpass:"123456"
};
var otherParam = {
emulateJSON:true // 告诉服务器数据参数类型以JSON 传递接收。
};
this.$http.post(baseUrl,params,otherParam).then(function (successData){
this.resultMsgByPost = successData.data+"=======请求响应码是"+successData.status;
},function (errorData){
console.log("=====失败=====requestByPost=========="+errorData)
});
},
requestByJsonp: function (){
console.log("==========requestByJsonp==========")
var baseUrl = "https://suggest.taobao.com/sug?code=utf-8&q=%E5%8D%AB%E8%A1%A3&callback=cb"
this.$http.jsonp(baseUrl).then(function(myData){
// 解析JSON数据
var myObj = JSON.parse(myData.bodyText);
var tempD= myObj.result;
console.log(tempD)
var tempC = [];
tempD.forEach(function(item){ // 遍历数据集合，取出数据，放入临时数组tempC
console.log();
tempC.push(item[0]);
});
this.taoBaoData = tempC;
},function(errorData){
console.log("==========errorData==========") //请求失败
})
}
}
})
}
</script>
</head>
<body>
<div id="box">
<h2> Vue 请求的方式</h2>
<ul>
<li> Get 请求 </li>
<li> Post 请求 </li>
<li> Jsonp 请求 </li>
</ul>
<input type="button" value="Get请求" @click="requestByGet()" />
<input type="button" value="Post请求" @click="requestByPost()" />
<input type="button" value="Jsonp请求" @click="requestByJsonp()" />
<p> Get 请求文件返回的结果是：{{resultMsgByGet}} </p>
<p> Post 请求PHP页面返回的结果是：{{resultMsgByPost}} </p>
<p> Jsonp 请求淘宝网页搜索数据返回的结果是： </p>
<ul>
<li v-for="item in taoBaoData">
<span>{{item}}</span>
</li>
</ul>
</div>
</body>
</html>
每天进步一点点，人生迈出一大步！
注： 本文章仅限于对自己学习技术的总结，方便自己能力的提高，写得不好的地方请多谅解。
