快捷導(dǎo)航

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

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

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

在VUE開發(fā)時(shí)，數(shù)據(jù)可以使用jquery和vue-resource來獲取數(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)行使用，這樣使用起來沒有vue-resource方便。

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

您可能感興趣的文章:

vue
ajax

相關(guān)文章

詳解從零搭建 vue2 vue-router2 webpack3 工程
本篇文章主要介紹了詳解從零搭建 vue2 vue-router2 webpack3 工程，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-11-11
Vue組件間的雙向綁定示例解析
這篇文章主要介紹了Vue組件間的雙向綁定，我們都知道當(dāng)父組件改變了某個(gè)值后，如果這個(gè)值傳給了子組件，那么子組件也會(huì)自動(dòng)跟著改變，但是這是單向的，使用v-bind的方式，即子組件可以使用父組件的值，但是不能改變這個(gè)值
2023-03-03
element ui table 增加篩選的方法示例
這篇文章主要介紹了element ui table 增加篩選的方法示例，詳細(xì)的介紹了如何添加規(guī)則內(nèi)容，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-11-11
vue中如何監(jiān)聽url地址欄參數(shù)變化
這篇文章主要介紹了vue中如何監(jiān)聽url地址欄參數(shù)變化問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
vue3 emit is not a function問題及解決
這篇文章主要介紹了vue3 emit is not a function問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-09-09
vue Antd 輸入框Input自動(dòng)聚焦方式
這篇文章主要介紹了vue Antd 輸入框Input自動(dòng)聚焦方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue動(dòng)態(tài)循環(huán)出的多個(gè)select出現(xiàn)過的變?yōu)閐isabled(實(shí)例代碼)
本文通過實(shí)例代碼給大家分享了vue動(dòng)態(tài)循環(huán)出的多個(gè)select出現(xiàn)過的變?yōu)閐isabled效果，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2019-11-11
Vue+webpack+Element 兼容問題總結(jié)(小結(jié))
這篇文章主要介紹了Vue+webpack+Element 兼容問題總結(jié)(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-08-08
vue項(xiàng)目中?jsconfig.json概念及使用步驟
這篇文章主要介紹了vue項(xiàng)目中?jsconfig.json是什么,本文僅僅簡單介紹了?jsconfig?.json?的一些基本配置，而?jsconfig?.json提供了大量能使我們快速便捷提高代碼效率的方法，需要的朋友可以參考下
2022-07-07
詳解vue-cli下ESlint 配置說明
這篇文章主要介紹了詳解vue-cli下ESlint 配置說明，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09