安装插件axios.对.json数据的使用

安装之前先停掉项目 服务
ctrl + c + y

安装---读取json的ajax效果
cnpm i axios -S

重新启动npm run serve

看到json文件生产模式中看到插件已安装

接下来进行引用注册
app.vue当做首页出现
main.js
引用
import axios from axios
全局注册
Vue.prototype.$http=axios
或者
Vue.prototype.$axios=axios
使用$http使用---变量名[都可以...此为流行起法]

组件

<template>
    <div name="show">
        <ul class="goodList">
            <li v-for="good in list" >
                <!-- 是属性动态绑定 -->
                <img v-bind:src="good.img">
                <p>{{good.goodName}}</p>
            </li>
        </ul>
    </div>
</template>
<style type="text/css">
.goodList li{
    width: 200px;
    height: 200px;
    list-style: none;
    float: left;
    font-size: 9px;
    color: red;
    margin-bottom: 30px;
}   

.goodList img{
    width: 180px;
    height: 180px;
}
</style>
<script type="text/javascript">
    export default{
        name:"show",
        data(){
            var _this=this;
            // $axios/$http 获取json数据 
            this.$axios.get("json/bt.json").then(function(res){
                _this.list=res.data;
                console.log(_this.list)
            });

            return{
                list:[]
            }
        }
    }
</script>

json文件

[{
"goodName":"小米",
"img":"img/s1.jpg"
},{
"goodName":"华为",
"img":"img/s3.jpg"
},{
"goodName":"apple",
"img":"img/s4.jpg"
},{
"goodName":"vivo",
"img":"img/s5.jpg"
},{
"goodName":"小米",
"img":"img/s1.jpg"
},{
"goodName":"华为",
"img":"img/s3.jpg"
},{
"goodName":"oppo",
"img":"img/s4.jpg"
},{
"goodName":"vivo",
"img":"img/s5.jpg"
}]

调用组件

最终实现效果