使用axios请求数据，并用vue指令v-for页面显示

使用axios进行，请求data.json中的数据，再通过vue中的v-for指令将获取的数据进行页面显示

 数据源data.json

{
    "success":true,
    "code":20000,
    "message":"成功",
    "data":{
        "items":[
            {"name":"lucy1","age":20},
            {"name":"lucy2","age":30},
            {"name":"lucy3","age":40}
        ]
    }
}

 1.先引入vue与axios的js文件

 <script src="vue.min.js"></script>
 <script src="axios.min.js"></script>

2.编写axios的代码格式

一般是固定结构，先初始化定义变量，储存返回对象，再使用axios发送ajax请求，定义方法axios提交方式axios.get("数据源").then(箭头函数).catch(箭头函数)，再在created中调用函数，created方法是在页面渲染之前就执行了。

 <script>
        new Vue({
            el: '#app',
            //固定结构
            data: {//在data定义变量和初始值
                //1.定义变量初始值，指空数组
                userList:[]
            },
            created(){//页面渲染之前执行，调用定义的方法
                //3.调用定义的方法
                this.getUserList()
            },
            methods:{//编写具体的方法
                getUserList(){
                  //2.使用axios发送ajax请求
                  //axios.提交方式(“请求s接口路径”).then(箭头函数).catch(箭头函数|)
                  axios.get("data.json")
                    .then(response=>{
                        //response就是请求后返回的数据，response可以任意取名
                        // console.log(response)
                        //通过response获取具体数据，赋值给定义空数组
                        this.userList=response.data.data.items
                        console.log(this.userList)
                        
                    })//请求成功执行then方法
                    .catch(error=>{

                    })//请求失败执行catch方法
              }
            }
        })
    </script>

箭头函数是没有自己的this，在它内部使用的this是由它定义的宿主对象决定。showMessage2()里定义的箭头函数宿主对象为vue实例，所以它里面使用的this指向vue实例。

代码中，先将数据获取到数组，再打印到控制台，结果如下，说明已经获取成功

 

3.页面显示数据

利用vue中的指令v-for来进行循环输入到表格中。

 <table border="2">
    <tr v-for="users in userList">
        <td>{{users.name}}</td>
        <td>{{users.age}}</td>
    </tr>
 </table>

结果如下：