這篇文章主要介紹如何使用vue框架Ajax獲取數(shù)據(jù)列表并用BootStrap顯示出來，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)網(wǎng)站建設(shè)提供從項(xiàng)目策劃、軟件開發(fā)，軟件安全維護(hù)、網(wǎng)站優(yōu)化(SEO)、網(wǎng)站分析、效果評估等整套的建站服務(wù)，主營業(yè)務(wù)為成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、外貿(mào)營銷網(wǎng)站建設(shè)，App定制開發(fā)以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。創(chuàng)新互聯(lián)深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

1.第一步肯定是包的導(dǎo)入了

目前對node.js還不是很了解，所以包都是手動下載導(dǎo)入的，沒有用到那個nmp

vue.min.js是vue的主包，vue-resource.js是開源的vue Ajax包，對ajax進(jìn)行了封裝

bootstrap既就是樣式的相關(guān)css和js了

-2.vue發(fā)送ajax請求

后臺數(shù)據(jù)已寫好，返回為json數(shù)據(jù)如下：

{
  "id": "1305120309",
  "violates": 0,
  "borrows": 0,
  "overdraft": 0,
  "notReturns": 0,
  "libraryBooks": [
    {
      "chargePerson": "王大海",
      "borrowTime": "2017-04-22 18:05:10",
      "name": "計(jì)算機(jī)入門",
      "bookId": "051301"
    },
    {
      "chargePerson": "王大海",
      "borrowTime": "2017-04-22 18:06:11",
      "name": "軟件工程",
      "bookId": "051302"
    }
  ]
}

vue Ajax請求代碼如下：

-3.界面列表顯示

table的class使用bootstrap樣式，其他樣式可見菜鳥教程

table標(biāo)簽tr開始遍歷libraryInfo數(shù)據(jù)，語法為value in libraryInfo簡單易懂

  
    借閱書籍列表
    
      
        書籍編號
        書名
        管理人員
        借閱時期
        歸還時間
      
    
    
      
        {{value.bookId}}
        {{value.name}}
        {{value.chargePerson}}
        {{value.borrowTime}}
        {{value.returnTime}}