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 一行代码,轻松搞定浮动快捷留言-V2升级版
Apr 02 Javascript
jQuery Autocomplete自动完成插件
Jul 17 Javascript
对比分析json及XML
Nov 28 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
浅谈AngularJS中ng-class的使用方法
Nov 11 Javascript
详解自动生成博客目录案例
Dec 09 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
Vue2.0 v-for filter列表过滤功能的实现
Sep 07 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
Apr 17 Javascript
小程序中canvas的drawImage方法参数使用详解
Jul 04 Javascript
Vue中强制组件重新渲染的正确方法
Jan 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
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
php 解决substr()截取中文字符乱码问题
2016/07/18 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
javascript alert乱码的解决方法
2013/11/05 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
javascript弹出窗口实现代码
2015/11/12 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
Vue-cli 移动端布局和动画使用详解
2020/08/10 Javascript
[03:00]2014DOTA2国际邀请赛 Titan淘汰潸然泪下Ohaiyo专访
2014/07/15 DOTA
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
python进程管理工具supervisor使用实例
2014/09/17 Python
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
Python Tkinter模块 GUI 可视化实例
2019/11/20 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
Python如何读写字节数据
2020/08/05 Python
尼克松手表官网:Nixon手表
2019/03/17 全球购物
美国智能家居专家:tink
2019/06/04 全球购物
编辑硕士自荐信范文
2013/11/27 职场文书
品牌宣传方案
2014/03/21 职场文书
纪念九一八事变演讲稿:勿忘国耻
2014/09/14 职场文书
2014年政工师工作总结
2014/12/18 职场文书
匿名信格式范文
2015/05/27 职场文书
小学数学教师研修日志
2015/11/13 职场文书