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

来源：互联网发布：win10找不到网络打印机编辑：程序博客网时间：2024/06/16 10:00

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

}

});

}

0 0