相關參考
https://vuejs.org/v2/guide/
1.
加入vue.js
2.
先"包裹"一層 要用到Vue的元素
個人覺得有點想原本習慣的<!--Content-->
但這次只要放入標籤(我是用Id)
像是範例為 vMain
然後宣告js 物件 我是取名也叫做 vMain 不知道會不會有撞名問題
所以我的el: 就是 #vMain
3.
再來加入變數
{{Creat_Date}} 兩個括號 桃紅色的
如果data 這個物件裡面有一個叫Creat_Date 的資料他就會被放進去
這樣第一個app 就完成了。
其中 Vue 裡面包含幾樣東西
el >> 標示 這個Vue 的標籤
data >> 裡面存放的資料變數
created >> 生命週期的
methods>>包含各種功能function
這次的列表頁需要用到以前用的 List Item 跟 Pager
對應到vue 會使用到
v-for for 迴圈
v-for" item in dt ">> dt 為data中的一個array陣列 (此範例中 為PD 中的 DT)
item 則是在這裡的區域變數
有些要顯示有些要隱藏
v-if
v-if" pager.currentPage > 1" pager 為data 中的一個物件 裡面有包含 currentPage 的變數
還有要傳ajax 回去要資料
所以要在 vue 中的 methods 建立 function
已這次的例子 getList就是目前的function 可以用到一些 data 裡面的資料
回傳成功之後資料也可以回寫在data上面
以及之前會在各種事件的觸發
@click 觸發點擊事件
在標籤上加上 @click 可以觸發 類似 onclick 的事件
但是是調用methods裡面function
日期格式
由於之前的套件PD 回傳的日期資料會是 yyyy-MM-ddTHH:mm:ss 這樣的格式
所以使用了 map 將 dt 裡面的日期 轉換成為我要的格式
v.dt.map(function (obj) {
var rObj = obj;
rObj["Create_Date"] = $.datepicker.formatDate('yy-mm-dd', new Date(obj["Create_Date"]));
return rObj;
});