Vue列表实战教程

Html代码

<tbody id="itemtr">	<tr  is="item-row"  v-for="item in items" v-on:editclick="editclick"  v-on:removeclick="removeclick" v-bind:item="item"></tr>	<!-- more data --> </tbody>

定义JavaScript模板

<script type="text/x-template" id="item-tr" >	<tr v-bind:id="'tr_' +item.id">	<td>{{item.id}}</td>	<td>{{item.name}}</td>	<td>	<button  v-on:click="editclick">编辑</button>	<button  v-on:click="removeclick">删除</button>	</td>	</tr> </script>

components组件

Vue.component("item-row", {	props: ["item"],	template: "#item-tr",	methods: {	editclick: function () {	this.$emit('editclick', this.item)	},	removeclick: function () {	this.$emit('removeclick', this.item)	}	} })

Ajax请求数据

function loadItems() { 	$.ajax({	method: "GET",	url: "/Article/getallArticle",	data: {},	success: function (backData) {	console.log(backData);	if (backData.code == 1) {	new Vue({	el: '#itemtr',	data: {	items: backData.data	},	methods: {	editclick: function (itemObject) {	console.log(itemObject)	},	removeclick: function (itemObject) {	console.log(itemObject)	}	}   	})	} else { 	layer.msg(backData.msg);	}	   	},	error: function (error) {	layer.msg(error.statusText);	}	}) }

执行函数

$(function () {     loadItems(); })