快捷導(dǎo)航

詳解vue 中使用 AJAX獲取數(shù)據(jù)的方法

更新時間：2017年01月18日 12:01:00 作者：自由港

本篇文章主要介紹了詳解vue 中使用 AJAX獲取數(shù)據(jù)的方法，在VUE開發(fā)時，數(shù)據(jù)可以使用jquery和vue-resource來獲取數(shù)據(jù)，有興趣的可以了解一下。

在VUE開發(fā)時，數(shù)據(jù)可以使用jquery和vue-resource來獲取數(shù)據(jù)。在獲取數(shù)據(jù)時，一定需要給一個數(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ù)據(jù)為空。

在使用ajax獲取數(shù)據(jù)時，使用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ù)時，直接使用 this.data 就可以設(shè)置vue的數(shù)據(jù)了。

使用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方法中進(jìn)行使用，這樣使用起來沒有vue-resource方便。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue
ajax

相關(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)方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-11-11
vue循環(huán)中調(diào)用接口-promise.all();按順序執(zhí)行異步處理方式
這篇文章主要介紹了vue循環(huán)中調(diào)用接口-promise.all();按順序執(zhí)行異步處理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-07-07
element-ui中el-row中設(shè)置:gutter間隔不生效問題
這篇文章主要介紹了element-ui中el-row中設(shè)置:gutter間隔不生效問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-08-08
Vue中修改Mint UI的Toast默認(rèn)樣式之字體大小調(diào)整方式
這篇文章主要介紹了Vue中修改Mint UI的Toast默認(rèn)樣式之字體大小調(diào)整方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
Vue頁面跳轉(zhuǎn)動畫效果的實(shí)現(xiàn)方法
百度了好久都沒辦法實(shí)現(xiàn)vue中一個頁面跳到另一個頁面，甚至到google上搜索也是沒辦法的，最終還是找了高人親自指導(dǎo)，所以下面這篇文章主要給大家介紹了關(guān)于Vue頁面跳轉(zhuǎn)動畫效果的實(shí)現(xiàn)方法，需要的朋友可以參考下
2018-09-09
vue引用public目錄下文件的方式詳解
由于一些演示需要對一些簡單頁面進(jìn)行配置,由于打包build后的vue項(xiàng)目基本已經(jīng)看不出原樣,因此需要創(chuàng)建一個文件,并在打包的時候不會進(jìn)行編譯,所以文件放在public,下面這篇文章主要給大家介紹了關(guān)于vue引用public目錄下文件的相關(guān)資料,需要的朋友可以參考下
2022-08-08
淺談VUE uni-app 生命周期
這篇文章主要介紹了uni-app 的生命周期，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2021-10-10
vue如何使用router.meta.keepAlive對頁面進(jìn)行緩存
這篇文章主要介紹了vue如何使用router.meta.keepAlive對頁面進(jìn)行緩存問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
Vuejs第六篇之Vuejs與form元素實(shí)例解析
本文通過實(shí)例給大家詳細(xì)介紹了Vuejs與form元素的相關(guān)知識，非常不錯，具有參考借鑒價值,需要的朋友可以參考下
2016-09-09
vue+F2生成折線圖的方法
這篇文章主要為大家詳細(xì)介紹了vue+F2生成折線圖的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04