Detaillierte Erläuterung der asynchronen Axios-Kommunikation in Vue
|
1. Zuerst erstellen wir eine JSON-Datei zur interaktiven Nutzung. Wir listen das JSON-Datenformat auf und simulieren die Übergabe an das Frontend, damit unsere Freunde es besser verstehen.
{
"Name": "Gesalzener Fisch_umdrehen",
"URL": "https://blog.csdn.net/aaa123_456aaa",
"Seite": 1,
"Adresse": {
"Straße": "Bezirk Xiangqiao",
"Stadt": "Stadt Chaozhou",
"Land": "China"
},
"Links": [
{
"Name": "Gesalzener Fisch_Umdrehung 1",
"URL": "https://blog.csdn.net/aaa123_456aaa"
},
{
"Name": "Gesalzener Fisch_Umdrehung 2",
"URL": "https://blog.csdn.net/aaa123_456aaa"
},
{
"Name": "Gesalzener Fisch_Umdrehen 3",
"URL": "https://blog.csdn.net/aaa123_456aaa"
}
]
}
Denken Sie daran, Ihre Umgebung zu überprüfen. Sie müssen hier die Unterstützung von ES6 auswählen.
2. Als Nächstes erstellen wir eine HTML-Datei und verwenden die asynchrone Kommunikation von Axios, um die Datenkommunikation zu realisieren.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
</Kopf>
<Text>
<div id="vue">
<div>
{{info.name}}
{{info.Adresse}}
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<Skripttyp="text/javascript">
var vm = neuer Vue({
el: "#vue",
// Hinweis: * Daten sind global und in großen Projekten können sie leicht verunreinigt werden* Kapseln Sie die Daten in eine Funktion. Beim Instanziieren der Komponente rufen wir einfach die von dieser Funktion generierte Datenkopie auf, um eine Datenverunreinigung zu vermeiden. Ich werde es hier nicht als Erklärung schreiben.
Daten(){
zurückkehren {
// Das Format des Anforderungsrückgabeparameters sollte mit dem der JSON-Zeichenfolge übereinstimmen, was standardmäßiger ist. Natürlich kann es direkt leer sein.
Info:
Name: null,
Adresse:{
Straße: null,
Stadt: null,
Land: null
},
}
}
},
mounted(){//Hook-Funktion, d. h., wenn das Programm ausgeführt wird, kann sie zur Ausführung in die Mitte des Programms eingefügt werden //Kettenprogrammierung, denken Sie daran, die ES6-Supportversion zu verwenden axios.get('../data.json').then(response=>(this.info=response.data))
}
});
</Skript>
</body>
</html>
Laufergebnisse:
3. Natürlich handelt es sich bei dem oben Gesagten um eine relativ standardmäßige Schreibweise, also kürzen wir es ab:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
</Kopf>
<Text>
<div id="vue">
<div>
{{info.name}}
{{info.Adresse}}
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<Skripttyp="text/javascript">
var vm = neuer Vue({
el: "#vue",
// Hinweis: Hier ist data:{}, aber es muss ein Originalparameter info darin enthalten sein, und dann werden die von axios erhaltenen Daten an info gebunden // data ist ein Attribut, und der Attributwert kann ein Objekt oder eine Funktion sein. Funktionen sind im Wesentlichen Objekte. Vue beurteilt den Typ der Datenattribute und verwendet unterschiedliche Verarbeitungsmethoden data: {
Info:{}
},
montiert(){
axios.get('../data.json').then(Antwort=>(this.info=Antwort.data))
}
});
</Skript>
</body>
</html>
Laufergebnisse:
4. Wir müssen auf die Interaktion mit der URL achten, da v-bind zum Binden des Werts verwendet wird.
<div id="vue" v-Uhr>
<div>
{{info.name}}
{{info.Adresse}}
<a v-bind:href="info.url">Klicken Sie hier, um mein Blog aufzurufen</a>
</div>
</div>
Klicken Sie hier, um zu springen. Interessierte Freunde können uns folgen!
5. Tipps Einige Freunde haben möglicherweise ein schlechtes Netzwerk und Sie werden feststellen, dass während des Seitenladevorgangs zuerst eine Vorlage geladen wird. Dies hängt mit dem Lebenszyklus von Vue zusammen:
Manche von Ihnen finden das vielleicht hässlich, deshalb hier eine Lösung, damit es in diesem Moment weiß wird, anstatt zuerst die Vorlage anzuzeigen:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<Stil>
/*<!--v-clock: Lösen Sie das Flackerproblem-->*/
[v-Uhr]
Anzeige: keine;
}
</Stil>
</Kopf>
<Text>
<!--Eine virtuelle Uhr anpassen-->
<div id="vue" v-Uhr>
<div>
{{info.name}}
{{info.Adresse}}
</div>
</div>
ZusammenfassenDieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können! Das könnte Sie auch interessieren:
|
<<: So speichern Sie „false“ oder „true“ in MySQL
>>: Zusammenfassung der praktischen Erfahrungen zu HTML-Wissenspunkten
Artikel empfehlen
Nginx führt Anforderungsverbindungen zusammen und beschleunigt den Website-Zugriff – Beispiele
Vorwort Als einer der besten Webserver der Welt l...
Lösung für das MySQL-Fehlerproblem 1045 (28000)
Ich bin auf den MySQL-FEHLER 1045 gestoßen und ha...
Zusammenfassung häufig verwendeter Operatoren und Funktionen in MySQL
Lassen Sie uns zuerst die Datentabelle erstellen....
Eine kurze Diskussion über Flinks fehlertoleranten Mechanismus: Jobausführung und Daemon
Inhaltsverzeichnis 1. Fehlertoleranz bei der Joba...
HTML-Hyperlinks im Detail erklärt
Hyperlink Hyperlinks sind die am häufigsten verwen...
Detaillierte Erklärung zur Installation von PHP7 unter Linux
Wie installiere ich PHP7 unter Linux? 1. Installi...
Detailliertes Tutorial zur Installation von Nacos in Docker und zur Konfiguration der Datenbank
Umgebungsvorbereitung Docker-Umgebung MySQL 5.7 (...
Mobile Frontend-Anpassungslösung (Zusammenfassung)
Ich habe online gesucht und festgestellt, dass in...
Detaillierte Erklärung der in Node.js integrierten Module
Inhaltsverzeichnis Überblick 1. Pfadmodul 2. Bis ...
Implementierung von JavaScript zum Herunterladen und Hochladen verknüpfter Bilder
Da wir Bilder hochladen möchten, müssen wir zunäc...
Detaillierte Erläuterung der Lösung zur Echtzeitsynchronisierung von MySQL nach Oracle
1 Anforderungen im Überblick Die Daten mehrerer T...
Zwei praktische Möglichkeiten zum Aktivieren des Proxys in React
Zwei Möglichkeiten zum Aktivieren des Proxy React...
MySQL verwendet mysqldump + binlog, um die Prinzipanalyse der gelöschten Datenbank vollständig wiederherzustellen
1. Übersicht Beim täglichen Betrieb und bei der W...
Zwei Möglichkeiten zur Installation des Linux-Subsystems in Windows 10 (mit Bildern und Text)
Windows 10 unterstützt jetzt das Linux-Subsystem....
Vue implementiert einfache Rechnerfunktion
In diesem Artikelbeispiel wird der spezifische Co...