【Vue.js】CodePenでVue.jsを実装する方法とaxiosでAPIリクエストやってみた

2019.08.28時点

Vue.js サンプル axiosでAPIリクエスト
<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="js,result" data-user="nonkapibara" data-slug-hash="YzKVoMg" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="nonVuejsAxiosAPI">
  <span>See the Pen <a href="https://codepen.io/nonkapibara/pen/YzKVoMg/">
  nonVuejsAxiosAPI</a> by noriko fujita (<a href="https://codepen.io/nonkapibara">@nonkapibara</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


<br>
■CodePenのサイト
https://codepen.io/

1.CodePenにログインし、「Pen」を選択する
<img width="1050" alt="スクリーンショット 2019-08-28 19.57.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/dc33d873-b98e-10bc-be4c-6d1e8472a0a2.png">

2.「Settings」を選択する
<img width="1134" alt="スクリーンショット 2019-08-28 19.58.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/cf721a4e-5c10-9c85-de6d-2eaf792872b5.png">

3.「JavaScript」を選択する
<img width="517" alt="スクリーンショット 2019-08-28 19.58.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/8aab65b1-f568-ac3f-064d-2cd4af98bd15.png">

4.Vue.jsのCDNを追加する
「Add External Scripts/Pens」のサーチエリアに「vue」と入力する
<img width="519" alt="スクリーンショット 2019-08-28 20.00.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/1f21a8ef-8a6a-f8ab-2950-f5e39c18cd3f.png">

vueを選択する
<img width="512" alt="スクリーンショット 2019-08-28 20.01.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/561d31dc-af2b-a7ad-0ace-c440566fce58.png">

こんな感じで、Vue.jsのCDNが追加される。
<img width="509" alt="スクリーンショット 2019-08-28 22.16.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/691b9be7-eb85-ac57-db45-556ca92dd4bb.png">

5.APIリクエストで「axios」を使用する場合は、
「Add External Scripts/Pens」のサーチエリアに「axios」と入力する
<img width="516" alt="スクリーンショット 2019-08-28 22.03.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/565fd73e-ab04-c187-cbb5-deb6f32660f3.png">

6.axiosを選択する
<img width="516" alt="スクリーンショット 2019-08-28 22.04.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/9ee58958-54cd-678d-8daf-f09297182a7d.png">

7.保存する
<img width="517" alt="スクリーンショット 2019-08-28 22.04.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/30967486-accd-bfef-9f5e-a390fc4361ce.png">


8.HTMLにdivから書く事ができる。

```html:index.html
  <div id="app">
    {{ info }}
  </div>
<script src="./main.js"></script>
```

```js:main.js
new Vue({
  el: '#app',
  data() {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json',{ responseType: 'arraybuffer' })
      .then(response => (this.info = response))
  }
})

```
<img width="1091" alt="スクリーンショット 2019-08-28 22.27.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/b67d6756-d660-0f2c-e1a7-7b9921243a42.png">




Fullだとこんな感じ

```html:index.html
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Vue.js API</title>
	<!-- 開発バージョン -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
  <div id="app">
    {{ info }}
  </div>
	<script src="./main.js"></script>
</body>

</html>

```