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 相关文章推荐
JavaScript中的Document文档对象
Jan 16 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
Sep 01 Javascript
JS判定是否原生方法
Jul 22 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
Jan 23 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
详细总结Javascript中的焦点管理
Sep 17 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
js实现漫天星星效果
Jan 19 Javascript
react native实现往服务器上传网络图片的实例
Aug 07 Javascript
Next.js项目实战踩坑指南(笔记)
Nov 29 Javascript
vue中v-show和v-if的异同及v-show用法
Jun 06 Javascript
vue实现分页的三种效果
Jun 23 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中几种常见安全设置详解
2010/04/06 PHP
php代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
PHP中的按位与和按位或操作示例
2014/01/27 PHP
php根据指定位置和长度获得子字符串的方法
2015/03/17 PHP
smarty简单应用实例
2015/11/03 PHP
ext jquery 简单比较
2010/04/07 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
echarts实现晶体球面投影的实例教程
2020/10/10 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
[56:41]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs OG
2018/04/01 DOTA
python如何通过protobuf实现rpc
2016/03/06 Python
CSS3 box-sizing属性详解
2016/11/15 HTML / CSS
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
Whistles官网:英国女装品牌
2020/08/14 全球购物
职业技术学校毕业生推荐信
2013/12/03 职场文书
百年校庆节目主持词
2014/03/27 职场文书
个园导游词
2015/02/04 职场文书
老干部座谈会主持词
2015/07/03 职场文书
离婚财产分割协议书
2015/08/11 职场文书
Python+Appium新手教程
2021/04/17 Python
详解Vue slot插槽
2021/11/20 Vue.js
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python
拙作再改《我的收音机情缘》
2022/04/05 无线电