재우니의 블로그


https://www.digitalocean.com/community/tutorials/how-to-use-vue-js-and-axios-to-display-data-from-an-api


list.html


<!DOCTYPE html>
<html lang="en">

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css">
<meta charset="utf-8">
<title>Cryptocurrency Pricing Application</title>
</head>

<body>


<div class="container" id="app">

<h3 class="text-center">Cryptocurrency Pricing</h3>
<div class="columns medium-4" v-for="(result, index) in results">
<div class="card">
<div class="card-section">
<p> {{ index }} </p>
</div>
<div class="card-divider">
<p>$ {{ result.USD }}</p>
</div>
<div class="card-section">
<p> &#8364 {{ result.EUR }}</p>
</div>
</div>
</div>

</div>


<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="vueApp.js"></script>
</body>

</html>



vueApp.js


const url = "https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR";

const vm = new Vue({
el: '#app',
data: {
results: []
},
mounted() {
axios.get(url).then(response => {
this.results = response.data
})
}
});

/*
const vm = new Vue({
el: '#app',
data: {
results: {
"BTC": { "USD": 3759.91, "EUR": 3166.21 },
"ETH": { "USD": 281.7, "EUR": 236.25 },
"NEW Currency": { "USD": 5.60, "EUR": 4.70 }
}
}
});

*/