抽时间看了下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);

             }

      });

}

Logo

前往低代码交流专区

更多推荐