Vue列表实战教程

Html代码

定义Javascript模板

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