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

成都創(chuàng)新互聯(lián)為您提適合企業(yè)的網(wǎng)站設(shè)計(jì)?讓您的網(wǎng)站在搜索引擎具有高度排名，讓您的網(wǎng)站具備超強(qiáng)的網(wǎng)絡(luò)競(jìng)爭(zhēng)力！結(jié)合企業(yè)自身，進(jìn)行網(wǎng)站設(shè)計(jì)及把握，最后結(jié)合企業(yè)文化和具體宗旨等，才能創(chuàng)作出一份性化解決方案。從網(wǎng)站策劃到成都網(wǎng)站建設(shè)、做網(wǎng)站， 我們的網(wǎng)頁(yè)設(shè)計(jì)師為您提供的解決方案。

vue是什么

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

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

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

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

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

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

后臺(tái)數(shù)據(jù)已寫(xiě)好，返回為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ī)入門(mén)",
      "bookId": "051301"
    },
    {
      "chargePerson": "王大海",
      "borrowTime": "2017-04-22 18:06:11",
      "name": "軟件工程",
      "bookId": "051302"
    }
  ]
}

vue Ajax請(qǐng)求代碼如下：

-3.界面列表顯示

table的class使用bootstrap樣式，其他樣式可見(jiàn)菜鳥(niǎo)教程

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

  
    借閱書(shū)籍列表
    
      
        書(shū)籍編號(hào)
        書(shū)名
        管理人員
        借閱時(shí)期
        歸還時(shí)間
      
    
    
      
        {{value.bookId}}
        {{value.name}}
        {{value.chargePerson}}
        {{value.borrowTime}}
        {{value.returnTime}}