vue.js 기초- 인스타그램 만들어보기 08_ajax통신, axios (코딩애플 세미나 후기)

더보기 버튼을 생성하여 버튼 클릭 시에 ajax 통신을 해보겠습니다.

 

더보기 버튼을 생성해줍니다.

 

App.vue

 

그 다음 더보기 이벤트에 실행될 함수를 만들어주고 ajax 통신을 위해 axios를 install 해줍니다.

 

npm install axios

axios 다운로드

 

install이 끝나면 가져올 데이터가 담긴 json 파일을 만들어 줍니다.

public 하위에 json파일 생성

json 파일 내용

ajax를 통해 방금 만든 json 내용을 가져와보도록 하겠습니다.

 

App.vue

axios를 사용해 이벤트를 생성한 후에 버튼에 바인딩 해줍니다.

버튼에 이벤트 바인딩

json 문법

axios에서 get가져온다 moreData.json을 then끝나면 moreData가 들어오고 그것을

this.postData 배열리스트에 push해준다. 

아까 unshift는 상단에 리스트를 추가해주고 push는 하단에 리스트를 추가해줍니다.

 

이렇게 하면 더보기 버튼 클릭 시 ajax 통신을 합니다. (get 방식 = 공개)