Heim > Artikel > Web-Frontend > So verwenden Sie Ajax zum Rendern einer Seite in vue.js

So verwenden Sie Ajax zum Rendern einer Seite in vue.js

亚连Original: 2018-06-06 11:17:142860Durchsuche

Im Folgenden werde ich Ihnen ein Beispiel für vue.js- und Ajax-Rendering-Seiten vorstellen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

In Bezug auf das, was ich letztes Mal erwähnt habe, die Verwendung von vue.js, zepto, node.js, Webpack und anderen Technologien zur Rekonstruktion von CNode. Dies ist ein relativ einführendes Projekt, nachdem Sie Vue kennengelernt haben. Die CNode-Website verfügt über eine öffentliche API, sodass Sie alle Datenschnittstellen dieser Website abrufen und sie dann auf der Seite rendern und mit CSS verarbeiten können. Anfangs hatte ich immer das Gefühl, dass es sehr schwierig war, sehr schwierig, sehr schwierig. Ich konnte zwar nicht sagen, wo die Schwierigkeit lag, aber ich hatte einfach das Gefühl, dass es sehr schwierig war, sehr schwierig, sehr schwierig. Lassen Sie mich näher darauf eingehen: Ist es nicht einfach, Ajax zu verwenden, um die Daten abzurufen, sie dann zum Rendern an die Komponente zu übergeben, sie dann zu imitieren und den Stil zu schreiben? Es ist nicht schwer, aber warum fällt es mir von Natur aus schwer?

CNode bietet uns eine Datenschnittstelle und Ajax hat nur wenige Methoden. Später dachte ich sorgfältig darüber nach und stellte fest, dass der Ort der Angst in meinem Herzen Ajax war. Ja, Sie haben mir die Datenschnittstelle gegeben und ich kann die Daten abrufen, aber was haben Sie mir gegeben? Vor der Verwendung kannte ich die von Ajax erhaltenen Daten nicht. Menschen haben immer Angst vor dem, was sie nicht wissen! Wie meine Klassenkameraden sagten, dachte ich vorher, Ajax sei schwierig, aber später stellte ich fest, dass es in Ordnung war, als ich es benutzte. Ich denke, die Verwirrung der meisten Anfänger über Ajax liegt oft in ihrer Angst vor der unbekannten Natur der Daten, die sie erhalten.

Da wir Angst vor der unbekannten Natur haben, können wir uns diese „Daten“ genauso gut ansehen! Hier verwende ich die Ajax-Methode von Zepto (lernen Sie sie jetzt und verwenden Sie sie jetzt).

let data = { 
 page: 1, 
 limit: 20,//获取20个 
 tab: &#39;all&#39;, 
 mdrender: true 
}; 
let topics = []; 
$.get("https://cnodejs.org/api/v1/topics", data, function (res) { 
   if (res && res.data) { // 如果查到数据 
   topics = res.data; 
   } 
  })

Dann geben Sie Themen in die Konsole ein

ajax erhält das Json-Format. Wie im Bild oben gezeigt, werden 20 „Objekte“ vom Typ Json erhalten So viele Attribute. Ich möchte zum Beispiel den Titel des ersten Objekts erhalten

Jetzt sollten Sie die von Ajax erhaltenen Daten durchgesehen haben. Ich habe das Gefühl, dass sich die ganze Person nach diesem kleinen Schritt entspannt fühlt.

Schlagen Sie, während das Eisen heiß ist. Verwenden Sie einfach Vue, um eine Seite zu rendern.

HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>Document</title> 
 <script src="http://zeptojs.com/zepto.js"></script> 
 <script src="vue.js"></script> 
</head> 
<body> 
<p id="app"> 
 <ul> 
  <li v-for="(item,i) in items" :key="item.id">  
   <span class="index" :title="i + 1">{{(i + 1) > 9999 ? "..." : (i + 1)}}</span> 
   <span class="face"> 
     <img :src="item.author.avatar_url" alt="" :title="item.author.loginname" width="80" height="80" /> 
   </span> 
   <span class="name" :title="item.title">{{item.title}}</span></li> 
 
 </ul> 
</p> 
<script src="Ajax-demo1.js"></script> 
</body> 
</html>

JS:

new Vue({ 
 el: &#39;#app&#39;, 
 data:{ 
  items:[], 
  scroller:null, 
  tip:{ 
    page: 1, 
    limit: 20, 
    tab: &#39;all&#39;, 
    mdrender: true 
  } 
 }, 
 methods:{ 
  getData(){ 
   let self = this; 
   $.get("https://cnodejs.org/api/v1/topics", this.tip, function (res) { 
    if (res && res.data) { // 如果查到数据 
    self.items = res.data; 
   } 
  }) 
  } 
 }, 
 created:function() { 
  this.getData(); 
  console.log("success"); 
 }, 
 mounted:function() { 
 
 } 
})

emmmmm, Es gibt ein kleines Problem, das ich erwähnen muss. AJAX ist eine asynchrone Funktion (Sie können meinen letzten Blog über Asynchronität lesen. Die Ausführungsumgebung der Callback-Funktion ist der globale Bereich. In getData zeigt dieser von AJAX auf das Fenster). Dafür gibt es zwei Lösungen: Eine besteht darin, self zu verwenden, um dies wie ich zu speichern, und die andere darin, die Pfeilfunktion zu verwenden, um dies zu binden.

Oft haben wir Angst vor dem Unbekannten, und diese Angst hindert uns oft daran, den Schritt zu wagen, das Unbekannte zu besiegen existieren im Kopf.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie das Prinzip der datengesteuerten Ansicht über Vuejs

So verwenden Sie übergeordnete Komponenten, um untergeordnete Komponenten aufzurufen Ereignisse in Vue

So implementieren Sie die Funktion zum Anzeigen/Ausblenden von Passwörtern in Vue

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Ajax zum Rendern einer Seite in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie den Modifikator .native in Vue.jsNächster Artikel：So verwenden Sie den Modifikator .native in Vue.js

In Verbindung stehende Artikel

Mehr sehen