Detailed explanation of how Vue.js obtains data based on $.ajax and binds it to the component's data

This article mainly introduces the detailed explanation of Vue.js Obtaining data based on $.ajax and binding it to the data of the component is very practical. Friends who need it can refer to it

Vue.js does not conflict with jQuery? ? ?

In actual applications, almost 90% of the data comes from the server, and the data interaction between the front-end and the server is generally completed through ajax requests.
Speaking of ajax requests, the first reaction must be to think of jQuery. If jQuery is introduced into the project, it will help us simplify many operations, simplify DOM operations, ajax method to obtain back-end data, etc.

However, does Vue.js conflict with jQuery? ? ?

The answer is obviously no conflict! ! !

Next, we will implement the ajax method of jQuery in the Vue.js component to obtain server-side data and bind it to the component's data.

Create Vue.js single file component

<template>
  <p>
    <p class="id">{{ret}}</p>
    <p class="id">{{data}}</p>
  </p>
</template>
<script>
  export default{
    name:&#39;Test&#39;,
    data(){
      return{
        ret:&#39;&#39;,
        data:&#39;&#39;
      }
    },
    mounted(){
      this.$nextTick(()=>{
        var that=this;
        $.ajax({
          type:"get",
          url:"//wuanlife_api/index.php/Post/get_collect_post",
          data:{user_id:1},
          success:function(data){
            that.ret=data.ret;
            that.data=data.data;
          }
        })
      })
    }
  }
</script>
<style>
  .id{
    font-size: 25px;
    position: relative;
    left:50px;
    right:50px;
  }
</style>

jsonData

The code is as follows:

{"ret":200,"data":{"page_count":1,"current_page":1,"posts":[]},"msg":null}

Page effect

After ajax obtains the data, bind the obtained data to the data of the component object to complete the data acquisition.

In this way, the page can correctly use the data obtained from the server to render.

The above is the detailed content of Detailed explanation of how Vue.js obtains data based on $.ajax and binds it to the component's data. For more information, please follow other related articles on the PHP Chinese website!