很多人可能用过Vie.js,网页动态加载数据。一般来说,HTML在后面调用new Vue()加载数据的。
Vue很有创意,在HTML中插入{{}}标记,使用HTML模板化,方便开发。但其也有一定不便。
我受Vue启发,想与Jquery结合(我很喜欢JQuery)。
我尝试使用$Ajax()加载数据,并把数据显示到网页中。
我参考Vue编辑网页文件(HTML){。
<tr> <td class="bj-label"> 报价货号 </td> <td> <span>{{ProdNo}}</span> </td> <td class="bj-label"> 产品名称 </td> <td colspan="3"> <span>{{ProdName}}</span> </td> </tr>
{{ProdNo}}、{{ProdName}}就是参数名,与后台参数旬一致(大小写敏感)。在Visual Studio 2016中粉色显示。
我又写了一段JS函数,用于解析HTML代码中的参数,并替代数据。
以上代码使用正则表达式解析HTML中{{}}标记的参数,因能力有限,表达式可能有点弱,高手可优化之。
调用方法很简单,就是通过JQuery或原生方法,读取一段HTML代码段,将其中参数标记替换成数据值。
例如,从后台获取数据为data,在前台页面获取代码片段为html,则调用:html.View(data) 即可。
其中html在之前获取的HTML脚本片段。
Vue.js支持v-if和v-for,是不错的功能,但不太好用(本人水平有限)。
我就想了个办法,通过jQuery与上述View(),动态加载实现,当然我引入了Html5的<template>标记。
这是一个不错的模板代码段。以下是合计行模板:
然后调用(填充表格及合计行):
现在我通过静态网页,加载后台数据。设计与运行效率都很高。VS的WebForm和MVC,我没有使用了。
当然,以上思路与MVC也不谋而合,前后台开发分离实现。而且,还一样可用于移动终端H5开发哦!