Detailed description of how to use AJAX to obtain data in vue, vueajax

Detailed description of how to use AJAX to obtain data in vue, vueajax

During VUE development, jquery and vue-resource can be used to obtain data. When obtaining data, you must give an initial data value.

See the following example:

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

The initial data of vue data must be set here, even if the data is empty at this time.

Vue-resource is more suitable when ajax is used to obtain data.

The vue-resource code is as follows:

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

Here we can see that when setting VUE instance data, you can directly use this. data to set vue data.

When using jquery, the Code is as follows:

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

Here, you need to assign this value to _ self for later use in jquery's get method, so that it is not convenient to use vue-resource.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.