详解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 相关文章推荐
一步一步制作jquery插件Tabs实现过程
Jul 06 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
JavaScript注入漏洞的原理及防范(详解)
Dec 04 Javascript
javascript实现QQ空间相册展示源码
Dec 12 Javascript
tween.js缓动补间动画算法示例
Feb 13 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
Aug 13 Javascript
详解如何webpack使用DllPlugin
Sep 30 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
在vue中通过render函数给子组件设置ref操作
Nov 17 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
PHP函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
PHP 第二节 数据类型之字符串类型
2012/04/28 PHP
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
PHP中把有符号整型转换为无符号整型方法
2015/05/27 PHP
简介PHP的Yii框架中缓存的一些高级用法
2016/03/29 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
javascript引导程序
2008/10/26 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
微信小程序实现刷脸登录
2018/05/25 Javascript
从vue源码看props的用法
2019/01/09 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
github配置使用指南
2014/11/18 Python
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
python创建进程fork用法
2015/06/04 Python
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
python 贪心算法的实现
2020/09/18 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
移动端Web页面的CSS3 flex布局快速上手指南
2016/05/31 HTML / CSS
瑞贝卡·明可弗包包官网:Rebecca Minkoff
2016/07/21 全球购物
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
室内设计专业学生的自我评价分享
2013/11/27 职场文书
护理专业自我鉴定
2014/01/30 职场文书
植树节活动总结
2014/04/30 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
给校长的建议书范文
2015/09/14 职场文书
SQL Server实现分页方法介绍
2022/03/16 SQL Server
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技