欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解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>

這里必須設置 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>

這里我們看到設置VUE實例數(shù)據(jù)時，直接使用 this.data 就可以設置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方法中進行使用，這樣使用起來沒有vue-resource方便。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

  • 詳解從零搭建 vue2 vue-router2 webpack3 工程

    詳解從零搭建 vue2 vue-router2 webpack3 工程

    本篇文章主要介紹了詳解從零搭建 vue2 vue-router2 webpack3 工程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-11-11
  • Vue組件間的雙向綁定示例解析

    Vue組件間的雙向綁定示例解析

    這篇文章主要介紹了Vue組件間的雙向綁定，我們都知道當父組件改變了某個值后，如果這個值傳給了子組件，那么子組件也會自動跟著改變，但是這是單向的，使用v-bind的方式，即子組件可以使用父組件的值，但是不能改變這個值
    2023-03-03
  • element ui table 增加篩選的方法示例

    element ui table 增加篩選的方法示例

    這篇文章主要介紹了element ui table 增加篩選的方法示例，詳細的介紹了如何添加規(guī)則內容，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2018-11-11
  • vue中如何監(jiān)聽url地址欄參數(shù)變化

    vue中如何監(jiān)聽url地址欄參數(shù)變化

    這篇文章主要介紹了vue中如何監(jiān)聽url地址欄參數(shù)變化問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-03-03
  • vue3 emit is not a function問題及解決

    vue3 emit is not a function問題及解決

    這篇文章主要介紹了vue3 emit is not a function問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-09-09
  • vue Antd 輸入框Input自動聚焦方式

    vue Antd 輸入框Input自動聚焦方式

    這篇文章主要介紹了vue Antd 輸入框Input自動聚焦方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-04-04
  • vue動態(tài)循環(huán)出的多個select出現(xiàn)過的變?yōu)閐isabled(實例代碼)

    vue動態(tài)循環(huán)出的多個select出現(xiàn)過的變?yōu)閐isabled(實例代碼)

    本文通過實例代碼給大家分享了vue動態(tài)循環(huán)出的多個select出現(xiàn)過的變?yōu)閐isabled效果，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
    2019-11-11
  • Vue+webpack+Element 兼容問題總結(小結)

    Vue+webpack+Element 兼容問題總結(小結)

    這篇文章主要介紹了Vue+webpack+Element 兼容問題總結(小結)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • vue項目中?jsconfig.json概念及使用步驟

    vue項目中?jsconfig.json概念及使用步驟

    這篇文章主要介紹了vue項目中?jsconfig.json是什么,本文僅僅簡單介紹了?jsconfig?.json?的一些基本配置，而?jsconfig?.json提供了大量能使我們快速便捷提高代碼效率的方法，需要的朋友可以參考下
    2022-07-07
  • 詳解vue-cli下ESlint 配置說明

    詳解vue-cli下ESlint 配置說明

    這篇文章主要介紹了詳解vue-cli下ESlint 配置說明，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09

最新評論