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 相关文章推荐
dojo 之基础篇
Mar 24 Javascript
js制作简易年历完整实例
Jan 28 Javascript
详解JavaScript数组的操作大全
Oct 19 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
js 实现省市区三级联动菜单效果
Feb 20 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
Mar 01 Javascript
node.js平台下的mysql数据库配置及连接
Mar 31 Javascript
bootstrap modal+gridview实现弹出框效果
Aug 15 Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 Javascript
Vue使用Proxy代理后仍无法生效的解决
Nov 13 Javascript
前端如何实现动画过渡效果
Feb 05 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支持页面回退的两种方法
2008/01/10 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
学习php设计模式 php实现命令模式(command)
2015/12/08 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
jQuery Ajax调用WCF服务详细教程
2015/03/31 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
vue按需加载实例详解
2019/09/06 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
在Windows8上的搭建Python和Django环境
2014/07/03 Python
python循环监控远程端口的方法
2015/03/14 Python
Python中的字符串替换操作示例
2016/06/27 Python
简单谈谈Python中的闭包
2016/11/30 Python
django基于restframework的CBV封装详解
2019/08/08 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
parser.add_argument中的action使用
2020/04/20 Python
简单了解python列表和元组的区别
2020/05/14 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
数控技术应届生求职信
2013/11/13 职场文书
《雷雨》教学反思
2014/02/20 职场文书
座谈会主持词
2014/03/20 职场文书
项目经理任命书内容
2014/06/06 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
祝福语集锦:送给毕业同学祝福语
2019/11/21 职场文书