Vue.js基於$.ajax取得資料並和組件的data綁定的具體詳解

這篇文章主要介紹了詳解Vue.js基於$.ajax取得資料並與元件的data綁定，非常具有實用價值，需要的朋友可以參考下

Vue.js與jQuery不衝突？ ？ ？

在實際的應用中，幾乎90%的資料是來自服務端的，前端和服務端之間的資料互動一般是透過ajax請求來完成的。
說到ajax請求，第一個反應肯定想到了jQuery，專案中如果引入jQuery會幫助我們簡化很多操作，簡化DOM操作，ajax方法取得後端資料等。

然而，Vue.js和jQuery衝突嗎？ ？ ？

答案顯然是不衝突！ ！ ！

接下來會實作Vue.js元件中使用jQuery的ajax方法取得伺服器端資料並綁定至元件的data。

建立Vue.js單一檔案元件

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

json資料

程式碼如下:

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

頁面效果

在ajax取得資料後將取得的資料綁定到元件物件的data上，就能完成資料的取得。

這樣頁面中就能正確的使用從伺服器端取得的資料來渲染了。

以上是Vue.js基於$.ajax取得資料並和組件的data綁定的具體詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！