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();})