爱扯淡的虾


  • 首页

  • 归档

vue axios获取 api数据

发表于 2018-06-28 | 分类于 | 5 | 阅读次数 522

初次使用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;
        })
        }
    });

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

  • 本文作者: 爱扯淡的虾
  • 本文链接: https://slogc.cc/archives/vue-axios
  • 版权声明: 本博客所有文章除特别声明外,均采用CC BY-NC-SA 3.0 许可协议。转载请注明出处!
国产手机-我的看法
vue 表单提交出现错误
5评论
  • 搬瓦工 Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36

    朋友 交换链接吗

    2018-07-31 13:43 回复
    • Aanko Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36 博主

      @搬瓦工 可以啊

      2018-08-03 10:25 回复
  • RYAN0UP Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36

    中枪.png

    2018-07-11 16:33 回复
  • RYAN0UP Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36

    这个比较厉害,可以用halo的api写vue应用

    2018-06-28 14:18 回复
    • Aanko Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36 博主

      可以把其他主题移植过来 哈哈哈哈 //@RYAN0UP:这个比较厉害,可以用halo的api写vue应用

      2018-06-28 14:32 回复
  • 文章目录
  • 站点概览
爱扯淡的虾

爱扯淡的虾

纵有疾风起,人生不言弃!

8 日志
1 分类
1 标签
RSS
Github
Creative Commons
Links
  • Ryan0up'S Blog
0%
© 2017 — 2019 爱扯淡的虾
由 Halo 强力驱动
|
主题 - NexT.Pisces v5.1.4