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 相关文章推荐
In Javascript Class, how to call the prototype method.(three method)
Jan 09 Javascript
javascript 按回车键相应按钮提交事件
Nov 02 Javascript
一个XML格式数据转换为图表的例子
Feb 09 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
JavaScript实现数字数组按照倒序排列的方法
Apr 06 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
原生js实现百叶窗效果及原理介绍
Apr 12 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
Vue-router 中hash模式和history模式的区别
Jul 24 Javascript
JavaScript逻辑运算符相关总结
Sep 04 Javascript
js实现滚动条自动滚动
Dec 13 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
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
PHP读取大文件末尾N行的高效方法推荐
2016/06/03 PHP
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
checkbox:click事件触发span元素内容改变的方法
2017/09/11 Javascript
python 字典(dict)按键和值排序
2016/06/28 Python
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
Python中getpass模块无回显输入源码解析
2018/01/11 Python
详解10个可以快速用Python进行数据分析的小技巧
2019/06/24 Python
Win10下Python3.7.3安装教程图解
2019/07/08 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
对Python获取屏幕截图的4种方法详解
2019/08/27 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
linux面试题参考答案(10)
2013/11/04 面试题
小学美术教学反思
2014/02/01 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
2014年学校领导班子对照检查材料
2014/09/19 职场文书
高中生综合素质自我评价
2015/03/06 职场文书
单方投资意向书
2015/05/11 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
工作自我评价范文
2019/03/21 职场文书
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS
oracle delete误删除表数据后如何恢复
2022/06/28 Oracle