詳解vue 中使用 AJAX獲取數(shù)據(jù)的方法
在VUE開發(fā)時(shí)，數(shù)據(jù)可以使用jquery和vue-resource來(lái)獲取數(shù)據(jù)。在獲取數(shù)據(jù)時(shí)，一定需要給一個(gè)數(shù)據(jù)初始值。
看下例：
<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>
這里必須設(shè)置 vue的data的初始數(shù)據(jù)，即使此時(shí)數(shù)據(jù)為空。
在使用ajax獲取數(shù)據(jù)時(shí)，使用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>
這里我們看到設(shè)置VUE實(shí)例數(shù)據(jù)時(shí)，直接使用 this.data 就可以設(shè)置vue的數(shù)據(jù)了。
使用jquery的時(shí)候，代碼如下：
<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方法中進(jìn)行使用，這樣使用起來(lái)沒有vue-resource方便。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- 詳解vue與后端數(shù)據(jù)交互(ajax)：vue-resource
- Vue form 表單提交+ajax異步請(qǐng)求+分頁(yè)效果
- Vue-resource實(shí)現(xiàn)ajax請(qǐng)求和跨域請(qǐng)求示例
- vue使用Axios做ajax請(qǐng)求詳解
- 詳解Vue.js基于$.ajax獲取數(shù)據(jù)并與組件的data綁定
- Vue.js Ajax動(dòng)態(tài)參數(shù)與列表顯示實(shí)現(xiàn)方法
- vue使用ajax獲取后臺(tái)數(shù)據(jù)進(jìn)行顯示的示例
- Vue.js展示AJAX數(shù)據(jù)簡(jiǎn)單示例講解
- vue.js 表格分頁(yè)ajax 異步加載數(shù)據(jù)
- 淺談Vue.js應(yīng)用的四種AJAX請(qǐng)求數(shù)據(jù)模式
- vue ajax 攔截原理與實(shí)現(xiàn)方法示例
相關(guān)文章
vue 雙向數(shù)據(jù)綁定的實(shí)現(xiàn)學(xué)習(xí)之監(jiān)聽器的實(shí)現(xiàn)方法
這篇文章主要介紹了vue 雙向數(shù)據(jù)綁定的實(shí)現(xiàn)學(xué)習(xí)之監(jiān)聽器的實(shí)現(xiàn)方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
vue循環(huán)中調(diào)用接口-promise.all();按順序執(zhí)行異步處理方式
這篇文章主要介紹了vue循環(huán)中調(diào)用接口-promise.all();按順序執(zhí)行異步處理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
element-ui中el-row中設(shè)置:gutter間隔不生效問題
這篇文章主要介紹了element-ui中el-row中設(shè)置:gutter間隔不生效問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue中修改Mint UI的Toast默認(rèn)樣式之字體大小調(diào)整方式
這篇文章主要介紹了Vue中修改Mint UI的Toast默認(rèn)樣式之字體大小調(diào)整方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue頁(yè)面跳轉(zhuǎn)動(dòng)畫效果的實(shí)現(xiàn)方法
百度了好久都沒辦法實(shí)現(xiàn)vue中一個(gè)頁(yè)面跳到另一個(gè)頁(yè)面，甚至到google上搜索也是沒辦法的，最終還是找了高人親自指導(dǎo)，所以下面這篇文章主要給大家介紹了關(guān)于Vue頁(yè)面跳轉(zhuǎn)動(dòng)畫效果的實(shí)現(xiàn)方法，需要的朋友可以參考下2018-09-09
由于一些演示需要對(duì)一些簡(jiǎn)單頁(yè)面進(jìn)行配置,由于打包build后的vue項(xiàng)目基本已經(jīng)看不出原樣,因此需要?jiǎng)?chuàng)建一個(gè)文件,并在打包的時(shí)候不會(huì)進(jìn)行編譯,所以文件放在public,下面這篇文章主要給大家介紹了關(guān)于vue引用public目錄下文件的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了uni-app 的生命周期，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-10-10
vue如何使用router.meta.keepAlive對(duì)頁(yè)面進(jìn)行緩存
這篇文章主要介紹了vue如何使用router.meta.keepAlive對(duì)頁(yè)面進(jìn)行緩存問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vuejs第六篇之Vuejs與form元素實(shí)例解析
本文通過(guò)實(shí)例給大家詳細(xì)介紹了Vuejs與form元素的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09
這篇文章主要為大家詳細(xì)介紹了vue+F2生成折線圖的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04