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 相关文章推荐
解析使用js判断只能输入数字、字母等验证的方法(总结)
May 14 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
javascript每日必学之运算符
Feb 16 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
JS优化与惰性载入函数实例分析
Apr 06 Javascript
JavaScript 基础表单验证示例(纯Js实现)
Jul 20 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 Javascript
AngularJS 应用模块化的使用
Apr 04 Javascript
微信小程序实现美团菜单
Jun 06 Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 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
PHP学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
非常漂亮的JS代码经典广告
2007/10/21 Javascript
window.name代替cookie的实现代码
2010/11/28 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
js放大镜放大购物图片效果
2017/01/18 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
基于node.js实现爬虫的讲解
2019/02/18 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
python基础教程之面向对象的一些概念
2014/08/29 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
python实现AES加密和解密
2019/03/27 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
python实现126邮箱发送邮件
2020/05/20 Python
css3实例教程 一款纯css3实现的环形导航菜单
2014/10/20 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
关于安全的演讲稿
2014/05/09 职场文书
大学生创业计划书
2014/08/14 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
副总经理岗位职责
2015/02/02 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python
python实现双向链表原理
2022/05/25 Python