VUE中使用Vue-resource完成交互
更新時間：2017年07月21日 11:00:41 作者：小之
本篇文章主要介紹了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);
在發(fā)送請求后，使用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代碼：
<div 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()"/> </div>
<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.準備布局
<div class="container" id="box" style="margin-top:100px">
<input type="text" placeholder="請輸入搜索內容" />
<ul>
<li >22222</li>
</ul>
<p >暫無數據...</p>
</div>
3.功能描述
當我們在搜索框中輸入搜索的內容的時候，下面的列表會顯示出根據我們輸入的內容聯想的詞語。按鍵盤的上下鍵，可以上下選擇列表中的詞語，按enter鍵的時候，會執(zhí)行搜索
4.代碼實現
首先我們準備一個myData數組，存放聯想的詞語。t1是input框輸入的值，如下
<input type="text" placeholder="請輸入搜索內容" v-model="t1" />
data:{
myData:[],
t1:""
}
在搜索框中的輸入內容的時候，執(zhí)行一個方法，這個方法主要用于發(fā)送一個請求，獲取輸入內容的聯想詞語。
<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)
}
)
}
}
執(zhí)行到這一步，列表中已經可以顯示出我們搜索的聯想詞語了，如下圖：
下面的我們可以實現，按上下鍵的時候，選擇詞語
<div 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>
</div>
/*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];
}
完整代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>初識vue</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" />
<style type="text/css">
.gray{
background-color: gray;
}
</style>
</head>
<body>
<div 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>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-resource.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//
new Vue({
el:"#box",
data:{
myData:[],
t1:"",
now:-1
},
methods:{
search:function(ev){
if(ev.keyCode==38 || ev.keyCode==40)return;
if(ev.keyCode==13){
window.open('https://www.baidu.com/s?wd='+this.t1);
this.t1='';
}
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)
}
)
},
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];
}
}
})
</script>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本篇文章主要介紹了詳解Vue組件之間的數據通信實例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了Vue3 實現雙盒子定位Overlay的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
Cookbook組件形式：優(yōu)化 Vue 組件的運行時性能
本文仿照Vue Cookbook 組織形式，對優(yōu)化 Vue 組件的運行時性能進行闡述。通過基本的示例代碼給大家講解，需要的朋友參考下2018-11-11
vue watch監(jiān)聽取不到this指向的數問題
這篇文章主要介紹了vue watch監(jiān)聽取不到this指向的數問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-09-09
斗魚直播是比較火的直播視頻，想必大家都看過吧。這篇文章主要介紹了Vue-cli-webpack搭建斗魚直播步驟詳解,需要的朋友可以參考下2017-11-11
下面小編就為大家分享一篇vue獲取當前激活路由的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
詳解vue-cli4 配置不同開發(fā)環(huán)境打包命令
這篇文章主要介紹了vue-cli4 配置不同開發(fā)環(huán)境打包命令,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
這篇文章主要為大家介紹了VueJs中customRef函數使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
開發(fā)項目的時候,用到文件上傳的功能很常見,包括單文件上傳和多文件上傳,下面這篇文章主要給大家介紹了關于vue3+koa實現文件上傳功能的相關資料,需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細介紹了在vue項目中如何使用emoji表情,包括font-awesome圖標,v-emoji-picker,vue-emoji等emoji表情庫,需要的可以參考下2025-03-03