详解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 相关文章推荐
通过Unicode转义序列来加密,按你说的可以算是混淆吧
May 06 Javascript
FormValid0.5版本发布,带ajax自定义验证例子
Aug 17 Javascript
js+CSS 图片等比缩小并垂直居中实现代码
Dec 01 Javascript
JavaScript Prototype对象
Jan 07 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
jQuery的几个我们必须了解的特点
May 03 Javascript
JQuery标签页效果的两个实例讲解(4)
Sep 17 Javascript
JS实现简单的二元方程计算器功能示例
Jan 03 Javascript
js实现带简单弹性运动的导航条
Feb 22 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
Dec 10 Javascript
详解项目升级到vue-cli3的正确姿势
Jan 28 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 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
采用memcache在web集群中实现session的同步会话
2014/07/05 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
LINUX下PHP程序实现WORD文件转化为PDF文件的方法
2016/05/13 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
js继承的实现代码
2010/08/05 Javascript
jquery json 实例代码
2010/12/02 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
2016/07/27 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
JS中常用的消息框总结
2018/02/24 Javascript
python批量同步web服务器代码核心程序
2014/09/01 Python
用Python设计一个经典小游戏
2017/05/15 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
numpy库reshape用法详解
2020/04/19 Python
Python批量处理csv并保存过程解析
2020/05/16 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
澳大利亚拥有最好的家具和家居用品在线目的地:Nestz
2019/02/23 全球购物
德国富尔达运动鞋店:43einhalb
2020/12/25 全球购物
求网格中的黑点分布
2013/11/06 面试题
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
应届生自荐信
2014/06/30 职场文书
小学生春游活动方案
2014/08/20 职场文书
2014年纪检工作总结
2014/11/12 职场文书
2016年元旦致辞
2015/08/01 职场文书