详解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方便。

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

您可能感兴趣的文章:

• 详解vue与后端数据交互(ajax)：vue-resource
• 详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
• vue2 前后端分离项目ajax跨域session问题解决方法
• Vue-resource实现ajax请求和跨域请求示例
• Vue form 表单提交+ajax异步请求+分页效果
• vue实现ajax滚动下拉加载，同时具有loading效果(推荐)
• vue使用Axios做ajax请求详解
• Vue.js Ajax动态参数与列表显示实现方法
• 使用vue框架 Ajax获取数据列表并用BootStrap显示出来
• Vue.js展示AJAX数据简单示例讲解
• 详解Vue.js基于$.ajax获取数据并与组件的data绑定
• vue.js 表格分页ajax 异步加载数据
• Javascript vue.js表格分页，ajax异步加载数据
• 浅谈Vue.js应用的四种AJAX请求数据模式
• VUE 更好的 ajax 上传处理 axios.js实现代码
• Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
• Vue Ajax跨域请求实例详解
• vue发送ajax请求详解