So fordern Sie Daten in vue.js an

So fordern Sie Daten in vue.js an: Installieren Sie zuerst das Modul [vue-resource], führen Sie dann [vue-resource] in [main.js] ein und verwenden Sie es direkt in der Komponente.

【Empfohlene verwandte Artikel: vue.js】

vue.js Methode zum Anfordern von Daten:

Zuerst fordert Vue-Ressource Daten an

Einführung: Vue-Ressourcenanfragen Daten Die Methode ist ein offizielles Plug-in

Verwendungsschritte:

1. Installieren Sie das vue-resource-Modul

cnpm install vue-resource --save

Fügen Sie --save hinzu, um es in package.json zu referenzieren und die Verwendung in der Produktionsumgebung anzugeben. Denn wenn wir in unserer täglichen Entwicklung den Code an andere verpacken oder auf Github hochladen oder den Code veröffentlichen möchten, ist package.json das für die Installation erforderliche Paket. Wenn Sie es nur in der Entwicklungsumgebung verwenden, benötigen Sie nur --save-dev. Einige werden nur in der Entwicklungsumgebung verwendet, andere werden in der Produktionsumgebung verwendet.

2. Fügen Sie vue-resource in main.js ein

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

3. Verwenden Sie

this.$http.get(地址).then(function(){
 
})

direkt in der Komponente

Hinweis: this.$http.get()等等的各种http请求都是继承promise的。promise是异步的请求；其次，.then箭头函数里的this代表的是上下文。根据箭头函数this的定义，只在函数定义时就已经赋值可知，this，指代的是定义函数的对象，在vue中对象就是methods当前页面。所以this指导的是data里面的数据。如果想要获取包裹函数外函数的数据，即闭包的概念。实现方法就是在外层函数加一个var that = this；Speichern Sie zuerst das Äußere.

Beispiel:

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 = &#39;http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&#39;;
        //此处推荐使用箭头函数。
        this.$http.get(api).then((res)=>{
          this.list = res.body.result;
        }, (err)=>{
          console.log(err);
        });
      }
    },
    mounted() {
      this.getData();
    }
  }
</script>

Wenn Pfeilfunktionen in getData() nicht anwendbar sind, müssen Sie auf dieses Problem achten.

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);
  });
}

Zweitens: Axios-Anforderungsdaten

Einführung: Dies ist eine Plug-in-Github-Adresse eines Drittanbieters: https://github.com/axios/axios

axios und fetch-jsonp sind beide Plug-Ins von Drittanbietern -ins

1,

cnpm install axios --save

installieren und direkt anrufen. Der Unterschied zu vue-resource besteht darin, dass aixos bei jeder Verwendung auf dieser Seite einmal auf einer Seite aufgerufen wird. vue-resource ist global gebunden.

2. Wo man axios verwendet und wo man es einführt

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

Über die domänenübergreifende Anforderung von axios

Konfigurieren Sie in config->index.js->proxyTable wie folgt: Geben Sie die gewünschte Zieladresse ein

Konfigurieren Sie wie folgt: Die URL ist der Parameter hinter der Adresse. Führen Sie nach der Konfiguration einfach npm run dev aus.

Über mehrere gleichzeitige Anfragen:

Das Obige ist eine domänenübergreifende Anfrage mit derselben Adresse. Wenn Sie eine domänenübergreifende Anfrage mit einer anderen Adresse erhalten möchten, müssen Sie nur die Konfigurationskonfiguration ändern ->index.js->proxyTable, fügen Sie einfach den Adressblock hinzu.

Drei, über fetch-jsonp

Github-Adresse: https://github.com/camsong/fetch-jsonp

1. Wo man fetch-jsonp

cnpm install fetch-jsonp --save

verwendet und wo man es einführt

Verwandte kostenlose Lernempfehlungen:

JavaScript(Video)

Das obige ist der detaillierte Inhalt vonSo fordern Sie Daten in vue.js an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!