소개

webAPI 란 무엇 맛있는가? 라는 느낌이었으므로, 이번 조금 만져 보았습니다.

하고 싶은 일

이 사이트 의 API를 이용해 본다.
google의 API와 qiita의 API를 사용해 보려고 시도했지만 문서를 읽을 수 없으며 좌절했습니다. 또 이번 도전하겠습니다.

했던 일

JsFiddle 에서 vue.js 의 환경을 준비한다. 샘플

axios 메소드를 사용하여 API 통신을 수행합니다.

html 에 취득한 데이터를 표시한다.

이상!

참고

완성판

고전한 것

axios 에 지정하는 URL이 어떤지 모른다.

GET 옆에 /api 라고 쓰여 있으므로 기존 URL의 끝에 추가하면 json 데이터를 얻을 수 있었다.

API로 얻은 데이터에서 각 속성을 추출하는 방법을 처음 알 수 없습니다.

css 설정에서 이미지를 가운데에 문자를 겹칠 수 없습니다.

끝까지 할 수 없었던 것

css 의 transform: translate (-50%, -50%);가 작동하지 않습니다.

제일 하고 싶었던 것. 획득한 이미지와 문자를 동시에 표시하는 방법. (꼭 가르쳐 주셨으면합니다 ...)

마지막으로

이 기사를 쓸 때까지, qiita에 JsFiddle를 묻을 수 있다고 생각했지만, 할 수 없었다. CodePen이라면 대응하고 있는 것 같다.
앞으로는 CodePen을 이용해 가자.