数据列表实现方式（基于Vue.js封装）

抽时间看了下Vue.js，果然好清爽。写了个小demo，实现Table方式的列表。如下：先贴效果，即每个开发人员实现功能时需要写的代码：td,th{border : solid 1px black;}{{ title }}姓名地址电话{{ row.name }}

stationxp

5367人浏览 · 2017-01-16 17:42:46

stationxp · 2017-01-16 17:42:46 发布

抽时间看了下Vue.js，果然好清爽。

写了个小demo，实现Table方式的列表。

如下：

先贴效果，即每个开发人员实现功能时需要写的代码：

<html>
<head>
	<script src="vue.js"></script>
	<script src="vue-common.js"></script>
	<style>
		td,th{
			border : solid 1px black;
		}
	</style>
</head>
<body>
<div id="userList">
	<div><h1>{{ title }}</h1></div>
	<table>
		<tr>
			<th>姓名</th>
			<th>地址</th>
			<th>电话</th>
		</tr>
		<tr v-for="row in rows">
			<td>{{ row.name }}</td>
			<td>{{ row.addr }}</td>
			<td><input v-model='row.mobile' /></td>
		</tr>
	</table>	
	<paging v-bind:data="paging" />
</div>
<button οnclick="submitUserList()">提交</button>

<div id="submitData"></div>
<script>
// 1. 页面初始化时获得数据（一般通过ajax方式）
var data = {
	title : '列表数据',
	rows: [
      { name: 'Liu Hailong' , addr : 'Laishui', mobile : '186' },
      { name: 'Wei Chao' , addr : 'Yangzonghai', mobile : '186' },
      { name: 'Hu Lei' , addr : 'Guiyang', mobile : '188' }
    ],
	paging : {
		total : 3,
		pageSize : 10,
		pageNo : 1 ,
		pageCnt : 1
	}
};

// 2. 将数据与视图绑定
var userList = bind('#userList',data);

// 3. 数据发生可能的修改
data.title = "列表数据（被修改）";
data.rows[0].mobile = '18600107299';

// 4. 提交数据到后台(可编辑表格，或分页)
//submit(data.rows);
//submit(data.paging);
function submitUserList(){
	var d = userList.$data;
	console.log(d.rows[2].name + ":" + d.rows[2].mobile);
}

</script>
</body>
</html>

然后是简单的封装代码：

/**
 * vue-common.js
 */
Vue.component('paging', {
	props: ['data'],
	template: [ '<div>共{{ data.total }}条 每页{{ data.pageSize }}条' ,
			'第{{ data.pageNo }}页/共{{ data.pageCnt }}页' ,
			'<button>首页</button>',
			'<button>首页</button>',
			'<button>首页</button>',
			'<button>末页</button></div>'].join('\r\n')
});

function bind(selector, data){
	var ret = getVueObj(selector, data);
	return ret;
}

function getVueObj(selector, data){
	var ret = new Vue(getWrapper(selector, data));
	return ret;
}

function getWrapper(selector, data){
	var ret = {
		el : selector,
		data : data
	};
	return ret;
}

如果继续封装，页面初始化加载数据的代码：

function loadList(selector , url, callback){

ajax({

url : url ,

success : function(data){

var vueObj = bind(selector, data);

callback(vueObj);

}

});

}

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^