Atitit 项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx
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. 预览
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://blog.csdn.net/attilax
--Atiend v8
Atitit 项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx相关推荐
- 基于 OData 模型和 JSON 模型的 SAP UI5 表格控件行项目的添加和删除实现
这是 Jerry 2021 年的第 62 篇文章,也是汪子熙公众号总共第 339 篇原创文章. 龟虽寿曹操神龟虽寿,犹有竟时:腾蛇乘雾,终为土灰.老骥伏枥,志在千里:烈士暮年,壮心不已.盈缩之期,不但 ...
- js固定表格行列_纯前端表格控件SpreadJS V14.0发布：组件化编辑器+数据透视表
SpreadJS 是一款基于 HTML5 的纯前端表格控件,兼容 450 种以上的 Excel 公式,具备"高性能.跨平台.与 Excel 高度兼容"的产品特性,可为用户提供高度类 ...
- autojs遍历当前页面所有控件_纯前端表格控件SpreadJS V14.0发布：组件化编辑器+数据透视表 - 葡萄城开发工具...
SpreadJS 是一款基于 HTML5 的纯前端表格控件,兼容 450 种以上的 Excel 公式,具备"高性能.跨平台.与 Excel 高度兼容"的产品特性,可为用户提供高度类 ...
- 纯前端表格控件SpreadJS V14.0发布：组件化编辑器+数据透视表
SpreadJS 是一款基于 HTML5 的纯前端表格控件,兼容 450 种以上的 Excel 公式,具备"高性能.跨平台.与 Excel 高度兼容"的产品特性,可为用户提供高度类 ...
- SAP UI5 应用开发教程之一百零四 - SAP UI5 表格控件的支持复选(Multi-Select)以及如何用代码一次选中多个表格行项目
一套适合 SAP UI5 初学者循序渐进的学习教程 作者简介 Jerry Wang,2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今.Jerry 是 SAP 社区导师,S ...
- 利用FarPoint Spread表格控件，构造Winform的Excel表格界面输入
因有一个业务需要在Winform界面中,以类似Excel表格界面中录入相关的数据(毕竟很多时候,客户想利用成熟的软件体验来输入他们想要的东西),其中界面需要录入基础信息,列表信息,图片信息等,综合这些 ...
- vue导入静态js_如何在vue js中加载静态图像
我有一个组件,它接受一个prop字符串,即一个url.它可以是远程图片,也可以是资产文件夹中的本地静态资产. 目录结构: -assets/ - logo.png -app.vue -component ...
- python表格控件_python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例...
PyQt5表格控件QTableView简介 在通常情况下,一个应用需要和一批数据进行交互,然后以表格的形式输出这些信息,这时就需要用到QTableView类了,在QTableView中可以使用自定义的 ...
- python gui 显示表格_python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例...
PyQt5表格控件QTableView简介 在通常情况下,一个应用需要和一批数据进行交互,然后以表格的形式输出这些信息,这时就需要用到QTableView类了,在QTableView中可以使用自定义的 ...
- 【转】Win32子窗口控件（按钮、编辑框、静态框、滚动条等）！！
前言: 子窗口控件是特殊的子窗口,不需要我们注册窗口类,系统已经注册好了,我们只需要在创建时选择相应的窗口类名.常用的子窗口控件有按钮BUTTON.组合框COMBOBOX.编辑框EDIT.列表框LIS ...
最新文章
- LoadRunner录制回放常见问题及解决方案
- linux yum localinstall 解决本地rpm包的依赖问题
- kafka新增节点时server.properties需要修改的地方
- 使用AIR运行另外的程序。
- win10 vscode 无法激活python 虚拟环境的解决办法
- ECSHOP 如何去掉配送区域
- 计算机师范专业考编,不是师范生考教师很难？这4个专业考教师反而轻松！
- 使用PyCharm运行第一行python代码
- BackgroundWorker学习笔记
- SQL数据库语言基础之SqlServer系统函数、聚合集合函数【大总结】
- 分页存储过程2005
- 笔记软件对比之 思源笔记 VS Notion
- ZEMAX | 探究 OpticStudio 偏振分析功能
- 迷信一把：三才数理吉凶
- cmd命令行操作windows注册表
- ffmpeg安装及在java中的使用案例
- AD16PCB布线规则
- 算法的时间与空间复杂度（一看就懂）
- vc sp6补丁下载地址及具体安装
- Pubmed格式字段说明