- \n
- Ein Texteditor mit Unterst\u00fctzung f\u00fcr JavaScript-Syntaxhervorhebung, wie beispielsweise Atom, Visual Studio Code oder Sublime Text. Diese Editoren sind f\u00fcr Windows, macOS und Linux verf\u00fcgbar.<\/li>\n
- Kenntnisse im Umgang mit HTML und JavaScript sind erforderlich. Mehr dazu erfahren Sie unter \u201eJavaScript zu HTML hinzuf\u00fcgen\u201c.<\/li>\n
- Lernen Sie das JSON-Datenformat kennen, um mehr dar\u00fcber zu erfahren, wie Sie in JavaScript mit JSON arbeiten k\u00f6nnen.<\/li>\n
- Erste Schritte mit API-Anfragen: Ein umfassendes Tutorial zur Arbeit mit APIs finden Sie unter \u201eHow to Use Web API in Python3\u201c. Obwohl es f\u00fcr Python geschrieben ist, hilft es Ihnen dennoch, die Kernkonzepte der API-Arbeit zu verstehen.<\/li>\n<\/ul>\n
Schritt 1 \u2013 Erstellen einer einfachen Vue-App<\/h2>\n
In diesem Schritt erstellen Sie eine einfache Vue-Anwendung. Wir erstellen eine einzelne HTML-Seite mit Beispieldaten, die wir sp\u00e4ter durch Live-Daten von der API ersetzen. Zur Anzeige dieser Beispieldaten verwenden wir Vue.js. F\u00fcr diesen ersten Schritt speichern wir den gesamten Code in einer einzigen Datei.<\/p>\n
Erstellen Sie mit Ihrem Texteditor eine neue Datei namens index.html.<\/p>\n
F\u00fcgen Sie in dieser Datei den folgenden HTML-Code ein, der ein HTML-Grundger\u00fcst definiert und das CSS Foundation Framework sowie die Vue.js-Bibliothek von einem Content Delivery Network (CDN) einbindet. Durch die Verwendung eines CDN muss kein zus\u00e4tzlicher Code heruntergeladen werden, um mit der Entwicklung Ihrer Anwendung zu beginnen.<\/p>\n
\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/foundation\/6.3.1\/css\/foundation.min.css\">\r\n<meta charset=\"utf-8\">\r\n<title>Cryptocurrency Pricing Application<\/title>\r\n<\/head>\r\n<body>\r\n<div class=\"container\" id=\"app\">\r\n<h3 class=\"text-center\">Cryptocurrency Pricing<\/h3>\r\n<div class=\"columns medium-4\" >\r\n<div class=\"card\">\r\n<div class=\"card-section\">\r\n<p> BTC in USD <\/p>\r\n<\/div>\r\n<div class=\"card-divider\">\r\n<p>{{ BTCinUSD }}<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<script src=\"https:\/\/unpkg.com\/vue@3\"><\/script>\r\n<\/body>\r\n<\/html><\/code><\/pre>\n<\/div>\nDie Zeile {{ \u200b\u200bBTCinUSD }} ist ein Platzhalter f\u00fcr Daten, die von Vue.js bereitgestellt werden und es uns erm\u00f6glichen, Daten deklarativ in der Benutzeroberfl\u00e4che darzustellen. Definieren wir diese Daten.<\/p>\n
Direkt unter dem Etikett \u0628\u0627 Vue\u060c \u0627\u06cc\u0646 \u06a9\u062f \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u062c\u062f\u06cc\u062f Vue \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u06cc\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 \u062f\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0631 \u0635\u0641\u062d\u0647 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f:<\/p>\n
\n...\r\n<script>\r\nconst { createApp } = Vue\r\n\r\ncreateApp({\r\ndata() {\r\nreturn {\r\nBTCinUSD: 3759.91\r\n}\r\n}\r\n}).mount('#app')\r\n<\/script>\r\n<\/code><\/pre>\n<\/div>\nDieser Code erstellt eine neue Vue-App-Instanz und bindet diese an das Element mit der App-ID. Vue bezeichnet diesen Vorgang als \u201eMounting der App\u201c. Wir definieren eine neue Vue-Instanz und konfigurieren sie, indem wir ihr ein Konfigurationsobjekt \u00fcbergeben. Der `createApp`-Instanz \u00fcbergeben wir ein Datenobjekt, das den Wert `BTCinUSD` zur\u00fcckgibt. Zus\u00e4tzlich rufen wir die `mount`-Methode der `createApp`-Instanz mit dem Argument `#app` auf. Dieses Argument gibt die Element-ID an, an der die App gemountet werden soll, sowie eine Datenoption mit den Daten, die in der Ansicht verf\u00fcgbar sein sollen.<\/p>\n
In diesem Beispiel enth\u00e4lt unser Datenmodell ein einzelnes Schl\u00fcssel-Wert-Paar mit einem Dummy-Wert f\u00fcr den Bitcoin-Preis: { BTCinUSD: 3759.91}. Diese Daten werden in unserer HTML-Seite oder -Ansicht angezeigt, wobei wir den Schl\u00fcssel in doppelte geschweifte Klammern einschlie\u00dfen, wie folgt:<\/p>\n
\n<div class=\"card-divider\">\r\n<p>{{ BTCinUSD }}<\/p>\r\n<\/div><\/code><\/pre>\n<\/div>\nWir werden diesen verschl\u00fcsselten Wert schlie\u00dflich durch Live-Daten aus der API ersetzen.<\/p>\n
\u00d6ffnen Sie diese Datei in Ihrem Browser. Auf Ihrem Bildschirm wird die folgende Ausgabe mit den Beispieldaten angezeigt:<\/p>\n
<\/p>\n
Wir zeigen den Preis in US-Dollar an. Um ihn in einer weiteren W\u00e4hrung, beispielsweise Euro, anzuzeigen, f\u00fcgen wir unserem Datenmodell ein weiteres Schl\u00fcssel-Wert-Paar und eine weitere Spalte im Markup hinzu. Zuerst f\u00fcgen wir die Euro-Zeile zum Datenmodell hinzu:<\/p>\n
\n<script>\r\nconst { createApp } = Vue\r\n\r\ncreateApp({\r\ndata() {\r\nreturn {\r\nBTCinUSD: 3759.91,\r\nBTCinEURO: 3166.21\r\n}\r\n}\r\n}).mount('#app')\r\n<\/script><\/code><\/pre>\n<\/div>\nDann der Abschnitt
<div class><\/code> Ersetzen Sie den bestehenden Text durch die folgenden Zeilen.<\/p>\n\n<div class=\"container\" id=\"app\">\r\n<h3 class=\"text-center\">Cryptocurrency Pricing<\/h3>\r\n<div class=\"columns medium-4\" >\r\n<div class=\"card\">\r\n<div class=\"card-section\">\r\n<p> BTC in USD <\/p>\r\n<\/div>\r\n<div class=\"card-divider\">\r\n<p>{{ BTCinUSD }}<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"columns medium-4\" >\r\n<div class=\"card\">\r\n<div class=\"card-section\">\r\n<p> BTC in EURO <\/p>\r\n<\/div>\r\n<div class=\"card-divider\">\r\n<p>{{ BTCinEURO }}<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div><\/code><\/pre>\n<\/div>\nSpeichern Sie die Datei und laden Sie sie in Ihrem Browser neu. Die App zeigt nun den Bitcoin-Preis in Euro und US-Dollar an.<\/p>\n
In diesem Schritt erstellen Sie Ihre Vue-App mit Beispieldaten, um sicherzustellen, dass sie geladen wird. Bisher haben wir alles in einer einzigen Datei erledigt, daher werden wir die einzelnen Elemente nun in separate Dateien aufteilen, um die Wartbarkeit zu verbessern.<\/p>\n
Schritt 2 \u2013 JavaScript und HTML zur besseren \u00dcbersichtlichkeit trennen<\/h2>\n
Um die Funktionsweise zu verstehen, haben wir den gesamten Code in einer Datei zusammengefasst. In diesem Schritt teilen Sie den Anwendungscode in zwei separate Dateien auf: index.html und vueApp.js. Die Datei index.html enth\u00e4lt das Markup, die JavaScript-Datei die Anwendungslogik. Beide Dateien befinden sich im selben Verzeichnis.<\/p>\n
\u00c4ndern Sie zun\u00e4chst die Datei index.html, entfernen Sie den JavaScript-Code und ersetzen Sie ihn durch einen Link zur Datei vueApp.js.<\/p>\n
Suchen Sie diesen Abschnitt der Datei:<\/p>\n
\n...\r\n<script src=\"https:\/\/unpkg.com\/vue@3\"><\/script>\r\n<script>\r\nconst { createApp } = Vue\r\n\r\ncreateApp({\r\ndata() {\r\nreturn {\r\nBTCinUSD: 3759.91,\r\nBTCinEURO: 3166.21\r\n}\r\n}\r\n}).mount('#app')\r\n<\/script>\r\n...<\/code><\/pre>\n<\/div>\nUnd \u00e4ndern Sie es so:<\/p>\n
\n...\r\n<script src=\"https:\/\/unpkg.com\/vue@3\"><\/script>\r\n<script src=\"vueApp.js\"><\/script>\r\n...<\/code><\/pre>\n<\/div>\nErstellen Sie anschlie\u00dfend die Datei vueApp.js im selben Ordner wie die Datei index.html.<\/p>\n
F\u00fcgen Sie in diese neue Datei denselben JavaScript-Code ein, der sich urspr\u00fcnglich in der Datei index.html befand, jedoch ohne das <code>-Tag. \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f:<\/p>\n
\nconst { createApp } = Vue createApp({ data() { return { BTCinUSD: 3759.91, BTCinEURO: 3166.21 } } }).mount('#app')<\/code><\/pre>\n<\/div>\nSpeichern Sie die Datei und laden Sie index.html im Browser neu. Sie werden dasselbe Ergebnis wie zuvor sehen.<\/p>\n
Hier haben Sie die Anwendung vom Markup getrennt. Als N\u00e4chstes f\u00fcgen Sie weitere Daten hinzu, um neben Bitcoin auch andere Kryptow\u00e4hrungen zu unterst\u00fctzen.<\/p>\n
Schritt 3 \u2013 Daten mit Vue durchlaufen<\/h2>\n
In diesem Schritt werden Sie die Daten neu strukturieren und die Darstellung so \u00e4ndern, dass die Preise von Bitcoin und Ethereum angezeigt werden.<\/p>\n
\u00d6ffnen Sie die Datei vueApp.js und \u00e4ndern Sie den R\u00fcckgabeteil des Datenmodells wie folgt:<\/p>\n
\nconst { createApp } = Vue\r\n\r\ncreateApp({\r\ndata() {\r\nreturn { \r\nresults: {\"BTC\": {\"USD\":3759.91,\"EUR\":3166.21}, \"ETH\": {\"USD\":281.7,\"EUR\":236.25}}\r\n}\r\n}\r\n}).mount('#app')<\/code><\/pre>\n<\/div>\nUnser Datenmodell ist durch eine verschachtelte Datenstruktur etwas komplexer geworden. Wir haben nun einen Schl\u00fcssel namens \u201eresults\u201c, der zwei Datens\u00e4tze enth\u00e4lt: einen f\u00fcr den Bitcoin-Preis und einen f\u00fcr den Ethereum-Preis. Diese neue Struktur erm\u00f6glicht es uns, Redundanzen in unserer Ansicht zu reduzieren. Sie \u00e4hnelt au\u00dferdem den Daten, die wir von der Cryptocompare-API erhalten.<\/p>\n
Speichern Sie die Datei.<\/p>\n
Nun \u00e4ndern wir unser Markup, um die Daten planvoller zu verarbeiten.<\/p>\n
\u00d6ffnen Sie die Datei index.html und suchen Sie diesen Abschnitt der Datei, in dem der Bitcoin-Preis angezeigt wird:<\/p>\n
\n...\r\n<div class=\"columns medium-4\" >\r\n<div class=\"card\">\r\n<div class=\"card-section\">\r\n<p> BTC in USD <\/p>\r\n<\/div>\r\n<div class=\"card-divider\">\r\n{{BTCinUSD}}\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<div class=\"columns medium-4\" >\r\n<div class=\"card\">\r\n<div class=\"card-section\">\r\n<p> BTC in EURO <\/p>\r\n<\/div>\r\n<div class=\"card-divider\">\r\n{{BTCinEURO}}\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<\/div>\r\n...<\/code><\/pre>\n<\/div>\nErsetzen Sie ihn durch diesen Code, der den von Ihnen definierten Datensatz durchl\u00e4uft.<\/p>\n
\n...\r\n<div class=\"columns medium-4\" v-for=\"(result, index) in results\">\r\n<div class=\"card\">\r\n<div class=\"card-section\">\r\n<p> {{ index }} <\/p>\r\n<\/div>\r\n<div class=\"card-divider\">\r\n<p>$ {{ result.USD }}<\/p>\r\n<\/div>\r\n<div class=\"card-section\">\r\n<p> € {{ result.EUR }}<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n...<\/code><\/pre>\n<\/div>\nDieser Code verwendet die v-for-Anweisung, die wie eine for-Schleife funktioniert. Sie durchl\u00e4uft alle Schl\u00fcssel-Wert-Paare in unserem Datenmodell und zeigt die Daten f\u00fcr jedes Paar an.<\/p>\n
Wenn Sie die Seite im Browser neu laden, werden Sie die l\u00e4cherlichen Preise sehen:<\/p>\n
Diese Modifikation erm\u00f6glicht es uns, in vueApp.js eine neue W\u00e4hrung zu den Ergebnisdaten hinzuzuf\u00fcgen und diese ohne weitere \u00c4nderungen auf dem Bildschirm anzuzeigen.<\/p>\n
F\u00fcgen Sie dem Datensatz einen weiteren simulierten Eintrag mit hervorgehobenen Informationen hinzu, um dies auszuprobieren:<\/p>\n
\nconst { createApp } = Vue\r\n\r\ncreateApp({\r\ndata() {\r\nreturn {\r\nresults: {\"BTC\": {\"USD\":3759.91,\"EUR\":3166.21}, \r\n\"ETH\": {\"USD\":281.7,\"EUR\":236.25},\r\n\"NEW Currency\":{\"USD\":5.60,\"EUR\":4.70}}\r\n}\r\n}\r\n}).mount('#app')<\/code><\/pre>\n<\/div>\nF\u00fcgen Sie nach dem Ethereum-Eintrag ein abschlie\u00dfendes Komma ein. Speichern Sie die Datei.<\/p>\n
Wenn Sie die Seite nun in einem Webbrowser laden, wird der neue Eintrag angezeigt:<\/p>\n
Wenn wir Daten programmatisch untersuchen, m\u00fcssen wir keine neuen Spalten manuell im Markup hinzuf\u00fcgen.<\/p>\n
Hier haben Sie anhand von Beispieldaten die Preise verschiedener W\u00e4hrungen visualisiert. Nun rufen wir die tats\u00e4chlichen Daten mithilfe der Cryptocompare-API ab.<\/p>\n
Schritt 4 \u2013 Daten von der API abrufen<\/h2>\n
In diesem Schritt ersetzen Sie die simulierten Daten durch Live-Daten der Cryptocompare API, um die Preise von Bitcoin und Ethereum auf der Webseite in US-Dollar und Euro anzuzeigen.<\/p>\n
Um die Daten f\u00fcr unsere Seite zu erhalten, fordern wir die API https:\/\/min-api.cryptocompare.com\/data\/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR an, die Bitcoin und Ethereum in USD und EUR abfragt. Diese API liefert eine JSON-Antwort.<\/p>\n
Verwenden Sie curl, um eine Anfrage an die API zu senden und die Antwort in einer Terminal-Sitzung anzuzeigen:<\/p>\n
\ncurl 'https:\/\/min-api.cryptocompare.com\/data\/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR'<\/code><\/pre>\n<\/div>\nDie Ausgabe sieht dann etwa so aus:<\/p>\n
\nOutput\r\n{\"BTC\":{\"USD\":21694.18,\"EUR\":21407.64},\"ETH\":{\"USD\":1504.02,\"EUR\":1485.99}}<\/code><\/pre>\n<\/div>\nDieses Ergebnis \u00e4hnelt dem kodierten Datenmodell aus dem vorherigen Schritt, enth\u00e4lt aber die aktuellen Werte von Bitcoin und Ethereum. Jetzt m\u00fcssen wir die Daten nur noch anpassen, indem wir diese URL von unserer Anwendung aus anfordern.<\/p>\n
F\u00fcr die Anfrage verwenden wir die `mounted()`-Funktion von Vue in Kombination mit der `GET`-Funktion der Axios-Bibliothek, um die Daten abzurufen und im Ergebnis-Array des Datenmodells zu speichern. Die `mounted()`-Funktion wird aufgerufen, sobald die Vue-Anwendung auf einem Element eingebunden wird. Nach dem Einbinden der Vue-Anwendung senden wir die Anfrage an die API und speichern die Ergebnisse. Die Webseite wird \u00fcber die \u00c4nderung benachrichtigt und die Werte werden auf der Seite angezeigt.<\/p>\n
\u00d6ffnen Sie zun\u00e4chst die Datei index.html und laden Sie die Axios-Bibliothek, indem Sie ein Skript unterhalb der Zeile einf\u00fcgen, in der Sie Vue platziert haben:<\/p>\n
\n...\r\n<script src=\"https:\/\/unpkg.com\/vue@3\"><\/script>\r\n<script src=\"https:\/\/unpkg.com\/axios\/dist\/axios.min.js\"><\/script>\r\n<script src=\"vueApp.js\"><\/script>\r\n...<\/code><\/pre>\n<\/div>\nSpeichern Sie die Datei und \u00f6ffnen Sie anschlie\u00dfend vueApp.js.<\/p>\n
\u00c4ndern und aktualisieren Sie vueApp.js, um die API anzufordern und das Datenmodell mit den Ergebnissen zu f\u00fcllen.<\/p>\n
\nconst url = \"https:\/\/min-api.cryptocompare.com\/data\/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR\";\r\nconst { createApp } = Vue\r\n\r\ncreateApp({ \r\ndata() {\r\nreturn {\r\nresults:[]\r\n}\r\n},\r\nmounted() {\r\naxios.get(url).then(response => {\r\nthis.results = response.data\r\n})\r\n}\r\n}).mount('#app')<\/code><\/pre>\n<\/div>\nBeachten Sie, dass wir den Standardwert f\u00fcr \u201eresults\u201c entfernt und durch ein leeres Array ersetzt haben. Beim ersten Laden unserer App sind daher keine Daten vorhanden, die HTML-Ansicht erwartet jedoch, dass beim erneuten Laden einige Daten wiederholt werden.<\/p>\n
Die Funktion `axios.get` verwendet ein Promise. Wenn die API erfolgreich Daten zur\u00fcckgibt, wird der Code innerhalb des Blocks ausgef\u00fchrt und die Daten werden in unserer Ergebnisvariablen gespeichert.<\/p>\n
Speichern Sie die Datei und laden Sie die index.html-Seite in Ihrem Webbrowser neu. Diesmal sehen Sie den aktuellen Preis der Kryptow\u00e4hrungen.<\/p>\n
Falls Sie nichts sehen, k\u00f6nnen Sie die Anleitung zur Verwendung der JavaScript-Entwicklerkonsole lesen und diese zum Debuggen Ihres Codes verwenden. Es kann einen Moment dauern, bis die Seite mit den API-Daten aktualisiert wird.<\/p>\n
Sie k\u00f6nnen auch dieses GitHub-Repository einsehen, das HTML- und JS-Dateien enth\u00e4lt, die Sie zur Kreuzvalidierung herunterladen k\u00f6nnen. Sie k\u00f6nnen das Repository auch klonen.<\/p>\n
An diesem Punkt haben Sie Ihre Anwendung so angepasst, dass sie Live-Daten zur \u00dcberpr\u00fcfung abruft.<\/p>\n
Ergebnis<\/h2>\n
In weniger als f\u00fcnfzig Zeilen Code haben Sie eine API-basierte Anwendung mit nur drei Tools erstellt: Vue.js, Axios und der Cryptocompare-API. Sie haben gelernt, wie man Daten auf einer Seite anzeigt, Ergebnisse durchl\u00e4uft und statische Daten durch API-Ergebnisse ersetzt.<\/p>\n
Nachdem Sie nun die Grundlagen verstanden haben, k\u00f6nnen Sie Ihrer Anwendung zus\u00e4tzliche Funktionen hinzuf\u00fcgen. Modifizieren Sie diese Anwendung, um weitere W\u00e4hrungen anzuzeigen, oder nutzen Sie die in diesem Tutorial erlernten Techniken, um andere Webanwendungen mit einer anderen API zu erstellen.<\/p>","protected":false},"excerpt":{"rendered":"Einf\u00fchrung Vue.js ist ein JavaScript-Framework f\u00fcr das Frontend zur Erstellung von Benutzeroberfl\u00e4chen. Es wurde von Grund auf so konzipiert, dass\u2026","protected":false},"author":1,"featured_media":15792,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_focuskw":"\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Vue.js \u0648 Axios \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 \u06cc\u06a9 API","_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","_yoast_wpseo_canonical":"","_yoast_wpseo_opengraph-description":"","_yoast_wpseo_opengraph-image":"","_yoast_wpseo_twitter-description":"","_yoast_wpseo_twitter-image":"","_yoast_wpseo_focuskeywords":"","_yoast_wpseo_primary_category":"193","footnotes":""},"categories":[193,363],"tags":[427,384,433],"class_list":{"0":"post-15785","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-tutorials","8":"category-programming","9":"tag-development","10":"tag-java-script","11":"tag-vue-js"},"yoast_head":"\n
\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Vue.js \u0648 Axios \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 \u06cc\u06a9 API - \u0628\u0644\u0627\u06af ITPiran<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.itpiran.net\/blog\/de\/tutorials\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Vue.js \u0648 Axios \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 \u06cc\u06a9 API - \u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"og:description\" content=\"\u0645\u0642\u062f\u0645\u0647 Vue.js \u06cc\u06a9 \u0641\u0631\u06cc\u0645 \u0648\u0631\u06a9 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062c\u0644\u0648\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u0633\u062a. \u0627\u0632 \u0627\u0628\u062a\u062f\u0627 \u0628\u0647 \u06af\u0648\u0646\u0647 \u0627\u06cc…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.itpiran.net\/blog\/de\/tutorials\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"article:published_time\" content=\"2024-06-29T16:11:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.itpiran.net\/2024\/06\/29193932\/API2.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1793\" \/>\n\t<meta property=\"og:image:height\" content=\"1110\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"4\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\"},\"headline\":\"\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Vue.js \u0648 Axios \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 \u06cc\u06a9 API\",\"datePublished\":\"2024-06-29T16:11:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\\\/\"},\"wordCount\":181,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/06\\\/29193932\\\/API2.jpg\",\"keywords\":[\"development\",\"Java Script\",\"vue.js\"],\"articleSection\":[\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\\\/\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\\\/\",\"name\":\"\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Vue.js \u0648 Axios \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 \u06cc\u06a9 API - \u0628\u0644\u0627\u06af ITPiran\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/06\\\/29193932\\\/API2.jpg\",\"datePublished\":\"2024-06-29T16:11:34+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\\\/#primaryimage\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/06\\\/29193932\\\/API2.jpg\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/06\\\/29193932\\\/API2.jpg\",\"width\":1793,\"height\":1110},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/category\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Vue.js \u0648 Axios \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 \u06cc\u06a9 API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"name\":\"\u0628\u0644\u0627\u06af ITPiran\",\"description\":\"\u0627\u062e\u0628\u0627\u0631 \u0648 \u0645\u0642\u0627\u0644\u0627\u062a \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\",\"name\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"alternateName\":\"ITPIran Blog\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"width\":512,\"height\":512,\"caption\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\",\"name\":\"admin\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/de\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Wie man Vue.js und Axios zur Anzeige von Daten aus einer API verwendet \u2013 ITPiran-Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.itpiran.net\/blog\/de\/tutorials\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\/","og_locale":"de_DE","og_type":"article","og_title":"\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Vue.js \u0648 Axios \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 \u06cc\u06a9 API - \u0628\u0644\u0627\u06af ITPiran","og_description":"\u0645\u0642\u062f\u0645\u0647 Vue.js \u06cc\u06a9 \u0641\u0631\u06cc\u0645 \u0648\u0631\u06a9 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062c\u0644\u0648\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u0633\u062a. \u0627\u0632 \u0627\u0628\u062a\u062f\u0627 \u0628\u0647 \u06af\u0648\u0646\u0647 \u0627\u06cc…","og_url":"https:\/\/www.itpiran.net\/blog\/de\/tutorials\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\/","og_site_name":"\u0628\u0644\u0627\u06af ITPiran","article_published_time":"2024-06-29T16:11:34+00:00","og_image":[{"width":1793,"height":1110,"url":"https:\/\/cdn.itpiran.net\/2024\/06\/29193932\/API2.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"admin","Gesch\u00e4tzte Lesezeit":"4\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\/#article","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\/"},"author":{"name":"admin","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81"},"headline":"\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Vue.js \u0648 Axios \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 \u06cc\u06a9 API","datePublished":"2024-06-29T16:11:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\/"},"wordCount":181,"commentCount":0,"publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2024\/06\/29193932\/API2.jpg","keywords":["development","Java Script","vue.js"],"articleSection":["\u0622\u0645\u0648\u0632\u0634\u06cc","\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\/","url":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\/","name":"Wie man Vue.js und Axios zur Anzeige von Daten aus einer API verwendet \u2013 ITPiran-Blog","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\/#primaryimage"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2024\/06\/29193932\/API2.jpg","datePublished":"2024-06-29T16:11:34+00:00","breadcrumb":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\/#primaryimage","url":"https:\/\/cdn.itpiran.net\/2024\/06\/29193932\/API2.jpg","contentUrl":"https:\/\/cdn.itpiran.net\/2024\/06\/29193932\/API2.jpg","width":1793,"height":1110},{"@type":"BreadcrumbList","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.itpiran.net\/blog\/"},{"@type":"ListItem","position":2,"name":"\u0622\u0645\u0648\u0632\u0634\u06cc","item":"https:\/\/www.itpiran.net\/blog\/category\/tutorials\/"},{"@type":"ListItem","position":3,"name":"\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Vue.js \u0648 Axios \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 \u06cc\u06a9 API"}]},{"@type":"WebSite","@id":"https:\/\/www.itpiran.net\/blog\/#website","url":"https:\/\/www.itpiran.net\/blog\/","name":"ITPiran Blog","description":"Iranische Nachrichten und Artikel zum Thema nachhaltiger Handel","publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.itpiran.net\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.itpiran.net\/blog\/#organization","name":"Nachhaltiger iranischer Unternehmensblog","alternateName":"ITPIran Blog","url":"https:\/\/www.itpiran.net\/blog\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","contentUrl":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","width":512,"height":512,"caption":"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81","name":"Administrator","url":"https:\/\/www.itpiran.net\/blog\/de\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/posts\/15785","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/comments?post=15785"}],"version-history":[{"count":2,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/posts\/15785\/revisions"}],"predecessor-version":[{"id":15793,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/posts\/15785\/revisions\/15793"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/media\/15792"}],"wp:attachment":[{"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/media?parent=15785"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/categories?post=15785"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/tags?post=15785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/cdn.itpiran.net\/2024\/06\/29191500\/1-9.png\")
<\/p>\n![\"\"](\"https:\/\/cdn.itpiran.net\/2024\/06\/29191826\/2-7.png\")
<\/p>\n![\"\"](\"https:\/\/cdn.itpiran.net\/2024\/06\/29192400\/3-5.png\")
<\/p>\n![\"\"](\"https:\/\/cdn.itpiran.net\/2024\/06\/29192512\/4-4.png\")
<\/p>\n