Comment demander des données dans vue.js

Comment vue.js demande des données : installez d'abord le module [vue-resource] puis introduisez [vue-resource] dans [main.js] et utilisez-le directement dans le composant.

[Recommandations d'articles connexes : vue.js]

vue.js demande des données Méthode :

1. vue-resource demande des données

Introduction : la méthode vue-resource demande des données est un plug-in officiel

Étapes d'utilisation :

1. Installez le module vue-resource

cnpm install vue-resource --save

Ajoutez --save pour le référencer dans package.json, indiquant son utilisation dans l'environnement de production. Parce que dans notre développement quotidien, si nous voulons empaqueter le code à d'autres ou le télécharger sur github, ou lorsque nous voulons publier le code, package.json est le package requis pour l'installation. Si vous l'utilisez uniquement dans l'environnement de développement, vous n'avez besoin que de --save-dev. Certains ne sont utilisés que dans l'environnement de développement et d'autres sont utilisés dans l'environnement de production.

2. Introduisez vue-resource dans main.js

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

3 Utilisez

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

directement dans le composant Remarque : diverses requêtes http telles que this.$http.get() etc. Il hérite de la promesse. La promesse est une requête asynchrone ; deuxièmement, cela dans la fonction flèche .then représente le contexte. D'après la définition de la fonction flèche, on peut voir que la valeur n'a été attribuée que lorsque la fonction est définie. Cela fait référence à l'objet qui définit la fonction. Dans Vue, l'objet est la page de méthodes actuelle. Cela guide donc les données dans les données. Si vous souhaitez obtenir les données de la fonction en dehors de la fonction d'emballage, c'est le concept de fermeture. La méthode d'implémentation consiste à ajouter un var that = this； à la fonction externe et à stocker d'abord le this externe dans celui-ci.

Instance :

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>

Si les fonctions fléchées ne sont pas applicables dans getData(), vous devez faire attention à ce problème.

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

Deuxièmement, axios demande des données

Introduction : Il s'agit d'une adresse github de plug-in tiers : https://github.com/axios/axios

axios et fetch-jsonp sont tous deux des plug-ins tiers

1 Installez

cnpm install axios --save

et appelez directement. La différence avec vue-resource est qu'aixos est appelé une fois sur une page à chaque fois qu'il est utilisé sur cette page. vue-resource est liée globalement.

2. Où utiliser et où introduire axios

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

À propos de la requête interdomaine d'axios

Configurer dans config->index.js->proxyTable comme suit : remplissez vous-même la cible L'adresse souhaitée

est configurée comme suit L'url est le paramètre après l'adresse. Après la configuration, exécutez simplement npm run dev.

À propos de plusieurs requêtes simultanées :

Ce qui précède est une version interdomaine de la même adresse si vous. souhaitez obtenir des adresses différentes. Pour plusieurs domaines, il vous suffit de modifier la configuration de config->index.js->proxyTable et d'ajouter un bloc d'adresse.

3. À propos de fetch-jsonp

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

1. 🎜>

cnpm install fetch-jsonp --save

2. Où utiliser et où introduire fetch-jsonp

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

Recommandations d'apprentissage gratuites associées : JavaScript(Vidéo)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!