這篇文章主要介紹了詳解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:'Test',
data(){
return{
ret:'',
data:''
}
},
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中文網其他相關文章！
