<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- getData()๋ผ๋ ํด๋ฆญ ์ด๋ฒคํธ ์ฐ๊ฒฐ -->
<button @click="getData">get users</button>
<!-- users์ ๋ฐ์ดํฐ๊ฐ ๋ณ๊ฒฝ๋๋ฉด ๋ฐ์์จ ๋ฐ์ดํฐ๋ก ํ์๋จ -->
<div>{{ users }}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- axios import -->
<script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
methods: {
//๋ฒํผ ์ด๋ฒคํธ ํธ๋ค๋ฌ
getData: function() {
//Vue ์ธ์คํด์ค๋ฅผ ๋ณ์์ ์นํ
let vm = this;
//axios์์ https://jsonplaceholder.typicode.com/users์ get์ผ๋ก ํธ์ถ
axios.get('https://jsonplaceholder.typicode.com/users/')
//์ฑ๊ณต ์ ๋ก์ง
.then(function(response) {
console.log(response.data);
//api์์ ๋ฐ์์จ ๊ฒฐ๊ณผ๋ฅผ ์ธ์คํด์ค์ data์ธ users์ ์นํ
vm.users = response.data;
})
//์คํจ ์
.catch(function(error) {
console.log(error);
});
}
},
data: {
users: []
},
});
</script>
</body>
</html>๊ฒฐ๊ณผ
'IT > development' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [Vue.js] Vue CLI(Command Line Interface) (0) | 2023.07.29 |
|---|---|
| [Vue.js] ๋ทฐ ๋๋ ํฐ๋ธ(v-๋ก ์์ํ๋ ์์ฑ๋ค์ ์๋ฏธ) (0) | 2023.07.27 |
| [Vue.js] event emit(์์ โ ๋ถ๋ชจ) (0) | 2023.07.26 |
| [Vue.js] Props(๋ถ๋ชจ -> ์์) (0) | 2023.07.26 |
| [Vue.js] ์ปดํฌ๋ํธ(์ฌ์ฌ์ฉ ์ ์ฉ) (0) | 2023.07.26 |
๋๊ธ