小賴的實戰記錄

https://vuejs.org/v2/guide/

我對Vue.js感到好奇，

所以我實作了一下，在實作列表頁，我就不必用PHP端吐整個html，也不用前端用jquery產生大量的tr或div及另外生產template，就可以實現列表頁動態生成

我今天有一個列表頁是實作歷史紀錄，

以下是我撰寫的Vue.js及html

<div id="list">
	<div v-for="item in items" class="col-lg-12">
		<div>
			<div class="col-lg-9 col-md-9 col-xs-9">
				{{ getReportName(item.name)}}
			</div>                            
		</div>
		<div>
			<div>
				<div class="col-lg-4 col-md-4">
					建立時間
				</div>
				<div class="col-lg-8 col-md-8">
					{{item.createTime}}
				</div>
			</div>                                                       
		</div>
	</div>        
</div>

var app = new Vue({
	el: '#list',
	data: {
		items: []
	},
	methods:{
		getReportName: function(key){
			var ReportNames= new Object();
			ReportNames['day'] = '日報表';
			ReportNames['week'] = '週報表';
			ReportNames['month'] = '月報表';

			return ReportNames[key];
		}
	}
});

當我ajax取得搜尋資料回來後，將items重新設定，就會自動的更新列表資訊

function search() {   
	var data= new Object();
	
	$.ajax({
		type: 'POST',
		url: '/history/search',
		data: data,
		dataType: "json",
		success: function(result){
		   app.items = result.items;
		}
	}); 
}  

$(document).ready(function(){
	search();
});

感謝還不錯用，可以省下時間去寫jquery生成，或PHP的<?php ?>之間的段落

當前端與後端分離時，後端只要吐items，前端取得items自己寫，可以很快的前後端分開工作，加上前端這段程式碼，可以重複利用，變更欄位資料，也會變得相當簡單。

也不擔心會產生奇怪的PHP error