37.use API with Axios

首先，我们要通过 npm/Yarn 或一个 CDN 链接安装 axios。
我们首先创建一个 data 里的 property 以最终放置信息，然后将会在 mounted 生命周期钩子中获取数据并赋值过去，以比特币时价API为例:https://api.coindesk.com/v1/bpi/currentprice.json：

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    // 加入 try catch 检查 api 状态，并最後解除loading动画
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => {
        this.info = response.data.bpi
      })
      .catch(error => {
        console.log(error)
        this.errored = true
      })
      .finally(() => this.loading = false)
  }
  // 会得到 get api response
})

// 用回圈取出所有对应币种及币值
<div id="app">
  <h1>Bitcoin Price Index</h1>
  <div
    v-for="currency in info"
    class="currency"
  >
    {{ currency.description }}:
    <span class="lighten">
      <span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }}
    </span>
  </div>
</div>

// 使用filter取值并四舍五入至小数点後2位
filters: {
  currencydecimal (value) {
    return value.toFixed(2)
  }
},