vue要求データの3つの方法

データを要求する方式：

vue-resource公式提供のvueプラグイン

axios

fetch-json

一、vue-resource要求データ
紹介：vue-resource要求データ方式は公式に提供されたプラグインです。
使用手順:
1、vue-resourceモジュールの取り付け

cnpm install vue-resource --save

加--saveはpackage.jsonに引用するために、生産環境で使用することを表しています。私たちは日常的に開発していますので、コードを他の人に包装したり、githubにアップロードしたり、コードを発表したりする時に、package.jsonは必要なカバンをインストールします。開発環境だけで使うなら、save-devだけが必要です。開発環境だけで使うものがあります。生産環境で使うものがあります。
2、main.jsでvue-resourceを導入する

import VueResource from 'vue-resource';
Vue.use(VueResource);

3、セットの中で直接使う

this.$http.get(  ).then(function(){

})

注意：this.$http.get()などの各種http依頼は全部promiseのものです。promiseは非同期のお願いです。次に、then矢印関数のthisは文脈を表します。矢印関数thisの定義により、関数の定義だけで値が付けられていることが分かります。thisとは、関数を定義するオブジェクトのことで、vueではオブジェクトがmethods現在のページです。だから、thisが指導しているのはdataの中のデータです。パッケージ関数外関数のデータを取得する場合は、閉じたパッケージの概念です。実現方法は外層関数にvar thatを追加することです。  this外層のthisをthatに保存します。
例:
Info.vue

<template>
  <div id="info">
    <button @click="getData">    </button>
    <ul>
      <li v-for="(item,index) in list" v-bind:key="index">
        {{item.title}}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "Info",
    data() {
      return {
        list: []
      }
    },
    methods: {
      getData: function () {
        let api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
        //          。
        this.$http.get(api).then((res)=>{
          this.list = res.body.result;
        }, (err)=>{
          console.log(err);
        });
      }
    },
    mounted() {
      this.getData();
    }
  }
</script>

get Data（）に矢印関数が適用されていない場合は、thisの問題に注意が必要です。

getData: function () {
  let api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
  const _this = this;
  this.$http.get(api).then(function (res) {
    _this.list = res.body.result;
  }, function (err) {
    console.log(err);
  });
}

二、axios要求データ
紹介：これは第三者のプラグインgithubアドレスです。https://github.com/axios/axios
axiosとfetch-jsopは同じ第三者プラグインです。
1、据え付け

cnpm install axios --save

直接呼び出します。vue-resourceとの違いは、aixosは1ページに1回使うごとにページで呼び出します。vue-resourceは全体を結びつけたものです。
2、どこでaxiosを導入しますか？

Axios.get(api).then((response)=>{
  this.list=response.data.result;
}).catch((error)=>{
  console.log(error);
})

axiosに関するクロスドメイン要求
config->index.js->proxyTableでは、下記のように配置されています。targetは自分の欲しい住所を記入してください。

以下のように構成されています。urlは住所の後ろにあるパラメータです。配置が整いましたら、npm run devで動作すればいいです。

複数の同時要求について：

上記は同じ住所のクロスドメインです。異なる住所のクロスドメインを取るには、config->index.js->proxyTableの配置を変更するだけで、アドレスブロックを追加すればいいです。
三、fetch-jsonpについて
githubアドレス：https://github.com/camsong/fetch-jsonp
1、据え付け

cnpm install fetch-jsonp --save

2、どこでfetch-jsonを導入しますか？

fetchJsonp('/users.jsonp')
 .then(function(response) {
  return response.json()
 }).then(function(json) {
  console.log('parsed json', json)
 }).catch(function(ex) {
  console.log('parsing failed', ex)
 })

ここでvue要求データの3つの方法についての記事を紹介します。もっと関連したvue要求データの内容は以前の文章を検索してください。または次の関連記事を引き続き閲覧してください。これからもよろしくお願いします。