new Vue({ el:'#app', data:{data:""}, created:function(){ var url="json.jsp";" />
当前位置:首页 > 日记 > 正文

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

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

在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 函数的定义-调用、注意

调用,函数,注意事项,定义,电脑软件,函数定义函数语句定义function(a,b){ return a+b; }表达式定义var add = function(a,b){return a+b};//函数表达式可以包含名称,这在递归时很有用 var f = function fact(x){ if(x<=1) {return 1; }else {…

excel 公式数值化的图文教程详解

excel 公式数值化的图文教程详解

图文教程,方法,数值,公式,详解,  Excel中怎么把公式给数值化呢?excel表格中遇到大量数据要整理的时候,很多人会选择运用公式来处理,这时候我们就要将公式数值化,本文介绍了excel 公式数值化的方法,希望阅读过后对你有所启发!excel 公式数值化…

浅谈Javascript事件对象

浅谈Javascript事件对象

事件对象,浅谈,电脑软件,Javascript,如果是事件处理函数绑定的函数,浏览器会默认传递一个参数,而这个参数就是事件对象。document.onclick = function() { alert(arguments.length); //1}因为arguments[0]这样使用这个参数比较麻烦,所以我们可…

微信小程序微信支付接入开发实例详

微信小程序微信支付接入开发实例详

微信支付,详解,实例,程序,电脑软件,本文主要讲述微信小程序接入微信支付开发过程中遇到的坑,分为两大块,小程序端和后台接口封装。本文主要内容如下:一、后台接口封装;二、小程序端整合;三、总结一、后台接口封装本文介绍基于ThinkPHP5进行接口…

Excel中表格进行设置分页预览的操

Excel中表格进行设置分页预览的操

设置,分页,操作技巧,表格,操作步骤,  Excel中如何进行分页预览,跟着一步步操作吧。今天,小编就教大家在Excel中表格进行设置分页预览的操作技巧。希望对你有帮助!Excel中表格进行设置分页预览的操作步骤如何设置成分页预览分页预览方式一:打…

怎么查看好友是否换QQ号?

怎么查看好友是否换QQ号?

好友,电脑软件,QQ,  今天小编打开QQ,发现有好多没见过的QQ好友灰色的躺在列表里,跟他们聊天他们也不回复,为了不让它影响我以后加好友,我只能删除它了,下面小编分享怎么查看好友是否换QQ号?的方法,欢迎大家前来阅读怎么查看好友是否换QQ号?  …

excel中函数对多条件区间判断取值

excel中函数对多条件区间判断取值

区间,取值,函数,方法,标识,  在工作表中,要求按照D2:E6单元格区域中的成绩与等级的对应关系,返回A列分数所属的成绩等级。今天,小编就教大家如何在多条件区间判断取值的方法。Excel中函数对多条件区间判断取值的方法Excel中函数对多条件区间…

wps文字技巧怎么放大缩小工作表格

wps文字技巧怎么放大缩小工作表格

放大缩小,文字,方法,表格,工作,  放大和缩小excel表主要是方便我们预览,其实放大和缩小excel表有好几种方法,那么具体要怎么做呢?接下来下面小编告诉你wps放大缩小工作表格的方法,欢迎大家来到学习。wps放大缩小工作表格的方法wps放大缩小工…

word打开文件转换怎么样控制文件还

word打开文件转换怎么样控制文件还

控制文件,样式,文件转换,库中,电脑软件,  用户需要启用&ldquo;打开时确认文件格式转换&rdquo;功能,以在打开并恢复文件时出现文件格式转换对话框,从而更灵活地控制文件格式转换过程。以下是小编为您带来的关于word打开文件转换控制文件还原…

excel2003行列转置的教程

excel2003行列转置的教程

教程,转置,行列,电脑软件,  Excel中的行列转置该如何操作呢?下面是小编带来的关于excel2003行列转置的教程,希望阅读过后对你有所启发!excel2003行列转置的教程:  行列转置步骤1:首先打开自己制作的excel电子表格!行列转置步骤2:选择我们要…

javascript中replace使用方法总结

javascript中replace使用方法总结

使用方法,电脑软件,javascript,replace,ECMAScript提供了replace()方法。这个方法接收两个参数,第一个参数可以是一个RegExp对象或者一个字符串,第二个参数可以是一个字符串或者一个函数。现在我们来详细讲解可能出现的几种情况。1. 两个参数…

每次打开excel2007都需要配置怎么

每次打开excel2007都需要配置怎么

配置,处理方法,怎么处理,电脑软件,  打开office2007被提示需要安装配置,然而配置安装完毕,第二次打开office2007还是会提示。这到底是怎么回事呢。下面给大家分享excel2007打开时配置的处理方法,欢迎大家来到学习。excel2007打开时配置的处…