切版网（2013~2023）

http://qieban.cn
做完设计，找切版网
QQ:6135833
微信：dingxiangming82

2017年11月8日

vue+axios从api获取数据入门

本文就“vue+axios从api获取数据入门”展开讨论，作者切版网，发布于2017年11月8日 全文共1147个字，预计阅读时长3分49秒。

切版专注于移动端的web前端外包，这当中怎么能少了vue这样的经典前端框架的研究？当我们在尝试创建一个vue程序的时候，发现很多网上的教程都会跟你讲到node.js，webpack甚至还有foundation等各种框架，打包技术，以至于我们想研究vue的时候无从下手，于是我们抛开了多余的干扰，直奔要害，不用node.js等，只需加载vue.js和axios.js 做出了我们的第一个vue实例。

它是我们的第一个hello world级别的前端程序，针对vue的研究我们还特意通过php写了一个简单的api程序，来供vue调取。

下面讲述我创建一个简单的vue程序方法和通过axios调取api的写法：

js文件

// ./app.js
const vm = new Vue({
  el: '#app',
  data: {
    results: [
      {title: "the very first post", abstract: "lorem ipsum some test dimpsum"},
      {title: "and then there was the second", abstract: "lorem ipsum some test dimsum"},
      {title: "third time's a charm", abstract: "lorem ipsum some test dimsum"},
      {title: "four the last time", abstract: "lorem ipsum some test dimsum"}
    ]
  }
});

html文件

<!-- ./index.html -->
<div v-for="result in results">
  <div>
    <div>
      {{ result.title }}
    </div>
    <div>
      <p>{{ result.abstract }}.</p>
    </div>
  </div>
</div>

通过axios从api获取数据

<!-- ./index.html -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

// ./app.js

const vm = new Vue({
  el: '#app',
  data: {
    results: []
  },
  mounted() {
    axios.get("https://api.qieban.cn/api.php?pagesize=5&page=1")
    .then(response => {this.results = response.data.results})
  }
});

经过切版的小伙伴们的一些研究，我们总算摸清了一点的思路，所谓的nodejs等以及各种打包技术都是为了更方便开发，但是实际上vue只需要你懂一点js 和后端的知识就能做，nodejs并不是核心需要，只是辅助，如果理解有误，欢迎指正。

文章为原创或者来自于互联网，转载请注明来源，如果文章有侵权请联系，我们会及时删除。