详解vue 中使用 AJAX获取数据的方法


Posted in Javascript onJanuary 18, 2017

在VUE开发时,数据可以使用jquery和vue-resource来获取数据。在获取数据时,一定需要给一个数据初始值。

看下例:

<script type="text/javascript">
  
   new Vue({
      el:'#app',
      data:{data:""},
      created:function(){
        var url="json.jsp";
        var _self=this;
        $.get(url,function(data){
          _self.data=eval("(" + data +")");
        })
        /*
        this.$http.get(url).then(function(data){
          var json=data.body;
          this.data=eval("(" + json +")");
        },function(response){
          console.info(response);
        })*/
      }
     });
  </script>

这里必须设置 vue的data的初始数据,即使此时数据为空。

在使用ajax获取数据时,使用vue-resource 更加合适。

使用vue-resource代码如下:

<script type="text/javascript">
  
   new Vue({
      el:'#app',
      data:{data:""},
      created:function(){
        var url="json.jsp";
      
        this.$http.get(url).then(function(data){
          var json=data.body;
          this.data=eval("(" + json +")");
        },function(response){
          console.info(response);
        })
      }
     });
  </script>

这里我们看到设置VUE实例数据时,直接使用 this.data 就可以设置vue的数据了。

使用jquery的时候,代码如下:

<script type="text/javascript">
   new Vue({
      el:'#app',
      data:{data:""},
      beforeCreate:function(){
        var url="json.jsp";
        var _self=this;
        $.get(url,function(data){
          _self.data=eval("(" + data +")");
        })
      }
     });
  </script>

这里在需要先将 this 赋值给 _self ,让后在jquery的get方法中进行使用,这样使用起来没有vue-resource方便。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery1.6 正式版发布并提供下载
May 05 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
May 23 Javascript
js DOM 元素ID就是全局变量
Sep 20 Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 Javascript
Javascript使用post方法提交数据实例
Aug 03 Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
ES6 Set结构的应用实例分析
Jun 26 Javascript
vue中进行微博分享的实例讲解
Oct 14 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 #Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 #Javascript
jQuery中的一些小技巧
Jan 18 #Javascript
AngularJS Select(选择框)使用详解
Jan 18 #Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 #Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
Jan 18 #Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 #Javascript
You might like
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
PHP读取XML值的代码(推荐)
2011/01/01 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
yii2安装详细流程
2018/05/23 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
Js 获取HTML DOM节点元素的方法小结
2009/04/24 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
2017/03/22 jQuery
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
vue2.0 自定义日期时间过滤器
2017/06/07 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
小程序实现人脸识别功能(百度ai)
2018/12/23 Javascript
简单介绍Python中的几种数据类型
2016/01/02 Python
python3实现猜数字游戏
2020/12/07 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
python 利用pyttsx3文字转语音过程详解
2019/09/25 Python
python多线程使用方法实例详解
2019/12/30 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
前端面试必备之CSS3的新特性
2017/09/05 HTML / CSS
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
UNIX特点都有哪些
2016/04/05 面试题
学校采购员岗位职责
2014/01/02 职场文书
简历上的自我评价怎么写
2014/01/28 职场文书
人事部经理岗位职责
2014/03/07 职场文书
国企干部对照检查材料
2014/08/22 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
酒店财务部岗位职责
2015/04/14 职场文书
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python