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 相关文章推荐
通过JS获取用户本地图片路径并显示的代码
Feb 16 Javascript
Javascript与jQuery方法的隐藏与显示
Jan 19 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
不使用script导入js文件的几种方法
Oct 27 Javascript
JS组件系列之JS组件封装过程详解
Apr 28 Javascript
微信小程序实现tab切换效果
Nov 21 Javascript
JavaScript 五大常见函数
Mar 23 Javascript
vue地区选择组件教程详解
May 04 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
Sep 12 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 25 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 Javascript
React Fragment介绍与使用详解
Nov 11 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使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
javascript下给元素添加事件的方法与代码
2007/08/13 Javascript
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
jQuery 一个图片切换的插件
2011/10/09 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
使用pandas库对csv文件进行筛选保存
2020/05/25 Python
python计算auc的方法
2020/09/09 Python
利用Python pandas对Excel进行合并的方法示例
2020/11/04 Python
python statsmodel的使用
2020/12/21 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
详解background属性的8个属性值(面试题)
2020/11/02 HTML / CSS
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
广告学专业推荐信范文
2013/11/23 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
小学教师年度个人总结
2015/02/05 职场文书
考研英语辞职信
2015/05/13 职场文书
导游词之西湖雷峰塔
2019/09/18 职场文书
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技