vue 使用axios请求接口数据

一、首先下载安装axios 

npm install --save axios

二、在项目main.js里 引入下面代码

import axios from 'axios'
Vue.prototype.$http = axios

三、在须要用到axos的组件<script>标签中引入以下代码

import axios from 'axios'

四、组件methods中定义function 

methods: {
    getdata: function() {
        var url = "https://cnodejs.org/api/v1/topics";
        // 发送请求:将数据返回到一个回到函数中
        var that = this;
            // 而且响应成功之后会执行then方法中的回调函数
        axios.get(url).then(function(result) {
            // result是全部的返回回来的数据
            // 包括了响应报文行
            // 响应报文头
            // 响应报文体
            console.log(result.data.data);
            that.goodlist = result.data.data;

        });
    }
}

五、在组件HTML中设置@click事件  getdata  （点击后请求数据）

六、将获取的数据在页面渲染