송민준의 개발노트

뷰 리소스, 액시오스 본문

웹/Vue

뷰 리소스, 액시오스

송민준 2020. 2. 8. 01:34

HTTP 통신 관련 라이브러리(Ajax와 유사)

 

1. 뷰 리소스

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue Named view Router</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </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://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>

 

액시오스

뷰 커뮤니티에서 가장 많이 사용 되는 HTTP 통신 라이브러리임.

Promise 기반의 API형식이 다양하게 제공됨.

(서버에 데이터를 요청하여 받아오는 동작과 같은 비동기 로직 처리에 유용한 자바스크립트 객체 - Promise)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </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' 카테고리의 다른 글

싱글 파일 컴포넌트 체계  (0) 2020.02.12
뷰 템플릿  (0) 2020.02.09
뷰 라우터  (0) 2020.02.02
컴포넌트 통신  (0) 2020.01.31
컴포넌트  (0) 2020.01.31
'웹/Vue' Related Articles more