Detaillierte Erklärung, wie Vue.js Daten basierend auf $.ajax erhält und sie an die Daten der Komponente bindet

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung von Vue.js vor, um Daten zu erhalten und sie an die Daten der Komponente zu binden. Es ist von großem praktischem Wert darauf verweisen

Vue.js steht nicht in Konflikt mit jQuery? ? ?

In tatsächlichen Anwendungen stammen fast 90 % der Daten vom Server. Die Dateninteraktion zwischen dem Front-End und dem Server wird im Allgemeinen über Ajax-Anfragen abgeschlossen.
Wenn es um Ajax-Anfragen geht, fällt mir als Erstes jQuery ein. Wenn jQuery in das Projekt eingeführt wird, wird es uns helfen, viele Operationen zu vereinfachen, wie z. B. DOM-Operationen und Ajax-Methoden Erhalten Sie Back-End-Daten usw.

Gibt es jedoch Konflikte zwischen Vue.js und jQuery? ? ?

Die Antwort ist offensichtlich kein Konflikt! ! !

Als nächstes implementieren wir die Ajax-Methode von jQuery in der Vue.js-Komponente, um serverseitige Daten abzurufen und sie an die Daten der Komponente zu binden.

Erstellen Sie eine einzelne Dateikomponente von 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>

jsonDaten

Der Code lautet wie folgt:

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

Seiteneffekt

Nachdem Ajax die Daten erhalten hat, binden Sie die erhaltenen Daten an die Daten des Komponentenobjekts , um den Vorgang abzuschließen Daten der Erfassung.

Auf diese Weise kann die Seite die vom Server erhaltenen Daten korrekt zum Rendern verwenden.

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung, wie Vue.js Daten basierend auf $.ajax erhält und sie an die Daten der Komponente bindet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!