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

뷰 플러그인 - axios 사용하기

1. axios 란?

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

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

2. 설치

- npm install --save axios vue-axios

3. 설정

- src/main.js

// 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

<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>