詳解Vue.js基于$.ajax獲取數(shù)據(jù)并與組件的data綁定
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ù)
{"ret":200,"data":{"page_count":1,"current_page":1,"posts":[]},"msg":null}
頁面效果
在ajax獲取數(shù)據(jù)后將獲取到的數(shù)據(jù)綁定到組件對象的data上，就能完成數(shù)據(jù)的獲取。
這樣頁面中就能正確的使用從服務(wù)器端獲取的數(shù)據(jù)來渲染了。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了如何利用vue寫一個日歷，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-11-11
vue中手動封裝iconfont組件解析(三種引用方式的封裝和使用)
這篇文章主要介紹了vue中手動封裝iconfont組件(三種引用方式的封裝和使用)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了在Vue.js中加載字體的正確方法,本文通過實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
解決vue中el-date-picker?type=daterange日期不回顯的問題
這篇文章主要介紹了解決vue中el-date-picker?type=daterange日期不回顯的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
淺析Vue.js中v-bind v-model的使用和區(qū)別
v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定,所謂雙向綁定。這篇文章主要介紹了Vue.js中v-bind v-model的使用和區(qū)別,需要的朋友可以參考下2018-12-12
vue配置代理vue.config.js后不生效的解決(小坑)
這篇文章主要介紹了vue配置代理vue.config.js后不生效的解決(小坑)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
讓axios發(fā)送表單請求形式的鍵值對post數(shù)據(jù)的實(shí)例
今天小編就為大家分享一篇讓axios發(fā)送表單請求形式的鍵值對post數(shù)據(jù)的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了VUE3+TS獲取組件類型的方法踩坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
你不知道的Vue技巧之--開發(fā)一個可以通過方法調(diào)用的組件(推薦)
這篇文章主要介紹了你不知道的Vue技巧之--開發(fā)一個可以通過方法調(diào)用的組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue中使用vue-plugin-hiprint插件進(jìn)行打印的功能實(shí)現(xiàn)
hiprint 是一個web 打印的js組件,無需安裝軟件,支持windows,macOS,linux 系統(tǒng),支持移動端,PC端瀏覽器,angular,vue,react 等 分頁預(yù)覽,打印,操作簡單,運(yùn)行快速,本文介紹了Vue中使用vue-plugin-hiprint插件進(jìn)行打印,需要的朋友可以參考下2025-04-04