详解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 相关文章推荐
js css样式操作代码(批量操作)
Oct 09 Javascript
Javascript 网页水印(非图片水印)实现代码
Mar 01 Javascript
js删除所有的cookie的代码
Nov 25 Javascript
关于JS字符串函数String.replace()
Apr 07 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
May 03 Javascript
解析Vue2.0双向绑定实现原理
Feb 23 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
May 11 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
Mar 01 Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 Javascript
vue路由对不同界面进行传参及跳转的总结
Apr 20 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 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
如何使用Strace调试工具
2013/06/03 PHP
利用JQuery的load函数动态加载其它页面的内容的实现代码
2010/12/14 Javascript
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
JSONP 跨域共享信息
2012/08/16 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
微信开发 js实现tabs选项卡效果
2016/10/28 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
2017/07/18 jQuery
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
利用原生JavaScript实现造日历轮子实例代码
2019/05/08 Javascript
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
[01:12:44]VG vs Mineski Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
python操作CouchDB的方法
2014/10/08 Python
Python实现单词拼写检查
2015/04/25 Python
python3实现暴力穷举博客园密码
2016/06/19 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
Python cookbook(数据结构与算法)实现优先级队列的方法示例
2018/02/18 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
python中for in的用法详解
2020/04/17 Python
python统计mysql数据量变化并调用接口告警的示例代码
2020/09/21 Python
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
物理教学随笔感言
2014/02/22 职场文书
护理助产毕业生的求职信
2014/03/02 职场文书
软件项目开发计划书
2014/05/01 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
课外活动总结
2015/02/04 职场文书
部门2015年度工作总结
2015/04/29 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
Mongo服务重启异常问题的处理方法
2021/07/01 MongoDB