詳解Vue.js基于$.ajax獲取數(shù)據(jù)并與組件的data綁定

2019-11-19 16:28:50

字體：大中小

供稿：網(wǎng)友

Vue.js與jQuery不沖突？？？

在實(shí)際的應(yīng)用中，幾乎90%的數(shù)據(jù)是來源于服務(wù)端的，前端和服務(wù)端之間的數(shù)據(jù)交互一般是通過ajax請求來完成的。
說到ajax請求，第一反應(yīng)肯定想到了jQuery，項(xiàng)目中如果引入jQuery會幫助我們簡化很多操作，簡化DOM操作，ajax方法獲取后端數(shù)據(jù)等。

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

答案顯然是不沖突！！！

接下來會實(shí)現(xiàn)Vue.js組件中使用jQuery的ajax方法獲取服務(wù)器端數(shù)據(jù)并綁定至組件的data中。

創(chuàng)建Vue.js單文件組件

<template>  <div>    <div class="id">{{ret}}</div>    <div class="id">{{data}}</div>  </div></template><script>  export default{    name:'Test',    data(){      return{        ret:'',        data:''      }    },    mounted(){      this.$nextTick(()=>{        var that=this;        $.ajax({          type:"get",          url:"http://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數(shù)據(jù)

復(fù)制代碼代碼如下:

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

頁面效果