vue axios获取 api数据

初次使用vue，并不知道怎么使用vue进行连接api进行前后端的数据交互，在网上查了些资料看到了vue-resource 和 axios 这两种方法，对于前面的那种方法好像都不怎么推荐使用了。后面就选择使用axios进行数据交互。看了些别人写的文章，好多都是和axios文档是一样的，对于我这种并不聪明的人来说，有个实例的话或许更好理解。然后自己就去尝试了一番。

开始使用

首先安装axios

$ npm install axios

或者直接cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

HTML
循环获取menu

  <nav id="nav">
    <ul>
      <li v-for="menu in menus"><a v-bind:href='menu.menuUrl'>{{menu.menuName}}</a></li>
    </ul>
  </nav>

js代码

    new Vue({
        el: '#nav',
        data: {
            menus: []
        },
        mounted() {
            axios.get("http://slogc.cc/api/menus")
                .then(response =>{
                this.menus = response.data.result;
            console.log(response.data.result);
        })
        }
    });

HTML
获取单个属性

<div class="about_me" id="about-me">
      <h2>关于我</h2>
      <ul>
        <i><img v-bind:src='user.userAvatar'></i>
        <p ><b>{{user.userDisplayName}}</b>，{{user.userDesc}}</p>
      </ul>
    </div>

js代码

    new Vue({
        el: '#about-me',
        data: {
            user: []
        },
        mounted() {
            axios.get("http://slogc.cc/api/user")
                .then(response =>{
                this.user = response.data.result;
        })
        }
    });

当然数据肯定是先写好了的,不然是获取不了的哦！