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://www.cnblogs.com/attilax/

--Atiend  v8

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

  1. Atitit vue.js 把ajax数据 绑定到form表单

    Atitit vue.js 把ajax数据 绑定到form表单 1.1. 使用场景:主要应用在编辑与提交场合..1 1.2. 绑定数据到form控件,可以使用jquery,不过vue.js更加简单1 ...

  2. 在静态页面中使用 Vue.js

    在静态页面中使用 Vue.js 不使用Node.js, NPM, Webpack 等, 在静态页中使用Vue.js. 包括路由, 单文件组件. 1. 创建index.html index.html做为 ...

  3. Atitit. BigConfirmTips 控件 大数据量提示确认控件的原理and总结O9

    Atitit. BigConfirmTips 控件 大数据量提示确认控件的原理and总结O9 1. 主要的涉及的技术 1 2. 主要的流程 1 3. 调用法new confirmO9t(); 1 4. ...

  4. WPF 将数据源绑定到TreeView控件出现界面卡死的情况

    首先来谈一下实现将自定义的类TreeMode绑定到TreeView控件上的一个基本的思路,由于每一个节点都要包含很多自定义的一些属性信息,因此我们需要将该类TreeMode进行封装,TreeView的 ...

  5. 详解如何利用FarPoint Spread表格控件来构造Winform的Excel表格界面输入

    我们先来简单了解一下WinForm和FarPoint,WinForm是·Net开发平台中对Windows Form的一种称谓.而FarPoint是一款模拟EXCEL的控件.它可以根据用户的要求实现很大 ...

  6. springcloud 项目源码 微服务 分布式 Activiti6 工作流 vue.js html 跨域 前后分离

    1.代码生成器: [正反双向](单表.主表.明细表.树形表,快速开发利器)freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本.处理类.service等完整模块2. ...

  7. Silverlight项目笔记5:Oracle归档模式引起的异常&&表格控件绑定按钮

    1.Oracle归档模式产生日志文件引起数据库异常 连接数据库失败,提示监听错误,各种检查监听配置文件,删除再添加监听,无果. sqlplus下重启数据库数据库依然无果,期间碰到多个错误提示: ORA ...

  8. Atitit gui界面ui技术发展史与未来趋势

    Atitit gui界面ui技术发展史与未来趋势 1. Gui技术的发展,从像素自绘到native控件体系,再到dsl h51 1.1. 编程语言的发展 从机器语言,汇编语言到本地native语言(c ...

  9. 基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用

    在前面介绍了两篇关于我的基于MVC4+EasyUI技术的Web开发框架的随笔,本篇继续介绍其中界面部分的一些使用知识,包括控件的赋值.取值.清空,以及相关的使用. 我们知道,一般Web界面包括的界面控 ...

随机推荐

  1. 解决ODI 12C Studio 运行缓慢问题

    一.配置 ODI 12C Studio 1.1 修改ODI Studio process的-Xms和-Xmx ide.conf: modifying the initial Heap size (-X ...

  2. 链接sql数据库并输出csv文件

    __author__ = 'chunyang.wu' #作者:SelectDB # -*- coding: utf-8 -*- import MySQLdb import os os.environ[ ...

  3. CentOS下递归遍历文件夹下所有文件,查找指定字符

    命令如下: find . | xargs grep -ri "XXX"

  4. PL/SQL12中文版

    PLSQL12,界面优化很不错,更加美观,直接集成中文语言!,更加艳丽 01.界面 02.注册码 注意:有能力的还是购买付费版的,付费是对软件的高度认可和支持 12.0.3.1821 64bit: 注 ...

  5. windows常用命令行整理

    Windows虽然以GUI界面为主,但有时命令行也起到了很大的作用,下面就介绍几个常用.常见的windows命令行命令 1.ping 功能:用来测试数据包能否通过IP协议到达特定主机.即测试本机与特定 ...

  6. redis统计大key

    –bigkeys redis-cli -h <host> -p <port> -n <db> --bigkeys 这条命令会从指定的 Redis DB 中持续采样, ...

  7. hihocoder第212周-动态规划

    题目链接 import java.util.Scanner; public class Main { long mod = (long) (1e9 + 7); int MAXN = 107; int ...

  8. SIGTERM等信号含义【转】

    主要是做sigterm 和sigkill区别的比较,之前的好多操作,在结束正在运行的一个程序的时候,常用kill,这个以后的注意,在sigterm不起作用的时候,再使用kill; 原文地址:http: ...

  9. Spring 3.0 AOP 之 AOP 术语 (一)

    关于AOP.之前我已写过一个系列的随笔: <自己实现简单的AOP>,它的关注点在于实现.实现语言是C#,实现方式为 自定义实现 RealProxy 抽象类.重写Invoke方法,以便进行方 ...

  10. Mysql5.6 make 错误以及解决办法

    1.若make出现类似错误: CMake Error: CMake was unable to find a build program corresponding to "Unix Mak ...