大佬教程收集整理的这篇文章主要介绍了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}
        ]
    }
}

大佬总结

以上是大佬教程为你收集整理的axios结合vue的练习全部内容，希望文章能够帮你解决axios结合vue的练习所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。