- \n
- Atom, Visual Studio Code veya Sublime Text gibi JavaScript s\u00f6zdizimi vurgulamas\u0131n\u0131 destekleyen bir metin d\u00fczenleyici. Bu d\u00fczenleyiciler Windows, macOS ve Linux'ta mevcuttur.<\/li>\n
- HTML ve JavaScript'i birlikte kullanma konusunda bilgi edinin. Daha fazla bilgi i\u00e7in HTML'e JavaScript Nas\u0131l Eklenir? ba\u015fl\u0131kl\u0131 makaleyi okuyun.<\/li>\n
- JSON veri format\u0131n\u0131 tan\u0131ma b\u00f6l\u00fcm\u00fcnde JavaScript'te JSON ile nas\u0131l \u00e7al\u0131\u015f\u0131laca\u011f\u0131 hakk\u0131nda daha fazla bilgi edinebilirsiniz.<\/li>\n
- API \u0130steklerine Ba\u015flarken API'lerle \u00e7al\u0131\u015fma konusunda kapsaml\u0131 bir e\u011fitim i\u00e7in Python3'te Web API Nas\u0131l Kullan\u0131l\u0131r'a g\u00f6z at\u0131n. Python i\u00e7in yaz\u0131lm\u0131\u015f olsa da, API'lerle \u00e7al\u0131\u015fman\u0131n temel kavramlar\u0131n\u0131 anlaman\u0131za yard\u0131mc\u0131 olur.<\/li>\n<\/ul>\n
Ad\u0131m 1 \u2013 Temel bir Vue Uygulamas\u0131 Olu\u015fturun<\/h2>\n
Bu ad\u0131mda, temel bir Vue uygulamas\u0131 olu\u015fturacaks\u0131n\u0131z. API'den gelen canl\u0131 verilerle de\u011fi\u015ftirece\u011fimiz baz\u0131 sahte veriler i\u00e7eren tek bir HTML sayfas\u0131 olu\u015fturaca\u011f\u0131z. Sahte verileri g\u00f6r\u00fcnt\u00fclemek i\u00e7in Vue.js kullanaca\u011f\u0131z. Bu ilk ad\u0131mda, t\u00fcm kodu tek bir dosyada tutaca\u011f\u0131z.<\/p>\n
Metin d\u00fczenleyicinizi kullanarak index.html ad\u0131nda yeni bir dosya olu\u015fturun.<\/p>\n
Bu dosyaya, bir HTML iskeleti tan\u0131mlayan ve CSS Foundation \u00e7er\u00e7evesini ve Vue.js kitapl\u0131\u011f\u0131n\u0131 bir i\u00e7erik da\u011f\u0131t\u0131m a\u011f\u0131ndan (CDN) \u00e7eken a\u015fa\u011f\u0131daki HTML i\u015faretlemesini ekleyin. Bir CDN kulland\u0131\u011f\u0131n\u0131zda, uygulaman\u0131z\u0131 olu\u015fturmaya ba\u015flamak i\u00e7in ek kod indirmeniz gerekmez.<\/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>\n{{ \u200b\u200bBTCinUSD }} sat\u0131r\u0131, Vue.js'nin sa\u011flad\u0131\u011f\u0131 veriler i\u00e7in bir yer tutucudur ve kullan\u0131c\u0131 aray\u00fcz\u00fcnde verileri bildirimsel olarak sunmam\u0131z\u0131 sa\u011flar. Bu verileri tan\u0131mlayal\u0131m.<\/p>\n
Etiketin hemen alt\u0131nda \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>\nBu kod, yeni bir Vue uygulama \u00f6rne\u011fi olu\u015fturur ve \u00f6rne\u011fi uygulama kimli\u011fine sahip \u00f6\u011feye ba\u011flar. Vue, bu i\u015flemi uygulamay\u0131 ba\u011flama olarak adland\u0131r\u0131r. Yeni bir Vue \u00f6rne\u011fi tan\u0131mlar ve ona bir yap\u0131land\u0131rma nesnesi ileterek yap\u0131land\u0131r\u0131r\u0131z. createApp \u00f6rne\u011fine BTCinUSD de\u011ferini d\u00f6nd\u00fcren bir veri nesnesi iletiriz. Ayr\u0131ca, createApp \u00f6rne\u011finin ba\u011flama y\u00f6ntemini, bu uygulamay\u0131 ba\u011flamak istedi\u011fimiz \u00f6\u011fe kimli\u011fini ve g\u00f6r\u00fcn\u00fcmde kullan\u0131labilir hale getirmek istedi\u011fimiz verileri i\u00e7eren bir veri se\u00e7ene\u011fini belirten #app arg\u00fcman\u0131yla \u00e7a\u011f\u0131r\u0131r\u0131z.<\/p>\n
Bu \u00f6rnekte, veri modelimiz Bitcoin fiyat\u0131 i\u00e7in bir kukla de\u011fere sahip tek bir anahtar-de\u011fer \u00e7ifti i\u00e7eriyor: { BTCinUSD: 3759.91}. Bu veriler, anahtar\u0131 \u015fu \u015fekilde \u00e7ift s\u00fcsl\u00fc parantez i\u00e7ine ald\u0131\u011f\u0131m\u0131z HTML sayfam\u0131zda veya g\u00f6r\u00fcn\u00fcm\u00fcm\u00fczde g\u00f6r\u00fcnt\u00fclenir:<\/p>\n
\n<div class=\"card-divider\">\r\n<p>{{ BTCinUSD }}<\/p>\r\n<\/div><\/code><\/pre>\n<\/div>\nBu \u015fifrelenmi\u015f de\u011feri zamanla API'den gelen canl\u0131 verilerle de\u011fi\u015ftirece\u011fiz.<\/p>\n
Bu dosyay\u0131 taray\u0131c\u0131n\u0131zda a\u00e7\u0131n. Ekran\u0131n\u0131zda, sahte verileri g\u00f6steren a\u015fa\u011f\u0131daki \u00e7\u0131kt\u0131y\u0131 g\u00f6receksiniz:<\/p>\n
<\/p>\n
Fiyat\u0131 ABD dolar\u0131 cinsinden g\u00f6r\u00fcnt\u00fcl\u00fcyoruz. Euro gibi ek bir para biriminde g\u00f6r\u00fcnt\u00fclemek i\u00e7in veri modelimize ba\u015fka bir anahtar-de\u011fer \u00e7ifti ekleyece\u011fiz ve i\u015faretlemeye ba\u015fka bir s\u00fctun ekleyece\u011fiz. \u0130lk olarak, veri modeline Euro sat\u0131r\u0131n\u0131 ekleyelim:<\/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>\nDaha sonra b\u00f6l\u00fcm
<div class><\/code> Mevcut olan\u0131 a\u015fa\u011f\u0131daki sat\u0131rlarla de\u011fi\u015ftirin.<\/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>\n\u015eimdi dosyay\u0131 kaydedin ve taray\u0131c\u0131n\u0131zda yeniden y\u00fckleyin. Uygulama art\u0131k Bitcoin fiyat\u0131n\u0131 hem Euro hem de ABD Dolar\u0131 cinsinden g\u00f6sterecektir.<\/p>\n
Bu ad\u0131mda, Vue uygulaman\u0131z\u0131 \u00f6rnek verilerle olu\u015fturup y\u00fcklemesini sa\u011flayacaks\u0131n\u0131z. \u015eimdiye kadar her \u015feyi tek bir dosyada yapt\u0131k, \u015fimdi de s\u00fcrd\u00fcr\u00fclebilirli\u011fi art\u0131rmak i\u00e7in her \u015feyi ayr\u0131 dosyalara b\u00f6lece\u011fiz.<\/p>\n
Ad\u0131m 2 \u2013 Netlik \u0130\u00e7in JavaScript ve HTML'yi Ay\u0131rma<\/h2>\n
Nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 \u00f6\u011frenmek i\u00e7in t\u00fcm kodu tek bir dosyaya koyuyoruz. Bu ad\u0131mda, uygulama kodunu iki ayr\u0131 dosyaya ay\u0131r\u0131yoruz: index.html ve vueApp.js. index.html dosyas\u0131 i\u015faretlemeyi, JavaScript dosyas\u0131 ise uygulama mant\u0131\u011f\u0131n\u0131 i\u00e7eriyor. Her iki dosyay\u0131 da ayn\u0131 dizinde tutuyoruz.<\/p>\n
\u00d6ncelikle index.html dosyas\u0131n\u0131 d\u00fczenleyip JavaScript kodunu kald\u0131r\u0131p yerine vueApp.js dosyas\u0131na giden bir ba\u011flant\u0131 koyal\u0131m.<\/p>\n
Dosyan\u0131n \u015fu b\u00f6l\u00fcm\u00fcn\u00fc bulun:<\/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>\nVe bunu \u015fu \u015fekilde de\u011fi\u015ftirin:<\/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>\nDaha sonra index.html dosyas\u0131yla ayn\u0131 klas\u00f6rde vueApp.js dosyas\u0131n\u0131 olu\u015fturun.<\/p>\n
Bu yeni dosyaya, <code> etiketi olmadan index.html dosyas\u0131nda bulunan ayn\u0131 JavaScript kodunu yap\u0131\u015ft\u0131r\u0131n. \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>\nDosyay\u0131 kaydedin ve taray\u0131c\u0131da index.html'yi yeniden y\u00fckleyin. \u00d6ncekiyle ayn\u0131 sonucu g\u00f6receksiniz.<\/p>\n
Burada uygulamay\u0131 i\u015faretlemeden ay\u0131rd\u0131n\u0131z. Ard\u0131ndan, Bitcoin'den daha fazla kripto para birimini desteklemek i\u00e7in daha fazla veri ekleyeceksiniz.<\/p>\n
Ad\u0131m 3 \u2013 Veriler \u00dczerinde Yineleme Yapmak \u0130\u00e7in Vue Kullan\u0131m\u0131<\/h2>\n
Bu ad\u0131mda, verileri yeniden yap\u0131land\u0131racak ve g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc Bitcoin ve Ethereum fiyatlar\u0131n\u0131 g\u00f6sterecek \u015fekilde de\u011fi\u015ftireceksiniz.<\/p>\n
vueApp.js dosyas\u0131n\u0131 a\u00e7\u0131n ve veri modelinin d\u00f6n\u00fc\u015f k\u0131sm\u0131n\u0131 \u015fu \u015fekilde de\u011fi\u015ftirin:<\/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>\nVeri modelimiz, i\u00e7 i\u00e7e ge\u00e7mi\u015f bir veri yap\u0131s\u0131yla biraz daha karma\u015f\u0131k hale geldi. Art\u0131k "results" adl\u0131, biri Bitcoin fiyat\u0131, di\u011feri Ethereum fiyat\u0131 i\u00e7in olmak \u00fczere iki kay\u0131t i\u00e7eren bir anahtar\u0131m\u0131z var. Bu yeni yap\u0131, g\u00f6r\u00fcn\u00fcm\u00fcm\u00fczdeki tekrarlar\u0131 azaltmam\u0131z\u0131 sa\u011fl\u0131yor. Ayr\u0131ca, Cryptocompare API'sinden ald\u0131\u011f\u0131m\u0131z verilere de benziyor.<\/p>\n
Dosyay\u0131 kaydedin.<\/p>\n
\u015eimdi verileri daha planl\u0131 bir \u015fekilde i\u015fleyebilmek i\u00e7in i\u015faretlememizi de\u011fi\u015ftirelim.<\/p>\n
Index.html dosyas\u0131n\u0131 a\u00e7\u0131n ve Bitcoin fiyat\u0131n\u0131 g\u00f6r\u00fcnt\u00fcledi\u011fimiz dosyan\u0131n \u015fu b\u00f6l\u00fcm\u00fcn\u00fc bulun:<\/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>\nBunu, tan\u0131mlad\u0131\u011f\u0131n\u0131z veri k\u00fcmesi \u00fczerinde yineleme yapan bu kodla de\u011fi\u015ftirin.<\/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>\nBu kod, bir for d\u00f6ng\u00fcs\u00fc gibi davranan v-for ifadesini kullan\u0131r. Veri modelimizdeki t\u00fcm anahtar-de\u011fer \u00e7iftlerini yineler ve her birinin verilerini g\u00f6r\u00fcnt\u00fcler.<\/p>\n
Taray\u0131c\u0131y\u0131 yeniden y\u00fckledi\u011finizde sa\u00e7ma sapan fiyatlar g\u00f6receksiniz:<\/p>\n
Bu de\u011fi\u015fiklik, vueApp.js'deki sonu\u00e7 verilerine yeni bir para birimi eklememizi ve bunu ba\u015fka bir de\u011fi\u015fiklik yapmadan ekranda g\u00f6r\u00fcnt\u00fclememizi sa\u011flar.<\/p>\n
Bunu denemek i\u00e7in veri setine vurgulanan bilgilerle birlikte ba\u015fka bir sahte giri\u015f ekleyin:<\/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>\nEthereum giri\u015finden sonra gelen virg\u00fcl\u00fc girin. Dosyay\u0131 kaydedin.<\/p>\n
\u015eimdi sayfay\u0131 bir web taray\u0131c\u0131s\u0131nda y\u00fcklerseniz, yeni girdinin g\u00f6r\u00fcnt\u00fclendi\u011fini g\u00f6receksiniz:<\/p>\n
Verileri programatik olarak inceledi\u011fimizde, i\u015faretlemeye manuel olarak yeni s\u00fctunlar eklememize gerek kalmaz.<\/p>\n
Burada, \u00e7e\u015fitli para birimlerinin fiyatlar\u0131n\u0131 g\u00f6r\u00fcnt\u00fclemek i\u00e7in \u00f6rnek veriler kulland\u0131n\u0131z. \u015eimdi, Cryptocompare API'sini kullanarak ger\u00e7ek verileri alal\u0131m.<\/p>\n
Ad\u0131m 4 \u2013 API'den veri al\u0131n<\/h2>\n
Bu ad\u0131mda, sim\u00fcle edilmi\u015f verileri Cryptocompare API'sinden gelen canl\u0131 verilerle de\u011fi\u015ftirerek Bitcoin ve Ethereum fiyatlar\u0131n\u0131 web sayfas\u0131nda ABD dolar\u0131 ve Euro cinsinden g\u00f6r\u00fcnt\u00fclersiniz.<\/p>\n
Sayfam\u0131z\u0131n verilerini almak i\u00e7in https:\/\/min-api.cryptocompare.com\/data\/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR adresini istiyoruz. Bu API, Bitcoin ve Ethereum'u USD ve EUR cinsinden talep ediyor. Bu API, bir JSON yan\u0131t\u0131 d\u00f6nd\u00fcr\u00fcyor.<\/p>\n
API'ye bir istek g\u00f6ndermek ve terminal oturumunda yan\u0131t\u0131 g\u00f6r\u00fcnt\u00fclemek i\u00e7in curl'\u00fc kullan\u0131n:<\/p>\n
\ncurl 'https:\/\/min-api.cryptocompare.com\/data\/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR'<\/code><\/pre>\n<\/div>\n\u00c7\u0131kt\u0131y\u0131 \u015fu \u015fekilde g\u00f6receksiniz:<\/p>\n
\nOutput\r\n{\"BTC\":{\"USD\":21694.18,\"EUR\":21407.64},\"ETH\":{\"USD\":1504.02,\"EUR\":1485.99}}<\/code><\/pre>\n<\/div>\nBu sonu\u00e7, \u00f6nceki ad\u0131mda kulland\u0131\u011f\u0131n\u0131z kodlanm\u0131\u015f veri modeline benzer, ancak Bitcoin ve Ethereum'un mevcut de\u011ferleriyle. \u015eimdi tek yapmam\u0131z gereken, uygulamam\u0131zdan bu URL'yi talep ederek verileri de\u011fi\u015ftirmek.<\/p>\n
\u0130stek i\u00e7in, verileri almak ve veri modelindeki sonu\u00e7lar dizisine kaydetmek i\u00e7in Vue'nin mounted() fonksiyonunu Axios k\u00fct\u00fcphanesinin GET fonksiyonuyla birlikte kullan\u0131yoruz. Mounted fonksiyonu, Vue uygulamas\u0131 bir \u00f6\u011feye ba\u011fland\u0131\u011f\u0131nda \u00e7a\u011fr\u0131l\u0131r. Vue uygulamas\u0131 ba\u011fland\u0131ktan sonra, iste\u011fi API'ye g\u00f6nderir ve sonu\u00e7lar\u0131 kaydederiz. Web sayfas\u0131na de\u011fi\u015fiklik bildirilir ve de\u011ferler sayfada g\u00f6r\u00fcn\u00fcr.<\/p>\n
\u00d6ncelikle index.html'yi a\u00e7\u0131n ve Vue'yu yerle\u015ftirdi\u011finiz sat\u0131r\u0131n alt\u0131na bir script ekleyerek Axios k\u00fct\u00fcphanesini y\u00fckleyin:<\/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>\nDosyay\u0131 kaydedin ve ard\u0131ndan vueApp.js'yi a\u00e7\u0131n.<\/p>\n
API'yi talep etmek ve veri modelini sonu\u00e7larla doldurmak i\u00e7in vueApp.js'yi de\u011fi\u015ftirin ve g\u00fcncelleyin.<\/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>\nSonu\u00e7lar\u0131n varsay\u0131lan de\u011ferini kald\u0131r\u0131p yerine bo\u015f bir dizi kulland\u0131\u011f\u0131m\u0131z\u0131 fark edeceksiniz. Uygulamam\u0131z ilk y\u00fcklendi\u011finde hi\u00e7bir verimiz olmayacak, ancak HTML g\u00f6r\u00fcn\u00fcm\u00fc yeniden y\u00fcklendi\u011finde baz\u0131 verilerin tekrarlanmas\u0131n\u0131 bekliyor.<\/p>\n
Axios.get fonksiyonu bir Promise kullan\u0131r. API verileri ba\u015far\u0131yla d\u00f6nd\u00fcrd\u00fc\u011f\u00fcnde, blok i\u00e7indeki kod y\u00fcr\u00fct\u00fcl\u00fcr ve veriler results de\u011fi\u015fkenimizde saklan\u0131r.<\/p>\n
Dosyay\u0131 kaydedin ve web taray\u0131c\u0131n\u0131zdaki index.html sayfas\u0131n\u0131 yeniden y\u00fckleyin. Bu sefer kripto para birimlerinin g\u00fcncel fiyat\u0131n\u0131 g\u00f6receksiniz.<\/p>\n
Hi\u00e7bir \u015fey g\u00f6rm\u00fcyorsan\u0131z, JavaScript Geli\u015ftirici Konsolu Nas\u0131l Kullan\u0131l\u0131r? ba\u015fl\u0131kl\u0131 makaleyi inceleyebilir ve kodunuzu hata ay\u0131klamak i\u00e7in JavaScript Konsolu'nu kullanabilirsiniz. Sayfan\u0131n API verileriyle yenilenmesi bir dakika s\u00fcrebilir.<\/p>\n
Ayr\u0131ca \u00e7apraz do\u011frulama i\u00e7in indirebilece\u011finiz HTML ve JS dosyalar\u0131n\u0131n bulundu\u011fu bu Github deposuna da g\u00f6z atabilirsiniz. Ayr\u0131ca deponun klonunu da olu\u015fturabilirsiniz.<\/p>\n
Bu noktada, uygulaman\u0131z\u0131 inceleme i\u00e7in canl\u0131 verileri \u00e7a\u011f\u0131racak \u015fekilde de\u011fi\u015ftirmi\u015f olursunuz.<\/p>\n
Sonu\u00e7<\/h2>\n
Elli sat\u0131rdan k\u0131sa bir s\u00fcrede, yaln\u0131zca \u00fc\u00e7 ara\u00e7 kullanarak bir API kullanan uygulama olu\u015fturdunuz: Vue.js, Axios ve Cryptocompare API. Bir sayfada veri g\u00f6r\u00fcnt\u00fclemeyi, sonu\u00e7lar \u00fczerinde yineleme yapmay\u0131 ve statik verileri API sonu\u00e7lar\u0131yla de\u011fi\u015ftirmeyi \u00f6\u011frendiniz.<\/p>\n
Art\u0131k temelleri anlad\u0131\u011f\u0131n\u0131za g\u00f6re, uygulaman\u0131za ek i\u015flevler ekleyebilirsiniz. Bu uygulamay\u0131 ek para birimleri g\u00f6r\u00fcnt\u00fcleyecek \u015fekilde d\u00fczenleyebilir veya bu e\u011fitimde \u00f6\u011frendi\u011finiz teknikleri kullanarak farkl\u0131 bir API kullanarak ba\u015fka web uygulamalar\u0131 olu\u015fturabilirsiniz.<\/p>","protected":false},"excerpt":{"rendered":"Giri\u015f Vue.js, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in kullan\u0131lan bir \u00f6n u\u00e7 JavaScript \u00e7er\u00e7evesidir. En ba\u015f\u0131ndan itibaren \u015fu \u015fekilde tasarlanm\u0131\u015ft\u0131r:","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\/tr\/tutorials\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\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\/tr\/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=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 dakika\" \/>\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\":\"tr\",\"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\":\"tr\",\"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\":\"tr\",\"@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\":\"tr\"},{\"@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\":\"tr\",\"@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\\\/tr\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bir API'den veri g\u00f6r\u00fcnt\u00fclemek i\u00e7in Vue.js ve Axios nas\u0131l kullan\u0131l\u0131r - 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\/tr\/tutorials\/how-to-use-vue-js-and-axios-to-display-data-from-an-api\/","og_locale":"tr_TR","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\/tr\/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":{"Yazan:":"admin","Tahmini okuma s\u00fcresi":"4 dakika"},"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":"tr","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":"Bir API'den veri g\u00f6r\u00fcnt\u00fclemek i\u00e7in Vue.js ve Axios nas\u0131l kullan\u0131l\u0131r - 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":"tr","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":"tr","@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":"\u0130ran S\u00fcrd\u00fcr\u00fclebilir Ticaret Haberleri ve Makaleleri","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":"tr"},{"@type":"Organization","@id":"https:\/\/www.itpiran.net\/blog\/#organization","name":"S\u00fcrd\u00fcr\u00fclebilir \u0130ran \u0130\u015fletmeleri Blogu","alternateName":"ITPIran Blog","url":"https:\/\/www.itpiran.net\/blog\/","logo":{"@type":"ImageObject","inLanguage":"tr","@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":"y\u00f6netici","url":"https:\/\/www.itpiran.net\/blog\/tr\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/posts\/15785","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/comments?post=15785"}],"version-history":[{"count":2,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/posts\/15785\/revisions"}],"predecessor-version":[{"id":15793,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/posts\/15785\/revisions\/15793"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/media\/15792"}],"wp:attachment":[{"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/media?parent=15785"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/categories?post=15785"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/tr\/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