如何在vue項(xiàng)目中利用AJAX獲取數(shù)據(jù)？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)建站自2013年創(chuàng)立以來，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都做網(wǎng)站、成都網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元甘孜州做網(wǎng)站,已為上家服務(wù),為甘孜州各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575

  
   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);
        })*/
      }
     });
  

這里必須設(shè)置 vue的data的初始數(shù)據(jù)，即使此時(shí)數(shù)據(jù)為空。

在使用ajax獲取數(shù)據(jù)時(shí)，使用vue-resource 更加合適。

使用vue-resource代碼如下：

  
   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);
        })
      }
     });
  

這里我們看到設(shè)置VUE實(shí)例數(shù)據(jù)時(shí)，直接使用 this.data 就可以設(shè)置vue的數(shù)據(jù)了。

使用jquery的時(shí)候，代碼如下：

   new Vue({
      el:'#app',
      data:{data:""},
      beforeCreate:function(){
        var url="json.jsp";
        var _self=this;
        $.get(url,function(data){
          _self.data=eval("(" + data +")");
        })
      }
     });
  

這里在需要先將 this 賦值給 _self ,讓后在jquery的get方法中進(jìn)行使用，這樣使用起來沒有vue-resource方便。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。