Axios
Vue에서 권장하는 Http 통신 라이브러리
Vue-router와 마찬가지로 설치 또는 CDN을 통해 사용 가능
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios를 활용하여 user-list를 화면에 구현
json 데이터 제공 사이트 : https://jsonplaceholder.typicode.com/users/
☆ Code
<!doctype html>
<html>
<head>
<title>Axios Test</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<body>
<h1>Axios Users</h1>
<hr>
<div id="axiosdiv">
<button @click="getData">데이터 가져오기</button>
<br>
<!--
<div>{{ users }}</div>
-->
<ul>
<li v-for="user in users">
{{ user.address }}
</li>
</ul>
<table border="1">
<tr v-for="user in users">
<td>{{ user.name }}</td>
<td>{{ user.company }}</td>
</tr>
</table>
</div>
</body>
<script>
var app12 = new Vue({
el: '#axiosdiv',
data: {
users: '아무도 없네'
},
methods: {
getData: function(e){
console.log(e);
var vm = this;
console.log("clicked");
vm.users = '아직도 없어 있을 줄 알았냐';
axios.get('https://jsonplaceholder.typicode.com/users/')
.then(function(res){
console.log(res);
vm.users = res.data;
vm.companys = res.data.company;
console.log(vm.companys);
});
}
}
});
</script>
</html>'Vue' 카테고리의 다른 글
| Vue.js Component (0) | 2025.01.18 |
|---|---|
| Vue.js router (0) | 2025.01.16 |
| Vue.js trans (0) | 2025.01.15 |
| Vue.js form (0) | 2025.01.14 |
| Vue.js class (0) | 2025.01.13 |