详解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按需加载的具体实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
computed作为计算属性其作用是描述响应式数据的复杂逻辑计算，当所依赖的响应式数据发生改变时计算属性会重新计算，更新逻辑计算的结果，这篇文章主要介绍了Vue.js中的computed的功能设计,需要的朋友可以参考下2023-06-06
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
本篇文章主要介绍了Vue2 利用 v-model 实现组件props双向绑定的优美解决方案，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-03-03
这篇文章主要介绍了vue+django实现一对一聊天功能,主要是通过websocket，由于Django不支持websocket，所以我使用了django-channels。，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2019-07-07
学习 Vue 的时候觉得样式绑定很简单，但是使用的时候总是容易搞晕自己。这篇文章主要介绍了Vue 样式绑定的实现方法，感兴趣的小伙伴们可以参考一下2019-01-01
这篇文章主要介绍了Vue.js之render函数使用详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
vue通过provide & inject两个关键字完成父组件向子孙组件直接传值，很像子类能够使用父类的属性一样方便。provide & inject一般用于多层之间的传值，两层之间还是使用props进行2021-10-10
这篇文章主要为大家详细介绍了Vue3如何结合Elementplus实现面包屑功能,文中的示例代码简洁易懂,具有一定的借鉴价值,有需要的小伙伴可以参考下2023-11-11
这篇文章主要介绍了vue结合vue-electron创建应用程序,本文给大家介绍了安装electron有两种方式，两种方式创建的项目结构大不相同，需要的朋友可以参考下2024-03-03
这篇文章主要给大家介绍了关于Vuex中五个属性以及使用的相关资料,Vuex是一个专为Vue.js应用程序开发的状态管理模式,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2023-09-09
最新评论