vue.js实现请求数据的方法示例


Posted in Javascript onFebruary 07, 2017

vue2.0示例代码如下:

var vm = new Vue({
      el:"#list",
      data:{
        gridData: "",
      },
      mounted: function() {
        this.$nextTick(function () {
          this.$http.jsonp('http://***.com').then(function(res) {
            console.log(res.data)
            this.gridData = res.data;
          })
        })
      },
    })

vue2.0版本废弃了ready定义的方法,使用mounted来代替,不过需要加上this.$nextTick(function(){})

如果没有请求成功看一下vuejs的版本

1.0版本的写法是这样的

var vm = new Vue({
  el:"#list",
  data:{
    gridData: '',
  },
  ready: function() {
    this.$http.jsonp('http://***.com').then(function(res){
      this.$set('gridData', res.data);
    })
  },
})

总结

以上就是关于vue.js 请求数据的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
JS之小练习代码
Oct 12 Javascript
ExtJs3.0中Store添加 baseParams 的Bug
Mar 10 Javascript
jquery学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
jquery.idTabs 选项卡使用示例代码
Sep 03 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 Javascript
全面了解函数声明与函数表达式、变量提升
Aug 09 Javascript
javascript 动态生成css代码的两种方法
Mar 17 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
vue项目实战总结篇
Feb 11 Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 Javascript
Avalonjs 实现简单购物车功能(实例代码)
Feb 07 #Javascript
深入理解JavaScript中的尾调用(Tail Call)
Feb 07 #Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 #Javascript
原生JavaScript实现AJAX、JSONP
Feb 07 #Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 #Javascript
javascript表达式和运算符详解
Feb 07 #Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 #Javascript
You might like
PHP数字和字符串ID互转函数(类似优酷ID)
2014/06/30 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
php + ajax 实现的写入数据库操作简单示例
2020/05/16 PHP
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
2018/02/13 jQuery
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
[42:52]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
用python读写excel的方法
2014/11/18 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
python实现小世界网络生成
2019/11/21 Python
德购商城:德国进口直邮商城
2017/06/13 全球购物
英国家居装饰品、户外家具和玻璃器皿购物网站:Rinkit.com
2019/11/04 全球购物
威盛公司软件C++工程师笔试题面试题
2012/07/16 面试题
物业经理求职自我评价
2013/09/22 职场文书
行政秘书工作自我鉴定
2014/09/15 职场文书
技术负责人岗位职责
2015/02/10 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
python单向链表实例详解
2022/05/25 Python