本篇文章主要介紹了VUE中使用Vue-resource完成交互，內容挺不錯的，現在分享給大家，也給大家做個參考。
本文介紹了VUE中使用Vue-resource完成交互，分享給大家，如下
使用vue-resource
##引入vue-resource
vue-resource就像jQuery裡的$.ajax，是用來跟後端互動資料的，vue-resource是vue的插件，所以我們在開始使用vue之前，需要先介紹vue-resource.js這個檔案
<script src='js/vue.js'></script>
<script src='js/vue-resource.js'></script>
登入後複製
基本語法
// 基于全局Vue对象使用http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
// 在一个Vue实例内使用$http
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
登入後複製
在發送請求後，使用then方法來處理回應結果，then方法有兩個參數，第一個參數是回應成功時的回呼函數，第二個參數是回應失敗時的回呼函數。
options物件
實例：
GET請求
在下面的實例中，我們做一個求和的功能,效果如下圖：
get方法：
this.$http.get('/someUrl', [options]).then(function(response){
// 响应成功回调
}, function(response){
// 响应错误回调
});登入後複製
在這個實例中，我們準備了一個php文件，該文件主要接收前台透過get傳過來的參數，並計算兩個參數的和，程式碼如下：
<?php
$a=$_GET['a'];
$b=$_GET['b'];
echo $a+$b;
?>
登入後複製
html程式碼：
<p class="container" id="box" style="margin-top:100px">
<input type="text" name="" id="" v-model="a" />+
<input type="text" name="" id="" v-model="b" />
=
<input type="button" value="求和" class="btn btn-info" @click="add()"/>
</p>
登入後複製
#
<script type="text/javascript">
new Vue({
el:"#box",
data:{
a:"",
b:""
},
methods:{
add:function(){
this.$http.get("get.php",{
"a":this.a,
"b":this.b
}).then(function(response){
alert(response.data)
},function(response){
alert(response.status)
}
)
}
}
})
</script>登入後複製
說明：response是後台傳回的參數，它包含以下屬性：
POST請求
#
<?php
$a=$_POST['a'];
$b=$_POST['b'];
echo $a+$b;
?>
登入後複製
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.準備佈局
<p class="container" id="box" style="margin-top:100px">
<input type="text" placeholder="请输入搜索内容" />
<ul>
<li >22222</li>
</ul>
<p >暂无数据...</p>
</p>登入後複製
##
<input type="text" placeholder="请输入搜索内容" v-model="t1" />
登入後複製
##
data:{
myData:[],
t1:""
}登入後複製
##
<input type="text" placeholder="请输入搜索内容" v-model="t1" @keyup="search()"/>
登入後複製
##
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)
}
)
}
}登入後複製
##
<p class="container" id="box" style="margin-top:100px">
<input type="text" v-model="t1" @keyup="search($event)" @keydown.down.prevent="changeDown($event)" @keydown.up.prevent="changeup()"/>
<ul>
<li v-for="(value, index) in myData" :class="{gray:index==now}">{{value}}</li>
</ul>
<p v-show="myData.length==0">暂无数据...</p>
</p>登入後複製
##
/*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];
}登入後複製
##
初识vue
<p class="container" id="box" style="margin-top:100px">
<input type="text" v-model="t1" @keyup="search($event)" @keydown.down.prevent="changeDown($event)" @keydown.up.prevent="changeup()"/>
<ul>
<li v-for="(value, index) in myData" :class="{gray:index==now}">{{value}}</li>
</ul>
<p v-show="myData.length==0">暂无数据...</p>
</p>
登入後複製
##rrreee
##.功能描述
當我們在搜尋框中輸入搜尋的內容的時候，下面的清單會顯示出根據我們輸入的內容聯想的詞語。按鍵盤的上下鍵，可以上下選擇列表中的詞語，按enter鍵的時候，會執行搜尋
4.代碼實現
首先我們準備一個myData數組，存放聯想的詞語。 t1是input框輸入的值，如下
rrreee
#######rrreee#########在搜尋框中的輸入內容的時候，執行一個方法，這個方法主要用於發送一個請求，獲取輸入內容的聯想詞語。 #########rrreee############rrreee##########執行到這一步，清單中已經可以顯示出我們搜尋的聯想詞語了，如下圖：###############下面的我們可以實現，按上下鍵的時候，選擇字詞 #########rrreee######## ####rrreee#########完整程式碼：#########rrreee#########以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！ ######相關推薦：#########vue 實作剪裁圖片並上傳伺服器的功能介紹###############Vue 實作雙向綁定的方法###########################
以上是在VUE中如何使用Vue-resource完成交互的詳細內容。更多資訊請關注PHP中文網其他相關文章！
