Vue学习12----数据请求模块axios

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhaihaohao1/article/details/88993449

第三方提供的数据请求模块
参考文档
https://www.npmjs.com/package/axios
效果图：

axios 的使用 步骤：
1、安装 cnpm install axios --save
2、哪里用哪里引入 import Axios from ‘axios’;
3、使用

App.vue 代码：

<template>
  <div>
    <button @click="httpGetData()">get请求数据</button>
    <br>
    <!--渲染接口拿到的数据-->
    <ul>
      <li v-for="item in list">

        {{item.title}}
      </li>
    </ul>
  </div>
</template>

<script>
  /*

请求数据的模板
    axios  的使用
    1、安装  cnpm  install  axios --save
    2、哪里用哪里引入    import Axios from 'axios';
    3、使用
*/
  import Axios from 'axios';
  export default {
    name: 'app',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        list: [],
      }
    },
    methods: {
      httpGetData() {
        var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
        Axios.get(api).then((response) => {
          this.list = response.data.result;
        }).catch((error) => {
          console.log(error);

        })
      }

    }
  }
</script>

<style lang="scss">
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }

  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>

源码下载：