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

2019.08.28時点

Vue.js サンプル axiosでAPIリクエスト

See the Pen
nonVuejsAxiosAPI by noriko fujita (@nonkapibara)
on CodePen.

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

1.CodePenにログインし、「Pen」を選択する

2.「Settings」を選択する

3.「JavaScript」を選択する

4.Vue.jsのCDNを追加する
「Add External Scripts/Pens」のサーチエリアに「vue」と入力する

vueを選択する

こんな感じで、Vue.jsのCDNが追加される。

5.APIリクエストで「axios」を使用する場合は、
「Add External Scripts/Pens」のサーチエリアに「axios」と入力する

6.axiosを選択する

7.保存する

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

index.html

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

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

Fullだとこんな感じ

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>