vue經過ajax獲取數據踩坑筆記

跨屏網專一一句話JS解決網站移動適配問題，因此除了前端之外，還須要涉及程序開發的部分，而最近流行的vue框架也在內，初次使用vue的時候不免出問題，好比vue經過ajax獲取數據的時候，若是不當心就容易出問題，最終的出來如下經驗，供後來人學習。

在VUE開發時，數據能夠使用jquery和vue-resource來獲取數據。在獲取數據時，必定須要給一個數據初始值。

看下例：

<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的初始數據，即便此時數據爲空。

在使用ajax獲取數據時，使用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實例數據時，直接使用 this.data 就能夠設置vue的數據了。

使用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方便，另外除了jquery，axios也須要先把this賦值給_self。