Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx

时间:2022-05-22 15:09:56

Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx

1. 场景:应用在项目列表查询场景下1

1.1. 预计初步掌握vue.js  几小时即可1

2. 绑定ajax列表数据到表格1

2.1. List.html 使用v-for循环一下1

2.2. 预览2

2.3. 使用vue.js绑定2

2.4. 效果3

2.5. 时间日期等其他字段格式化 使用vue.js的 filter过滤器3

3. 其他4

3.1. 9.Vuejs在变化检测问题4

3.2. 参考资料5

1. 场景:应用在项目列表查询场景下

全面的的使用html h5界面分离前后端,使界面可以通用与pc端java php net 微信项目,以及 安卓 ios跨平台以及hybrid app。。

也方便前端人员随时介入调整java项目的界面,加快进度

尽可能的不再使用服务端界面技术(jsp struts wpf el等),一方面没有完整的分离前后端,混杂,一方面服务端界面技术复杂度较大,不利于前端人员介入调整java项目界面

毕竟目前项目界面几乎就占据了50%的工作量,可以方便分散压力

1.1. 预计初步掌握vue.js  几小时即可

2. 绑定ajax列表数据到表格

2.1. List.html 使用v-for循环一下 

<table width="100%" border="0" id="table1">

<tbody>

<tr>

<td>用户id</td>

<td> </td>

<td>备注</td>

<td>操作</td>

</tr>

<tr v-for="dataItem in list_data1">

<td> </td>

<td><span class="hide">{{dataItem.用户名}}</span></td>

<td><span class="hide">{{dataItem.备注}}</span></td>

<td> </td>

</tr>

2.2. 预览

Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx

2.3. 使用vue.js绑定

<script>

//建立vue与表格的绑定关系,同时设置初始值为空[]

//el就是表格id

//list_data1是自定义的数据列表

var   VueObj1 =  new Vue({

el: '#table1',

data: {

list_data1: []

}

});

//获取数据,一般是从ajax从后端获取数据

var  list_data2=[{用户名:"王一",备注:"管理员"},{用户名:"王二",备注:"普通用户"}];

//将数据绑定到table控件

VueObj1.$data.list_data1=list_data2;

2.4. 效果

用户id

用户名

备注

操作

王一

管理员

王二

普通用户

2.5. 时间日期等其他字段格式化 使用vue.js的 filter过滤器

1. v-bind 绑定元素属性方法

2. v-text 输出文本方法

<td>{{itemdata.timex | timeFlt}}</td>

Vue.filter('timeFlt', function (value) {

return fmtDate_local(value);

})

3. 其他

3.1.  9.Vuejs在变化检测问题

3.1.1.1. 1.检测数组

由于JavaScript的限制,vuejs不能检测到下面数组的变化:

1.

直接索引设置元素,如vm.item[0]={};

2.

3.

修改数据的长度,如vm.item.length。

4.

为了解决问题1,Vuejs扩展了观察数组,为它添加一个$set()方法:

// 与 `example1.items[0] = ...` 相同,但是能触发视图更新

example1.items.$set(0, { childMsg: 'Changed!'})

问题2,需要一个空数组替换items。

除了$set(),vuejs也为观察数组添加了$remove()方法,用于从目标数组中查找并删除元素,在内部调用了splice()。因此,不必:

var index = this.items.indexOf(item)if (index !== -1) {

this.items.splice(index, 1)

}

只需:

this.items.$remove(item);

3.2. 参考资料

VUEJS 实战教程第二章,修复错误并且美化时间 - FungLeo的博客 - 博客频道 - CSDN.NET.html

vue.js - 为什么vue的data数据变了html中用{{}}绑定的数据不会变呢? - SegmentFault.html

Vue 列表渲染 - jiangxiaobo - 博客园.html

Vue.js学习笔记:属性绑定 v-bind.html

作者:: 绰号:老哇的爪子claw of Eagle 偶像破坏者Iconoclast image-smasher

捕鸟王"Bird Catcher  kok  虔诚者Pious 宗教信仰* Defender Of the Faith. 卡拉卡拉红斗篷 Caracalla red cloak 万兽之王

简称:: Emir Attilax Akbar 埃米尔 阿提拉克斯 阿克巴

全名::Emir Attilax Akbar bin Mahmud bin  attila bin Solomon bin adam Al Rapanui 埃米尔 阿提拉克斯 阿克巴 本 马哈茂德 本 阿提拉 本 所罗门 本亚当  阿尔 拉帕努伊

常用名:艾提拉(艾龙),  EMAIL:1466519819@qq.com

头衔:uke总部o2o负责人,全球网格化项目创始人,

uke交友协会会长  uke捕猎协会会长 Emir Uke部落首席大酋长,

uke宗教与文化融合事务部部长, uke宗教改革委员会副主席

uke制度与重大会议委员会委员长,uke保安部首席大队长,uke制度检查委员会副会长,

uke 首席cto   软件部门总监 技术部副总监  研发部门总监主管  产品部副经理 项目部副经理   uke科技研究院院长 uke软件培训大师

uke波利尼西亚区大区连锁负责人 汤加王国区域负责人 uke克尔格伦群岛区连锁负责人,莱恩群岛区连锁负责人,uke布维岛和南乔治亚和南桑威奇群岛大区连锁负责人

Uke软件标准化协会理事长理事长 Uke 数据库与存储标准化协会副会长

uke终身教育学校副校长   Uke医院 与医学院方面的创始人

uec学院校长, uecip图像处理机器视觉专业系主任   uke文档检索专业系主任

Uke图像处理与机器视觉学院首席院长

Uke 户外运动协会理事长  度假村首席大村长   uke出版社编辑总编

转载请注明来源:attilax的专栏  ?http://www.cnblogs.com/attilax/

--Atiend  v8