详解vue 中使用 AJAX获取数据的方法
更新时间：2017年01月18日 12:01:00 作者：自由港
本篇文章主要介绍了详解vue 中使用 AJAX获取数据的方法，在VUE开发时，数据可以使用jquery和vue-resource来获取数据，有兴趣的可以了解一下。
在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方便。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue 双向数据绑定的实现学习之监听器的实现方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
vue循环中调用接口-promise.all();按顺序执行异步处理方式
这篇文章主要介绍了vue循环中调用接口-promise.all();按顺序执行异步处理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
element-ui中el-row中设置:gutter间隔不生效问题
这篇文章主要介绍了element-ui中el-row中设置:gutter间隔不生效问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
Vue中修改Mint UI的Toast默认样式之字体大小调整方式
这篇文章主要介绍了Vue中修改Mint UI的Toast默认样式之字体大小调整方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
百度了好久都没办法实现vue中一个页面跳到另一个页面，甚至到google上搜索也是没办法的，最终还是找了高人亲自指导，所以下面这篇文章主要给大家介绍了关于Vue页面跳转动画效果的实现方法，需要的朋友可以参考下2018-09-09
由于一些演示需要对一些简单页面进行配置,由于打包build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译,所以文件放在public,下面这篇文章主要给大家介绍了关于vue引用public目录下文件的相关资料,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了uni-app 的生命周期，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-10-10
vue如何使用router.meta.keepAlive对页面进行缓存
这篇文章主要介绍了vue如何使用router.meta.keepAlive对页面进行缓存问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
本文通过实例给大家详细介绍了Vuejs与form元素的相关知识，非常不错，具有参考借鉴价值,需要的朋友可以参考下2016-09-09
这篇文章主要为大家详细介绍了vue+F2生成折线图的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
最新评论