本文介绍了VUE中使用Vue-resource完成交互，分享给大家，具体如下
使用vue-resource
引入vue-resource
vue-resource就像jQuery里的$.ajax，是用来跟后端交互数据的，vue-resource是vue的一个插件，所以我们在开始使用vue之前，需要先引入vue-resource.js这个文件
rush:js;">
基本语法
rush:js;">
// 基于全局Vue对象使用http
Vue.http.get('/someUrl',[options]).then(successCallback,errorCallback);
Vue.http.post('/someUrl',[body],errorCallback);
// 在一个Vue实例内使用$http
this.$http.get('/someUrl',errorCallback);
this.$http.post('/someUrl',errorCallback);
在发送请求后，使用then方法来处理响应结果，then方法有两个参数，第一个参数是响应成功时的回调函数，第二个参数是响应失败时的回调函数。
options对象
实例：
GET请求
在下面的实例中，我们做一个求和的功能,效果如下图：
get方法：
rush:js;">
this.$http.get('/someUrl',[options]).then(function(response){
// 响应成功回调
},function(response){
// 响应
错误回调
});
在该实例中，我们准备了一个PHP文件，该文件主要接收前台通过get传过来的参数，并计算两个参数的和，代码如下：
HTML代码：
rush:xhtml;">
Box" style="margin-top:100px">
+
=
rush:js;">
说明：response是后台返回的参数，它包括以下属性：
POST请求
rush:js;">
new Vue({
el:"#
Box",data:{
a:"",b:""
},methods:{
add:function(){
this.$http.post("post.
PHP",{
"a":this.a,"b":this.b
},{
emulateJSON:true //POST请求需要将emulateJSON设置为true
}).then(function(response){
alert(response.data)
},function(response){
alert(response.status)
}
)
}
}
})
JSONP
jsonp的语法跟get，post差不多，只是传递的数据不一样。接下来，我们用jsonp来完成一个百度搜索的功能。
1.首先准备一个实例的接口，这个接口是百度的搜索接口（我们可以自己找一些接口作为测试）,如下：
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=show
2.准备布局
3.功能描述
当我们在搜索框中输入搜索的内容的时候，下面的列表会显示出根据我们输入的内容联想的词语。按键盘的上下键，可以上下选择列表中的词语，按enter键的时候，会执行搜索
4.代码实现
首先我们准备一个myData数组，存放联想的词语。t1是input框输入的值，如下
rush:xhtml;">
rush:js;">
data:{
myData:[],t1:""
}
在搜索框中的输入内容的时候，执行一个方法，这个方法主要用于发送一个请求，获取输入内容的联想词语。
rush:xhtml;">
搜索
内容" v-model="t1" @keyup="search()"/>
rush:js;">
methods:{
search:function(ev){this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
"wd":this.t1
},{
jsonp:"cb" //callback名字，
默认是callback
}).then(function(response){
this.myData=response.data.s
},function(response){
alert(response.status)
}
)
}
}
执行到这一步，列表中已经可以显示出我们搜索的联想词语了，如下图：
下面的我们可以实现，按上下键的时候，选择词语
rush:js;">
/*data数据*/
data:{
myData:[],t1:"",
Now:-1
}
/*上下键的
方法*/
changeDown:function(){
this.
Now++;
if(this.
Now==this.myData.length){
this.
Now=-1;
}
this.t1=this.myData[this.
Now];
},changeup:function(){
this.
Now--;
if(this.
Now==-2){
this.
Now=this.myData.length-1;
}
this.t1=this.myData[this.
Now];
}
完整代码：
rush:xhtml;">
<
Meta charset="UTF-8">
初识vue
