- \n
- Un editor de texto que admita el resaltado de sintaxis de JavaScript, como Atom, Visual Studio Code o Sublime Text. Estos editores est\u00e1n disponibles para Windows, macOS y Linux.<\/li>\n
- Conocimientos b\u00e1sicos sobre el uso conjunto de HTML y JavaScript. M\u00e1s informaci\u00f3n en C\u00f3mo agregar JavaScript a HTML.<\/li>\n
- Familiar\u00edcese con el formato de datos JSON, donde podr\u00e1 aprender m\u00e1s sobre c\u00f3mo trabajar con JSON en JavaScript.<\/li>\n
- Primeros pasos con las solicitudes a la API. Para obtener un tutorial completo sobre c\u00f3mo trabajar con API, consulte C\u00f3mo usar la API web en Python 3. Aunque est\u00e1 escrito para Python, le ayudar\u00e1 a comprender los conceptos b\u00e1sicos del trabajo con API.<\/li>\n<\/ul>\n
Paso 1 \u2013 Crea una aplicaci\u00f3n b\u00e1sica de Vue<\/h2>\n
En este paso, crear\u00e1s una aplicaci\u00f3n b\u00e1sica de Vue. Crearemos una p\u00e1gina HTML con datos de prueba que luego reemplazaremos con datos reales de la API. Usaremos Vue.js para mostrar estos datos de prueba. Para este primer paso, mantendremos todo el c\u00f3digo en un solo archivo.<\/p>\n
Utilizando tu editor de texto, crea un nuevo archivo llamado index.html.<\/p>\n
En este archivo, agregue el siguiente c\u00f3digo HTML, que define la estructura b\u00e1sica y descarga el framework CSS Foundation y la biblioteca Vue.js desde una red de distribuci\u00f3n de contenido (CDN). Al usar una CDN, no es necesario descargar c\u00f3digo adicional para comenzar a desarrollar su aplicaci\u00f3n.<\/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>\nLa l\u00ednea {{ \u200b\u200bBTCinUSD }} es un marcador de posici\u00f3n para los datos que proporciona Vue.js, lo que nos permite presentar datos de forma declarativa en la interfaz de usuario. Definamos esos datos.<\/p>\n
Justo debajo de la etiqueta \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>\nEste c\u00f3digo crea una nueva instancia de la aplicaci\u00f3n Vue y la vincula al elemento con el ID de la aplicaci\u00f3n. Vue denomina a este proceso "montar la aplicaci\u00f3n". Definimos una nueva instancia de Vue y la configuramos pas\u00e1ndole un objeto de configuraci\u00f3n. Pasamos a la instancia `createApp` un objeto de datos que devuelve el valor `BTCinUSD`. Adem\u00e1s, llamamos al m\u00e9todo `mount` de la instancia `createApp` con el argumento `#app`, que especifica el ID del elemento en el que queremos montar esta aplicaci\u00f3n, y una opci\u00f3n de datos que contiene la informaci\u00f3n que queremos mostrar en la vista.<\/p>\n
En este ejemplo, nuestro modelo de datos contiene un \u00fanico par clave-valor con un valor ficticio para el precio de Bitcoin: { BTCinUSD: 3759.91 }. Estos datos se muestran en nuestra p\u00e1gina o vista HTML, donde encerramos la clave entre llaves dobles, as\u00ed:<\/p>\n
\n<div class=\"card-divider\">\r\n<p>{{ BTCinUSD }}<\/p>\r\n<\/div><\/code><\/pre>\n<\/div>\nFinalmente, reemplazaremos este valor cifrado con datos reales de la API.<\/p>\n
Abre este archivo en tu navegador. Ver\u00e1s el siguiente resultado en tu pantalla, que muestra los datos de ejemplo:<\/p>\n
<\/p>\n
Estamos mostrando el precio en d\u00f3lares estadounidenses. Para mostrarlo en otra moneda, como euros, a\u00f1adiremos otro par clave-valor a nuestro modelo de datos y otra columna en el marcado. Primero, agregamos la fila de euros al modelo de datos:<\/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>\nLuego la secci\u00f3n
<div class><\/code> Sustituya el texto existente por las siguientes l\u00edneas.<\/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>\nAhora guarda el archivo y vuelve a abrirlo en tu navegador. La aplicaci\u00f3n mostrar\u00e1 el precio del Bitcoin tanto en euros como en d\u00f3lares estadounidenses.<\/p>\n
En este paso, crear\u00e1s tu aplicaci\u00f3n Vue con datos de ejemplo para comprobar que se carga correctamente. Hasta ahora, hemos trabajado en un solo archivo, as\u00ed que ahora lo dividiremos en archivos separados para facilitar el mantenimiento.<\/p>\n
Paso 2 \u2013 Separar JavaScript y HTML para mayor claridad<\/h2>\n
Para comprender su funcionamiento, reunimos todo el c\u00f3digo en un solo archivo. En este paso, separamos el c\u00f3digo de la aplicaci\u00f3n en dos archivos distintos: index.html y vueApp.js. El archivo index.html gestiona el marcado, y el archivo JavaScript contiene la l\u00f3gica de la aplicaci\u00f3n. Ambos archivos se guardan en el mismo directorio.<\/p>\n
Primero, modifica el archivo index.html, elimina el c\u00f3digo JavaScript y reempl\u00e1zalo con un enlace al archivo vueApp.js.<\/p>\n
Localiza esta secci\u00f3n del archivo:<\/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>\nY c\u00e1mbialo para que se vea as\u00ed:<\/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>\nLuego, crea el archivo vueApp.js en la misma carpeta que el archivo index.html.<\/p>\n
En este nuevo archivo, pegue el mismo c\u00f3digo JavaScript que estaba originalmente en el archivo index.html, sin la etiqueta <code>. \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>\nGuarda el archivo y vuelve a cargar index.html en el navegador. Ver\u00e1s el mismo resultado que antes.<\/p>\n
Aqu\u00ed has separado la aplicaci\u00f3n del marcado. A continuaci\u00f3n, a\u00f1adir\u00e1s m\u00e1s datos para admitir m\u00e1s criptomonedas adem\u00e1s de Bitcoin.<\/p>\n
Paso 3 \u2013 Usar Vue para iterar sobre los datos<\/h2>\n
En este paso, reconstruir\u00e1 los datos y cambiar\u00e1 su vista para mostrar los precios de Bitcoin y Ethereum.<\/p>\n
Abre el archivo vueApp.js y modifica la parte de retorno del modelo de datos para que tenga el siguiente aspecto:<\/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>\nNuestro modelo de datos se ha vuelto un poco m\u00e1s complejo con una estructura anidada. Ahora tenemos una clave llamada \u00abresultados\u00bb que contiene dos registros: uno para el precio de Bitcoin y otro para el precio de Ethereum. Esta nueva estructura nos permite reducir la duplicaci\u00f3n en nuestra vista. Adem\u00e1s, se asemeja a los datos que obtenemos de la API de Cryptocompare.<\/p>\n
Guarda el archivo.<\/p>\n
Ahora vamos a modificar nuestro c\u00f3digo para procesar los datos de una manera m\u00e1s planificada.<\/p>\n
Abre el archivo index.html y busca esta secci\u00f3n donde mostramos el precio de Bitcoin:<\/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>\nReempl\u00e1zalo con este c\u00f3digo, que itera sobre el conjunto de datos que definiste.<\/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>\nEste c\u00f3digo utiliza la instrucci\u00f3n `v-for`, que funciona como un bucle `for`. Itera sobre todos los pares clave-valor de nuestro modelo de datos y muestra los datos de cada uno.<\/p>\n
Cuando recargues la p\u00e1gina en el navegador, ver\u00e1s los precios rid\u00edculos:<\/p>\n
Esta modificaci\u00f3n nos permite agregar una nueva moneda a los datos de resultados en vueApp.js y mostrarla en la pantalla sin realizar m\u00e1s cambios.<\/p>\n
Agrega otra entrada simulada al conjunto de datos con la informaci\u00f3n resaltada para probar esto:<\/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>\nIntroduzca la coma final despu\u00e9s de la entrada de Ethereum. Guarde el archivo.<\/p>\n
Si ahora carga la p\u00e1gina en un navegador web, ver\u00e1 la nueva entrada mostrada:<\/p>\n
Cuando examinamos los datos mediante programaci\u00f3n, no necesitamos agregar manualmente nuevas columnas en el marcado.<\/p>\n
Aqu\u00ed, usaste datos de muestra para ver los precios de varias monedas. Ahora, obtengamos los datos reales usando la API de Cryptocompare.<\/p>\n
Paso 4 \u2013 Obtener datos de la API<\/h2>\n
En este paso, se reemplazan los datos simulados con datos reales de la API de Cryptocompare para mostrar los precios de Bitcoin y Ethereum en la p\u00e1gina web en d\u00f3lares estadounidenses y euros.<\/p>\n
Para obtener los datos de nuestra p\u00e1gina, solicitamos informaci\u00f3n a https:\/\/min-api.cryptocompare.com\/data\/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR, que pide los precios de Bitcoin y Ethereum en USD y EUR. Esta API devuelve una respuesta en formato JSON.<\/p>\n
Utilice curl para enviar una solicitud a la API y ver la respuesta en una sesi\u00f3n de terminal:<\/p>\n
\ncurl 'https:\/\/min-api.cryptocompare.com\/data\/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR'<\/code><\/pre>\n<\/div>\nEl resultado que ver\u00e1s ser\u00e1 similar a este:<\/p>\n
\nOutput\r\n{\"BTC\":{\"USD\":21694.18,\"EUR\":21407.64},\"ETH\":{\"USD\":1504.02,\"EUR\":1485.99}}<\/code><\/pre>\n<\/div>\nEste resultado es similar al modelo de datos codificado que usaste en el paso anterior, pero con los valores actuales de Bitcoin y Ethereum. Ahora solo necesitamos modificar los datos solicitando esta URL desde nuestra aplicaci\u00f3n.<\/p>\n
Para la solicitud, utilizamos la funci\u00f3n `mounted()` de Vue junto con la funci\u00f3n `GET` de la biblioteca Axios para obtener los datos y almacenarlos en el array de resultados del modelo de datos. La funci\u00f3n `mounted` se llama cuando la aplicaci\u00f3n Vue se monta en un elemento. Una vez montada la aplicaci\u00f3n Vue, enviamos la solicitud a la API y almacenamos los resultados. La p\u00e1gina web recibe una notificaci\u00f3n del cambio y los valores se muestran en ella.<\/p>\n
Primero, abre index.html y carga la biblioteca Axios a\u00f1adiendo un script debajo de la l\u00ednea donde colocaste Vue:<\/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>\nGuarda el archivo y luego abre vueApp.js.<\/p>\n
Modifica y actualiza vueApp.js para solicitar la API y completar el modelo de datos con los resultados.<\/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>\nObserve que hemos eliminado el valor predeterminado de `results` y lo hemos reemplazado por un array vac\u00edo. Al cargar nuestra aplicaci\u00f3n por primera vez, no tendremos datos, pero la vista HTML espera que se repita informaci\u00f3n al recargarse.<\/p>\n
La funci\u00f3n axios.get utiliza una Promesa. Cuando la API devuelve datos correctamente, se ejecuta el c\u00f3digo dentro del bloque y los datos se almacenan en nuestra variable de resultados.<\/p>\n
Guarda el archivo y vuelve a cargar la p\u00e1gina index.html en tu navegador. Esta vez ver\u00e1s el precio actual de las criptomonedas.<\/p>\n
Si no ve nada, puede consultar la gu\u00eda sobre c\u00f3mo usar la consola de desarrollador de JavaScript y usarla para depurar su c\u00f3digo. La p\u00e1gina puede tardar un minuto en actualizarse con los datos de la API.<\/p>\n
Tambi\u00e9n puedes consultar este repositorio de GitHub, que contiene archivos HTML y JS que puedes descargar para realizar pruebas cruzadas. Tambi\u00e9n puedes clonar el repositorio.<\/p>\n
En este punto, has modificado tu aplicaci\u00f3n para que solicite datos en tiempo real para su revisi\u00f3n.<\/p>\n
Resultado<\/h2>\n
En menos de cincuenta l\u00edneas de c\u00f3digo, creaste una aplicaci\u00f3n que consume una API usando solo tres herramientas: Vue.js, Axios y la API de Cryptocompare. Aprendiste a mostrar datos en una p\u00e1gina, iterar sobre los resultados y reemplazar datos est\u00e1ticos con los resultados de la API.<\/p>\n
Ahora que comprende los conceptos b\u00e1sicos, puede agregar funcionalidades adicionales a su aplicaci\u00f3n. Modifique esta aplicaci\u00f3n para mostrar otras monedas o utilice las t\u00e9cnicas aprendidas en este tutorial para crear otras aplicaciones web con una API diferente.<\/p>","protected":false},"excerpt":{"rendered":"Introducci\u00f3n: Vue.js es un framework JavaScript front-end para crear interfaces de usuario. Fue dise\u00f1ado desde cero para que\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\/es\/tutorials\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\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\/es\/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=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\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\":\"es\",\"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\":\"es\",\"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\":\"es\",\"@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\":\"es\"},{\"@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\":\"es\",\"@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\\\/es\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo usar Vue.js y Axios para mostrar datos de una API - Blog de ITPiran","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\/es\/tutorials\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\/","og_locale":"es_ES","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\/es\/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":{"Escrito por":"admin","Tiempo de lectura":"4 minutos"},"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":"es","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":"C\u00f3mo usar Vue.js y Axios para mostrar datos de una API - Blog de 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":"es","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":"es","@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":"Blog de ITPiran","description":"Noticias y art\u00edculos sobre comercio sostenible en Ir\u00e1n","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":"es"},{"@type":"Organization","@id":"https:\/\/www.itpiran.net\/blog\/#organization","name":"Blog sobre negocios iran\u00edes sostenibles","alternateName":"ITPIran Blog","url":"https:\/\/www.itpiran.net\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@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":"administraci\u00f3n","url":"https:\/\/www.itpiran.net\/blog\/es\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/posts\/15785","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/comments?post=15785"}],"version-history":[{"count":2,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/posts\/15785\/revisions"}],"predecessor-version":[{"id":15793,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/posts\/15785\/revisions\/15793"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/media\/15792"}],"wp:attachment":[{"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/media?parent=15785"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/categories?post=15785"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/es\/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