vue如何从接口请求数据


Posted in Javascript onJune 22, 2017

这两天学习了vue如何从接口请求数据,所以,今天添加一点小笔记。

<!doctype html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>获取图片列表</title>

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />    

  </head>

  <body>

    <div id="app">

      <ul>

        <li>

          <img v-for="imgItem in imgList" v-bind:src="imgItem.img" alt="" width="100%" height="100%"/>

        </li>

      </ul>

    </div>    

  </body>

  <script src="//cdn.bootcss.com/vue/2.1.0/vue.js" type="text/javascript" charset="utf-8"></script>

  <script src="//cdn.bootcss.com/vue-resource/1.0.3/vue-resource.js" type="text/javascript" charset="utf-8"></script>

  <script>

    var demo=new Vue({

      el:'#app',

      data: {

        imgList:[],

        getImgUrl: ''  //存数据接口        

      },

      created: function(){

        this.getImg()       //定义方法

      },

      methods: {

        getImg: function(){

          var that = this;    

          that.$http({      //调用接口

            method:'GET',

            url:this.getImgUrl //this指data

          }).then(function(response){ //接口返回数据

            this.imgList=response.data;             

          },function(error){

          })

        }

      }

    })

  </script>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
Jul 09 Javascript
简介JavaScript中的setHours()方法的使用
Jun 11 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
jQuery基础_入门必看知识点
Jul 04 Javascript
Javascript中级语法快速入手
Jul 30 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
浅谈vue项目可以从哪些方面进行优化
May 05 Javascript
vue中v-model的应用及使用详解
Jun 27 Javascript
使用FormData实现上传多个文件
Dec 04 Javascript
JS实现的贪吃蛇游戏案例详解
May 01 Javascript
Vue3.0中的monorepo管理模式的实现
Oct 14 Javascript
Ajax实现页面无刷新留言效果
Mar 24 Javascript
利用node.js制作命令行工具方法教程(一)
Jun 22 #Javascript
关于在vue-cli中使用微信自动登录和分享的实例
Jun 22 #Javascript
详解vue 配合vue-resource调用接口获取数据
Jun 22 #Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 #Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 #Javascript
详解用webpack2搭建angular2的项目
Jun 22 #Javascript
vue2.0实现分页组件的实例代码
Jun 22 #Javascript
You might like
js和php邮箱地址验证的实现方法
2014/01/09 PHP
PHP命名空间(namespace)的使用基础及示例
2014/08/18 PHP
php格式输出文件var_export函数实例
2014/11/15 PHP
laravel 框架实现无限级分类的方法示例
2019/10/31 PHP
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
JS表的模拟方法
2015/02/05 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
vue路由前进后退动画效果的实现代码
2018/12/10 Javascript
vue-cli中vue本地实现跨域调试接口
2019/01/16 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
[49:08]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python下如何让web元素的生成更简单的分析
2008/07/17 Python
Python struct模块解析
2014/06/12 Python
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
Python实现批量检测HTTP服务的状态
2016/10/27 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
Python2与Python3的区别实例分析
2019/04/11 Python
详细分析Python collections工具库
2020/07/16 Python
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
阿玛尼意大利官网:Armani意大利
2018/10/30 全球购物
2014年党员个人工作总结
2014/12/02 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
如何用JS实现网页瀑布流布局
2021/04/24 Javascript
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android