vue.js配合$.post從后臺獲取數(shù)據(jù)簡單demo分享
更新時間：2018年08月11日 11:27:25 作者：Islandww
今天小編就為大家?guī)硪黄獀ue.js配合$.post從后臺獲取數(shù)據(jù)簡單demo分享，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
首先導(dǎo)入
<script type="text/javascript" src="/island/stage/js/vue.min.js"></script>
html樣式：
<div id="main-content" class="wrap-container zerogrid">
<article id="news_content" v-for="item in items">
<div class="col-1-2 right">
<img :src="item.coverimage"/><!--img標(biāo)簽與src之間需要有空格-->
</div>
<div class="col-1-2 left">
<a class="art-category left" href="#" rel="external nofollow" rel="external nofollow" >{{item.releasetime}}</a>
<div class="clear"></div>
<div class="art-content">
<h2>{{item.title}}</h2>
<div class="info">
<a href="#" rel="external nofollow" rel="external nofollow" >{{item.author}}</a>
</div>
<div class="line"></div>
<p>{{item.content}}</p>
<a v-bind:href="['/island/stage/newscontent.html?id='+item.id]" rel="external nofollow" class="more">閱讀全文</a> <!--屬性數(shù)據(jù)綁定以及拼接-->
</div>
</div>
</article>
<!-- 循環(huán)結(jié)束(新聞) -->
</div>
js部分：
var vm = new Vue({
el: '#main-content',
data: {
items : []
}, //end data
created:function(){
$.post("/island/stage/queryOneAllNews.do",{"categoryid":parseInt(categoryid)},function(data){
vm.items = data;
});//end post
} //created
}); //end vue
注意：返回的json數(shù)組 并不需要JSON.stringify(data) 轉(zhuǎn)成json字符串 items 這里需要的是json對象
當(dāng)然 官網(wǎng)上推薦的是使用axios npm這種方式。
以上這篇vue.js配合$.post從后臺獲取數(shù)據(jù)簡單demo就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文是小編給大家分享的vue實現(xiàn)仿淘寶結(jié)賬頁面實例代碼，主要功能是仿照淘寶頁面的結(jié)算購物車商品時自動算出合計價格的頁面，具體實例代碼大家參考下本文2017-11-11
全局變量（函數(shù)等）可以在任意組件內(nèi)訪問,可以當(dāng)組件間的傳值使用,這篇文章給大家介紹vue3 定義使用全局變量的示例詳解,感興趣的朋友跟隨小編一起看看吧2023-10-10
這篇文章主要介紹了vue項目部署上線遇到的問題及解決方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-06-06
在開發(fā)過程中發(fā)現(xiàn)路徑中帶有/#/的標(biāo)示,而且還去不掉,很丑陋,下面這篇文章主要給大家介紹了vue項目如何去掉URL中#符號的相關(guān)資料,文中通過實例代碼的非常詳細,需要的朋友可以參考下2022-07-07
對請求的封裝在實際項目中是十分必要的,它可以讓我們統(tǒng)一處理 http 請求,比如做一些攔截,處理一些錯誤等,本篇文章將詳細介紹如何封裝 axios 請求,需要的朋友可以參考下2023-09-09
本文通過實例代碼給大家介紹了vue中的無限循環(huán)，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-09-09
整個項目結(jié)構(gòu)清晰,尤其單文件組件的表現(xiàn)力尤為突出,使得每個組件的邏輯都沒有過于復(fù)雜,所以這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)一個單文件組件的相關(guān)資料,需要的朋友可以參考下2021-06-06
隨著vue2的落幕,vue3越來成熟,有必要更新一下vue3的父子組件之間的傳值方式,這里介紹下vue3+vite+ts父子組件之間的傳值方式實例詳解,感興趣的朋友一起看看吧2023-12-12
今天將從 Vue 的入口文件開始，看看聲明了一個 Vue 的單文件之后是如何被 compile-core 編譯核心模塊編譯成渲染函數(shù)的。下面小編講解并附上代碼分析展現(xiàn)在文章里，感興趣的小伙伴不要錯過奧2021-09-09
VUE + UEditor 單圖片跨域上傳功能的實現(xiàn)方法
這篇文章主要介紹了VUE + UEditor 單圖片跨域上傳功能的實現(xiàn)方法，需要的朋友參考下2018-02-02