Explication détaillée de la façon dont Vue.js obtient des données basées sur $.ajax et les lie aux données du composant

Cet article présente principalement l'explication détaillée de Vue.js basé sur $.ajax pour obtenir des données et les lier aux données du composant. Il est d'une grande valeur pratique. Les amis dans le besoin peuvent s'y référer. à cela

Vue.js n'est pas en conflit avec jQuery ? ? ?

Dans les applications réelles, près de 90 % des données proviennent du serveur. L'interaction des données entre le front-end et le serveur s'effectue généralement via des requêtes ajax.
Quand il s'agit de requêtes ajax, la première chose qui nous vient à l'esprit est jQuery. Si jQuery est introduit dans le projet, cela nous aidera à simplifier de nombreuses opérations, à simplifier les opérations DOM, les méthodes ajax pour obtenir. données back-end, etc.

Cependant, Vue.js et jQuery sont-ils en conflit ? ? ?

La réponse est évidemment pas de conflit ! ! !

Ensuite, nous implémenterons la méthode ajax de jQuery dans le composant Vue.js pour obtenir des données côté serveur et les lier aux données du composant.

Créer un composant de fichier unique Vue.js

<template>
  <p>
    <p class="id">{{ret}}</p>
    <p class="id">{{data}}</p>
  </p>
</template>
<script>
  export default{
    name:&#39;Test&#39;,
    data(){
      return{
        ret:&#39;&#39;,
        data:&#39;&#39;
      }
    },
    mounted(){
      this.$nextTick(()=>{
        var that=this;
        $.ajax({
          type:"get",
          url:"//wuanlife_api/index.php/Post/get_collect_post",
          data:{user_id:1},
          success:function(data){
            that.ret=data.ret;
            that.data=data.data;
          }
        })
      })
    }
  }
</script>
<style>
  .id{
    font-size: 25px;
    position: relative;
    left:50px;
    right:50px;
  }
</style>

jsondata

Le code est le suivant :

{"ret":200,"data":{"page_count":1,"current_page":1,"posts":[]},"msg":null}

Effet de page

Une fois qu'ajax a obtenu les données, liez les données obtenues aux données du composant objet pour terminer le données d'acquisition.

De cette façon, la page peut utiliser correctement les données obtenues du serveur pour le rendu.

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!