[VueJs] 뷰 플러그인 - axios 사용하기

뷰 플러그인 - axios 사용하기

1. axios 란?

- 동적으로 데이터를 가져오기 위한 라이브러리

- axios 와 vue-ressource 가 있다. axios 가 업데이트가 빠르고 커뮤니티가 활성화 되어 있어 많은 사람들이 추천한다

2. 설치

- npm install --save axios vue-axios

3. 설정

- src/main.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import axios from 'axios' import VueAxios from 'vue-axios'     Vue.use(VueAxios, axios)   Vue.config.productionTip = false   /* eslint-disable no-new */ new Vue({   el: '#app',   components: { App },   template: '<App/>' })

4. 사용

- app.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

<template>   <div id="app">     <button @click="fetchPosts">Bring me</button>     <div v-for="post in posts">       <h1>{{post.title}}</h1>       <p>{{post.body}}</p>     </div>   </div> </template>   <script>     export default {   name: 'App',   data(){     return {       posts:[]     }   },   methods:{     fetchPosts(){       this.axios.get('https://jsonplaceholder.typicode.com/posts')         .then((response)=>{           this.posts = response.data         })     }   } } </script>   <style> #app {   font-family: 'Avenir', Helvetica, Arial, sans-serif;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale;   text-align: center;   color: #2c3e50;   margin-top: 60px; } </style>