반응형
<!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 |