使用案例

  • 自己定义一个数据
{
    "success":true,
    "code":20000,
    "message":"成功",
     "data":{
         "items":[
             {"name":"lucy","age":20},
             {"name":"jack","age":22},
             {"name":"mary","age":33}
         ]
     }
}
  • 使用axios发请求得到该数据

现在浏览器为了安全考虑不支持直接访问本地资源，可能会导致报错。

浏览器会报出一个Dev工具的警告，可以通过f12,找到三个点旁边的设置按钮关闭Eanble JS...map解决。

<!DOCTYPE html>
<html lang="en">

<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
</head>

<body>
     <div id="app">
         <!-- 把userList的数据在页面上显示出来 -->
         <h1>hello</h1>
         <table>
             <tr v-for="(user,index) in userList">
                 <td>{{index+1}}</td>
                 <td>{{user.name}}</td>
                 <td>{{user.age}}</td>
             </tr>
         </table>

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

                        })//请求失败后执行
                }
             }
         })
      </script>
</body>

</html>