반응형
1. 웹 앱의 HTTP 통신 방법
* HTTP (HyperText Transfer Protocol) : 브라우저와 서버 간에 데이터를 주고받는 통신 프로토콜 .
* 프로토콜 (Protocol) : 컴퓨터나 단말기 간에 통신하기 위해 상호간에 정의한 규칙.
웹 앱 HTTP 통신 : 웹 앱에서 데이터를 요청함.
대표적으로 jQuery의 ajax (서버에서 받아온 데이터를 표시할 때 화면 전체를 갱신하지 않고도 화면의 일부분만 변경할 수 있게 하는 자바스크립트 기법)이 있다.
뷰에서 ajax를 지원하기 위한 라이브러리
1-1. 뷰 리소스
1-2. 엑시오스(axios)
1-1. 뷰 리소스로 데이터 받아오기
<html>
<head>
<title>뷰 리소스 연습</title>
</head>
<body>
<div>
<button v-on:click="getData">뷰 라이브러리 불러오기</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script>
<script>
new Vue({
el: '#app',
methods: {
getData: function(){
this.$http.get('https://raw.githubusercontent.com/joshua1988/doit-vuejs/master/data/demo.json')
.then(function(response){
console.log(response);
console.log(JSON.parse(response.data));
});
}
}
});
</script>
</body>
</html>
1-2. 엑시오스(axios)
가장 많이 사용되는 http 통신 라이브러리.
* axios CDN
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>* 액시오스의 API형식
http get 요청
axios.get('URL주소').then().catch();http post 요청
axios.post('URL주소').then().catch();http 요청에 대한 옵션 속성 정의
axios({
method: 'get',
url: 'URL주소',
...
});엑시오스로 데이터 받아오기
<html>
<head>
<title>뷰 리소스 연습</title>
</head>
<body>
<div id="app">
<button v-on:click="getData">프레임워크 목록 가져오기</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
methods: {
getData: function(){
axios.get('https://raw.githubusercontent.com/joshua1988/doit-vuejs/master/data/demo.json')
.then(function(response){
console.log(response);
});
}
}
});
</script>
</body>
</html>
반응형
'개발 > Vue.js' 카테고리의 다른 글
| 05. 템플릿 & 프로젝트 구성 (0) | 2019.09.25 |
|---|---|
| 04-1. 상용 웹 앱을 개발하기 위한 필수 기술들 - 뷰 라우터 (0) | 2019.09.06 |
| 03. Vue.js 개발 필수단위 - 인스턴스&컴포넌트 (0) | 2019.08.26 |
| 02. Vue.js 필수 플러그인 - github (0) | 2019.08.25 |
| 01. Vue.js 소개 (1) | 2019.08.22 |
댓글