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方便。