[ Vue.js ] Axios 사용하는 방법 / json

안녕하세요 상훈입니다.

Vue.js 에서 Axios를 사용하여 화면에 출력하는 예제를 작성해보도록 하겠습니다.

비동기 통신 방법으로는 Axios와 Ajax 등이 있는데, 이 중 Axios를 사용하도록 하겠습니다.

 

생각보다 아주 간단합니다!

이미지 클릭시 해당 링크로 이동

1. script로 head 태그 내에 작성해주세요.

2. mounted api 속에 작성합니다.

let app = new Vue({
            el: '#app',
            data: {
                posts: [],
            }, 
            mounted () {
                axios.get('https://jsonplaceholder.typicode.com/users/').then((response) => {
                    this.posts = response.data
                })
            }
        })

이렇게 되면, 비어있던 posts 배열에 위에서 response 받은 json 객체가 posts에 담겨져 사용할 수 있게 됩니다.

 

3. html에 작성

<div id="app">
        <div v-for="post in posts">
            <h1>{{ post.name }}</h1>
            <p>{{ post.email }}</p>
        </div>
    </div>

v-for 문을 이용한 해당 내용 출력입니다.

여러 가지 key 값이 존재하는데 그 중, 저는 name과 email을 가져와 표기하도록 하겠습니다.

 

예시

 

이상입니다.

 

 

 

이곳에 전체적으로 요약과 예시가 다 존재합니다! 따라서 해주세요.

Axios | Cracking Vue.js