VUE中使用Vue-resource完成交互的案例

小編給大家分享一下VUE中使用Vue-resource完成交互的案例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

Vue的優(yōu)點

Vue具體輕量級框架、簡單易學、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結構的分離、虛擬DOM、運行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗。

具體如下

使用vue-resource

引入vue-resource

vue-resource就像jQuery里的$.ajax，是用來跟后端交互數(shù)據(jù)的，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方法有兩個參數(shù)，第一個參數(shù)是響應成功時的回調函數(shù)，第二個參數(shù)是響應失敗時的回調函數(shù)。

options對象

實例：

GET請求

在下面的實例中，我們做一個求和的功能,效果如下圖：

get方法：

this.$http.get('/someUrl', [options]).then(function(response){  
  // 響應成功回調
}, function(response){  
  // 響應錯誤回調
});

在該實例中，我們準備了一個php文件，該文件主要接收前臺通過get傳過來的參數(shù)，并計算兩個參數(shù)的和，代碼如下：

<?php
  $a=$_GET['a'];
  $b=$_GET['b'];
  echo $a+$b;
?>

html代碼：

<div class="container" id="box" >
  <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是后臺返回的參數(shù)，它包括以下屬性：

 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差不多，只是傳遞的數(shù)據(jù)不一樣。接下來，我們用jsonp來完成一個百度搜索的功能。

1.首先準備一個實例的接口，這個接口是百度的搜索接口（我們可以自己找一些接口作為測試）,如下：

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=show

2.準備布局

<div class="container" id="box" >
      <input type="text" placeholder="請輸入搜索內容" />
      <ul>
        <li >22222</li>
      </ul>
      <p >暫無數(shù)據(jù)...</p>
    </div>

3.功能描述

當我們在搜索框中輸入搜索的內容的時候，下面的列表會顯示出根據(jù)我們輸入的內容聯(lián)想的詞語。按鍵盤的上下鍵，可以上下選擇列表中的詞語，按enter鍵的時候，會執(zhí)行搜索

4.代碼實現(xiàn)

首先我們準備一個myData數(shù)組，存放聯(lián)想的詞語。t1是input框輸入的值，如下

<input type="text" placeholder="請輸入搜索內容" v-model="t1" />

data:{
  myData:[],
  t1:""
}

在搜索框中的輸入內容的時候，執(zhí)行一個方法，這個方法主要用于發(fā)送一個請求，獲取輸入內容的聯(lián)想詞語。

<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í)行到這一步，列表中已經(jīng)可以顯示出我們搜索的聯(lián)想詞語了，如下圖：

下面的我們可以實現(xiàn)，按上下鍵的時候，選擇詞語 

<div class="container" id="box" >
      <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">暫無數(shù)據(jù)...</p>
    </div>

/*data數(shù)據(jù)*/
      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" >
      <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">暫無數(shù)據(jù)...</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中使用Vue-resource完成交互的案例”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！