vue+axios从api获取数据入门

切版专注于移动端的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并不是核心需要,只是辅助,如果理解有误,欢迎指正。

切版- 切图网(qietu.com)旗下psd转html,前端外包的“切图客”团体。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

客服咨询
客服1
客服2
微信公众号