學習vue結合ajax查詢出後臺數據

第一步：先獲取後臺的API

這裏已經寫好了後臺，API是bookAction_getAllBook

 

第二步：建立jsp文件並導入vue.js和JQuery.js

 

第三步：寫上Model

 

第四步：寫上View

 

這時頁面上的顯示的數據都是寫死的，這時候就須要寫上ajax經過它來獲取到後臺的數據並把它顯示出來

 

第五步：ajax

先把model定義成一個帶有bookList的空數組以便於存放後臺獲取的json數據

 

 

這時候要注意，這裏有兩個方法，我推薦使用的是方法二，由於方法一有一個很差的地方就是在頁面成功的時候他會不停的new Vue，

但你屢次訪問頁面的時候會形成new出不少個Vue，這樣會侵佔過多的內存，而方法二是單獨獨立出來的，無論怎麼訪問都是隻new出

一個Vue，這樣大大節省了內存的空間;

別忘了調用函數......

 

最後結果是：

 

這時還沒結束，咱們還要作一個刷新按鈕，模仿點擊時在不刷新頁面的狀況下刷新出新的數據

首先先定義一個按鈕，而且給它綁定點擊事件調用ajax

 

 

 

效果是：

 

當我點擊圖片按鈕時則調用getData函數從新運行一邊ajax方法達到從新獲取後臺的數據

 

這時咱們要日後臺添加一條數據

 

這時咱們的前端頁面數據還沒顯示出來....

 

當點擊圖片按鈕時...

 

 

以上是天天筆記

　　　　　　　　^_^ Yeah....