Vue中的vue-resource示例詳解

vue-resource特點(diǎn)

我們提供的服務(wù)有：成都做網(wǎng)站、成都網(wǎng)站制作、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、渝水ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的渝水網(wǎng)站制作公司

vue-resource插件具有以下特點(diǎn)：

1. 體積小 vue-resource非常小巧，在壓縮以后只有大約12KB，服務(wù)端啟用gzip壓縮后只有4.5KB大小，這遠(yuǎn)比jQuery的體積要小得多。

2. 支持主流的瀏覽器 和Vue.js一樣，vue-resource除了不支持IE 9以下的瀏覽器，其他主流的瀏覽器都支持。

3. 支持Promise API和URI Templates Promise是ES6的特性，Promise的中文含義為“先知”，Promise對(duì)象用于異步計(jì)算。 URI Templates表示URI模板，有些類似于ASP.NET MVC的路由模板。

4. 支持?jǐn)r截器 攔截器是全局的，攔截器可以在請(qǐng)求發(fā)送前和發(fā)送請(qǐng)求后做一些處理。攔截器在一些場(chǎng)景下會(huì)非常有用，比如請(qǐng)求發(fā)送前在headers中設(shè)置access_token，或者在請(qǐng)求失敗時(shí)，提供共通的處理方式。

下面通過示例看下Vue中的vue-resource一起看看吧

  • 版本：vue-resource v1.2.1
  • 作用：

  Vue與后臺(tái)Api進(jìn)行交互通常是利用vue-resource來實(shí)現(xiàn)的，本質(zhì)上vue-resource是通過http來完成AJAX請(qǐng)求相應(yīng)的。

用法：

  Vue實(shí)例對(duì)象注冊(cè)this.$http服務(wù)，可以發(fā)送HTTP請(qǐng)求。解析請(qǐng)求所返回的結(jié)果。此外，Vue實(shí)例將會(huì)自定綁定到this所在的回調(diào)函數(shù)中。

{
 // GET /someUrl
 this.$http.get('/someUrl').then(response => {
  // success callback
 }, response => {
  // error callback
 });
}

快捷方法列表

get(url, [config])
head(url, [config])
delete(url, [config])
jsonp(url, [config])
post(url, [body], [config])
put(url, [body], [config])
patch(url, [body], [config])

配置信息命令

Vue中的vue-resource示例詳解

響應(yīng)

Vue中的vue-resource示例詳解

源碼

下面我將以get請(qǐng)求訪問json文件的方式來展示vue-resource的用法。

html中的源碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue-router</title>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="item in list">{{item.name}}</li>
    </ul>
    <button @click="getData">get請(qǐng)求</button>
  </div>
<script src="../../../js/vue/vue/1.0/vue.js"></script>
<script src="../../../js/vue/vue-resource/1.2.1/vue-resource.js"></script>
<script type="application/javascript">
  var vm = new Vue({
    el:'#app'
    ,data:{
      list:[]
    }
    ,methods:{
      getData(){
        var url = '../json/get.json';
        this.$http.get(url).then(function(res){
          var body = res.body;
          if(body.status){
            alert('請(qǐng)求出錯(cuò)！');
          }
          this.list = body.message;
        });
      }
    }
  });
</script>
</body>
</html>

json文件中的源碼

{
 "status":0
 ,"message":[
  {
   "id":1
   ,"name":"張三"
  }
  ,{
   "id":2
   ,"name":"李四"
  }
 ]
}

結(jié)果

Vue中的vue-resource示例詳解

分析

上面的代碼實(shí)現(xiàn)的功能是在頁面中通過點(diǎn)擊button按鈕來觸發(fā)一個(gè)getData的click響應(yīng)事件，而該事件實(shí)現(xiàn)的功能是發(fā)送一個(gè)url請(qǐng)求（盡管說其請(qǐng)求的是本地的json文件數(shù)據(jù)，不過其請(qǐng)求后臺(tái)的方法和該方法是一模一樣的，所以說其用于請(qǐng)求后臺(tái)的數(shù)據(jù)也是同樣的用法。），該請(qǐng)求返回url鏈接所響應(yīng)的數(shù)據(jù)。而該返回?cái)?shù)據(jù)將會(huì)在then()回調(diào)函數(shù)中進(jìn)行相應(yīng)的處理，比如說我們的json文件中就返回了status響應(yīng)狀態(tài)碼，其中0代表成功，否則失敗。而一旦響應(yīng)成功，則調(diào)用body.message，將相應(yīng)的數(shù)據(jù)主體綁定到data數(shù)據(jù)域中的list中，由于list中的數(shù)據(jù)有變動(dòng)，因而Vue會(huì)自定的刷新li的v-for中的頁面信息，進(jìn)而完成頁面信息的更新操作。

總結(jié)

以上所述是小編給大家介紹的Vue中的vue-resource示例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！

網(wǎng)站標(biāo)題：Vue中的vue-resource示例詳解
分享地址：http://www.muchs.cn/article36/piejpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、外貿(mào)建站、網(wǎng)站維護(hù)、做網(wǎng)站、全網(wǎng)營銷推廣、網(wǎng)頁設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)頁設(shè)計(jì)公司