axios结合vue的练习

Vue+axios的练习

html+js代码

    <div id="app">
        <ul v-for="(user,index) in userList">
            <li>{{index+1}}-{{user.name}}:{{user.age}}</li></li>
        </ul>        
    </div>   

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

    <script>
 
         var vm =new Vue({
              el:'#app',
              //固定结构
              data:{
                  //在data中定义变量和初始值
              userList:[]
              },
              created(){
                  //页面渲染前执行,调用定义的方法
                  //这里的this是指vm对象
                  this.getUserList()
              },
              methods:{
                  //编写具体方法
                  getUserList(){
                      //使用axios发送Ajax请求
                      //axios.提交方式("请求接口路径").then(箭头函数).catch(箭头函数)
                      axios.get("data.json")//练习使用伪造json数据
                           .then(response=>{//response请求后返回数据
                              //console.log(response);
                              this.userList=response.data.data.items;
                              console.log(this.userList);
                              
                           })//请求成功执行then方法
                           .catch(error=>{})//请求失败执行catch方法
                  }
              }
         })       
    
    </script>

data.json

{
    "success":true,
    "code":20000,
    "message":"成功",
    "data":{
        "items":[
            {"name":"张三","age":15},
            {"name":"李四","age":18},
            {"name":"王五","age":21}
        ]
    }
}