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

在VUE开发时，数据可以使用jquery和vue-resource来获取数据。在获取数据时，一定需要给一个数据初始值。

看下例：

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);

})*/

}

});

这里必须设置 vue的data的初始数据，即使此时数据为空。

在使用ajax获取数据时，使用vue-resource 更加合适。

使用vue-resource代码如下：

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);

})

}

});

这里我们看到设置VUE实例数据时，直接使用 this.data 就可以设置vue的数据了。

使用jquery的时候，代码如下：

new Vue({

el:'#app',

data:{data:""},

beforeCreate:function(){

var url="json.jsp";

var _self=this;

$.get(url,function(data){

_self.data=eval("(" + data +")");

})

}

});

这里在需要先将 this 赋值给 _self ,让后在jquery的get方法中进行使用，这样使用起来没有vue-resource方便。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

vue 读取ajax数据,详解vue 中使用 AJAX获取数据的方法相关推荐

实例化vue发生了什么?(详解vue生命周期)
实例化vue发生了什么?(详解vue生命周期) 本文将对vue的生命周期进行详细的讲解,让你了解一个vue实例的诞生都经历了什么~ 我在Github上建立了一个存放vue笔记的仓库,以后会陆续更新一些 ...
python json方法详解_详解python中的json的基本使用方法
在Python中使用json的时候,主要也就是使用json模块,json是以一种良好的格式来进行数据的交互,从而在很多时候,可以使用json数据格式作为程序之间的接口. #!/usr/bin/env ...
mysql数据库中count的作用_详解 MySQL中count函数的正确使用方法
1. 描述在MySQL中,当我们需要获取某张表中的总行数时,一般会选择使用下面的语句 select count(*) from table; 其实count函数中除了*还可以放其他参数,比如常数.主 ...
计算机无法读取exe文件,详解EXE文件出错不能打开的修复方法
我们在XP电脑的使用中,很多的小伙伴在安装XP以后出现不知道打开EXE文件出错的问题,出现文件打不开的情况可能就是系统中的注册表设置的值有问题造成的,很多的小伙伴都是有出现这样的情况不知道怎么处理,今 ...
vue 调取本地wps_详解VUE调用本地json的使用方法
开始的时候我以为,用vue去调取json要多么的麻烦,完咯就先去的百度,找了几个,看上面又要配置这配置那的,看的我都头大,像一些思维逻辑清晰的肯定不会出现这种情况. 下面我说下我这的情况,大家依情况代 ...
LoRa节点开发：5、代码详解LoRaWAN中的几种数据包（发送与接收数据）
本文来源微信公众号[物联网思考] 本文主要结合LoRaNode SDK v4.4.2和LoRaWAN规范1.0.3来展开. 1.数据包类型 LoRaWAN规范中有不同的数据包,通过MType字段区分, ...
python wx模块详解_python中wx模块的具体使用方法
wx包中的方法都是以大写字母开头的,而这和Python的习惯是相反的. 本节介绍如何创建python程序的图形用户界面(GUI),也就是那些带有按钮和文本框的窗口.这里介绍wxPython : 根据自 ...
一文详解Elasticsearch中的Node角色以及使用方法
前言说到elasticsearch,大家第一反应就是他是一款NOSQL数据库,既然是NOSQL数据库,则生产环境上必定是集群,由很多台服务器共同搭建而成.按照常理,分布式集群从搭建模式上分为中心化模 ...
前端vue显示柱状图_详解Vue2+Echarts实现多种图表数据可视化Dashboard（附源码）_旧址_前端开发者...
数据可视化将数据通过图表的形式展现出来将大大的提升可读性和阅读效率本例包含柱状图.折线图.散点图.热力图.复杂柱状图.预览面板等技术栈 vue2.x vuex 存储公共变量,如色值等 eleme ...

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

vue 读取ajax数据,详解vue 中使用 AJAX获取数据的方法相关推荐

最新文章

热门文章