728x90
출처 : 인프런의 장기효(캡틴판교)님의 강좌 / Vue.js 시작하기 - Age of Vue.js
6. axios
- javascript의 ajax같은 비동기 통신을 위한 라이브러리다.
github에서 확인가능하며 뷰에서 공식적으로 권장하는 오픈 소스이다.
아래는 예제이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Axios</title>
</head>
<body>
<div id="app">
<button v-on:click="getData">get user</button>
<div>
{{ users }}
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
users: []
},
methods: {
getData: function() {
var vm = this;
axios.get('https://jsonplaceholder.typicode.com/users/')
.then(function(response) { //성공
console.log(response.data);
vm.users = response.data; // vm 대신 this를 쓰면 axios를 바라보게된다.
})
.catch(function(error) {
console.log(error);
});
}
}
})
</script>
</body>
</html>
728x90
'Front-End > Vue' 카테고리의 다른 글
| [장기효(캡틴판교) - Vue.js 시작하기] 8. computed, watch 속성 (0) | 2021.01.25 |
|---|---|
| [장기효(캡틴판교) - Vue.js 시작하기] 7. 템플릿 문법 (0) | 2021.01.25 |
| [장기효(캡틴판교) - Vue.js 시작하기] 5. router (0) | 2021.01.24 |
| [장기효(캡틴판교) - Vue.js 시작하기] 4. props/ event (0) | 2021.01.23 |
| [장기효(캡틴판교) - Vue.js 시작하기] 3. 컴포넌트 (0) | 2021.01.23 |
댓글