Vue请求接口渲染数据(利用axios)

一、下载axios

npm install axios -S

二、引入axios
在main.js中

//引入axios
import axios from 'axios'
Vue.prototype.axios=axios

三、在组件中连接接口（这里以一个父组件传到子组件的过程来示例）
Home.vue（父组件）中：

export default {
data (){
            return{
                spikeList:[],//定义一个数组用于存放接口传递过来的数据
            }
        },
mounted(){
            this.http();
        },
methods:{
            http(){//这个方法名可以自定义，不一定要叫http
            	let That = this;//保存当前this，方便在下面箭头函数调用
                this.axios.get("api/dataHome.json")//接口地址
                .then((res)=>{       //res就是请求到的json数据
                console.log(res);    //可以打印看看是否请求成功了
                let data = res.data.data[0];
                //第一个.data是进入数据
                //第二个.data是json格式里的"data"对象
                //如果不清楚可以console.log(res)看看结构
                That.spikeList=data.spikeList;
                //将取到的接口中某个数据存入数组
         					})
      			 }
		},
}

在Home.vue的template中，绑定存放了数据的数组到需要数据的组件（也就是下面的这个Spike组件）

<Spike :spikeList='spikeList'></Spike>
<!--这个组件是我某个项目中的秒杀倒计时组件，Home.vue是它的父组件-->

Spike.vue（子组件）中：

export default {
        props:['spikeList'],
}

之后就可以在子组件中使用spikeList了

<div class="spike-top">
                        <img src="@/assets/img/spike1.png" alt="">
                        <span>距离结束</span>
                        <count-down
                                :currentTime="item.startTime"
                                :startTime="item.startTime"
                                :endTime="item.endTime"
                                :dayTxt="'天'"
                                :hourTxt="' :'"
                                :minutesTxt="' :'"
                                :secondsTxt="''">
                        </count-down>
                    </div>
                    <div class="spike-bottom">
                        <img :src="item.imgUrl" alt="">
                        <div class="bottom-title">
                            <p>
                                {{item.title}}
                            </p>
                            <div class="bottom-price">
                                <span>￥{{item.price}}</span>
                                <p>剩下{{item.num}}个</p>
                            </div>
                        </div>
</div>

提醒：
vue绑定记得加上:，比如
:src=“item.imgUrl”
:currentTime=“item.startTime”
如果要绑定修改样式里面的内容，格式如下：
:style="{‘background’:‘url(’+item.imgUrl+’) no-repeat center center’ }"