使用案例
- 自己定义一个数据
{ "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> ![门户通专访草根站长九天狼：做站贵在坚持[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)