详解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 相关文章推荐
深入理解JavaScript系列(3) 全面解析Module模式
Jan 15 Javascript
用jquery中插件dialog实现弹框效果实例代码
Nov 15 Javascript
关于JavaScript对象的动态选择及遍历对象
Mar 10 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
Apr 04 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
Nov 07 Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 Javascript
前端js弹出框组件使用方法
Aug 24 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
使用D3.js构建实时图形的示例代码
Aug 28 Javascript
全面解析Vue中的$nextTick
Dec 24 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
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
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
php不用正则采集速度探究总结
2008/03/24 PHP
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
php中define用法实例
2015/07/30 PHP
php5.4传引用时报错问题分析
2016/01/22 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
PHP三种方式实现链式操作详解
2017/01/21 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
JavaScript动态生成二维码图片
2016/04/20 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
2017/03/29 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
Python中用于转换字母为小写的lower()方法使用简介
2015/05/19 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
10 分钟快速入门 Python3的教程
2019/01/29 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
python集合的新增元素方法整理
2020/12/07 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
FC-Moto丹麦:欧洲最大的摩托车服装和头盔商店之一
2019/08/20 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
如何删除一个表里面的重复行
2013/07/13 面试题
sort命令的作用和用法
2013/08/25 面试题
易程科技软件测试笔试
2013/03/24 面试题
大学生优秀团员事迹材料
2014/01/30 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书