13Vue的数据请求(Axios)使用

Vue的数据请求(Axios)使用

1、安装Axios的方法
cnpm install axios --save 一定要加上 --save
2、使用方法

<template>
  <div>
    <input type="button" value="请求数据" @click="getData()">
    <!-- 渲染数据 -->
    <ul>
        <li v-for="(item,index) in list" v-bind:key="index" >{{item.title}}</li>
    </ul>
  </div>
</template>
<script>
import Axios from "axios";
export default {
  data() {
    return {
      list: []
    };
  },
  methods: {
    getData() {
      let that = this; //注意这里this发生了变化 使用that来临时存储
      var api = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
        // Axios.get(api)
        // .then(function(res) {
        //  that.list = res.data.result;
        // })
        // .catch(function(err) {
        //   console.log(err);
        // });
         

      /*推荐这种箭头函数的写法*/
      Axios.get(api)
        .then(res => {
          this.list = res.data.result;
          console.log(this.list);
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
</style>

预览效果如下所示：