vue part3.3 小案例ajax (axios) 及页面异步显示

最新推荐文章于 2022-05-21 21:05:45 发布

weixin_33725239

最新推荐文章于 2022-05-21 21:05:45 发布

阅读量103

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/infaaf/p/9684047.html

本文介绍了一个使用Vue和Axios的简单应用，它从GitHub API获取最热门的仓库信息并显示在网页上。通过axios安装并保存依赖，然后在App.vue组件中进行数据加载和展示。

npm install axios --save

App.vue

<template>
  <div>
    <div v-if="!repoName">loading</div>
    <div v-else>most start repo is <a :href="repoUrl">{{repoName}}</a></div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      repoUrl: '',
      repoName: ''
    }
  },
  mounted () {
    const url = 'https://api.github.com/search/repositories?q=v&sort=stars'
    axios.get(url).then(response => {
      const result = response.data
      const mostRepo = result.items[0]
      this.repoUrl = mostRepo.html_url
      this.repoName = mostRepo.name
    }).catch(error => {
      alert('请求失败')
    })
  }

}

</script>

<style>

</style>