ajax란?
아래 링크 참조 쉽게 말하면 js환경에서 비동기통신으로 데이터를 가져와 뿌려주는것.
https://developer.mozilla.org/ko/docs/Glossary/AJAX
AJAX - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN
AJAX (Asynchronous JavaScript와 XML)는 XMLHttpRequest 기술을 사용해 복잡하고 동적인 웹페이지를 구성하는 프로그래밍 방식입니다.
developer.mozilla.org
vue-resource란?
원래는 공식 라이브러리였지만 3년전쯤부터 관리하지 않는 라이브러리
https://github.com/pagekit/vue-resource
GitHub - pagekit/vue-resource: The HTTP client for Vue.js
The HTTP client for Vue.js. Contribute to pagekit/vue-resource development by creating an account on GitHub.
github.com
axios란?
Vue.js에서 권고하는 HTTP 통신 라이브러리.
Promise 기반의 HTTP 통신 라이브러리이며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고 다양한 API를 가지고 있음.
https://github.com/axios/axios
GitHub - axios/axios: Promise based HTTP client for the browser and node.js
Promise based HTTP client for the browser and node.js - GitHub - axios/axios: Promise based HTTP client for the browser and node.js
github.com
Promise란?
https://joshua1988.github.io/web-development/javascript/promise-for-beginners/
자바스크립트 Promise 쉽게 이해하기
(중급) 자바스크립트 입문자를 위한 Promise 설명. 쉽게 알아보는 자바스크립트 Promise 개념, 사용법, 예제 코드. 예제로 알아보는 then(), catch() 활용법
joshua1988.github.io
axios예제코드(Vue.js 3버전으로 작성했다)
<!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://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm = Vue.createApp({
data(){
return {
users:[]
}
},
methods: {
getData: function() {
axios.get('https://jsonplaceholder.typicode.com/users/')
.then(function(response) {
console.log(response.data);
vm.users = response.data;
})
.catch(function(error) {
console.log(error);
});
}
}
}).mount('#app');
</script>
</body>
</html>'정리 > Vue.js' 카테고리의 다른 글
| Vue.js 템플릿 문법 - watch (0) | 2023.09.22 |
|---|---|
| Vue.js 템플릿 문법 (0) | 2023.09.22 |
| Vue.js 2와 Vue.js3의 차이 (0) | 2023.09.21 |
| Vue.js 라우터란? (0) | 2023.09.20 |
| Vue.js 컴포넌트 통신 / Vue.js 이벤트 emit (0) | 2023.09.19 |