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 相关文章推荐
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
javascript结合CSS实现苹果开关按钮特效
Apr 07 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
Angular4 ElementRef的应用
Feb 26 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
Apr 19 Javascript
微信小程序渲染性能调优小结
Jul 30 Javascript
微信小程序转发事件实现解析
Oct 22 Javascript
微信小程序商品详情页底部弹出框
Nov 22 Javascript
vue基于v-charts封装双向条形图的实现代码
Dec 09 Javascript
详解vue3中组件的非兼容变更
Mar 03 Vue.js
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
Symfony模板的快捷变量用法实例
2016/03/17 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
Javascript中的window.event.keyCode使用介绍
2011/04/26 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
Vue.js手风琴菜单组件开发实例
2017/05/16 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
解决vue-cli脚手架打包后vendor文件过大的问题
2018/09/27 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
python3反转字符串的3种方法(小结)
2019/11/07 Python
python内置模块collections知识点总结
2019/12/19 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
python 实现的车牌识别项目
2021/01/25 Python
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
Monica Vinader官网:英国轻奢珠宝品牌
2020/02/05 全球购物
英语专业个人求职自荐信
2013/09/21 职场文书
会计自荐书
2013/12/02 职场文书
月度优秀员工获奖感言
2014/08/16 职场文书
银行开户授权委托书格式
2014/10/10 职场文书
2014年施工员工作总结
2014/11/18 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
2016全国“质量月”活动标语口号
2015/12/26 职场文书