我们在用H5+Css3布局页面的时候，通过接口展示数据到页面的时候，如果数据少还好，有时候ul -> li有多个的时候 只能循环接口返回的数据然后一个一个去展示。
前段时间在无意中学习到一个新东西 art-template 前端模板引擎 这个东西可以像vu? ` _ A d p \ P Le展示数据一样很方便的进行数据展示 还有一个叫 thymeleaf (我还没用过)
1.介绍
- art-t2 U & y {emplate 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。
- 使用art-template也便于维护代码，以前我们进行数据渲染的时候是通过字符串拼接然后再通过append的方式追加到数据源id上，现在只需要在html页面中写循环就可以实现了。
2. 安装
1.直接去官网下载或者点击这个链接 https://unpkg.com/art-template@4.13.2/lib/template-web.js
2.npm安装
npm install art-template –save-dev
3.语法
1.art-template 支持标准语法与原始语法。标准语法可以让模板易读写，而原始语法拥有强大的逻辑表达能力。
2. 标\ B & `准语法支持基本模板语法以及基本 JavaScript 表达式；原始语法支持任4 V Q r v c ~ o意 JavaScript 语句，这和 EJS 一样
下面只说标准语法
输出用 {{}}
{{value}j ; , h a . { y}
{{data.keU U E / ~ N Sy}}
{{data['key']}}
{8 ` q U #{a ? b : c}}
{{a || b}}
{{a + b}}
条件判断 {M y r O . 2 @ R g{if}} ... {{/if}}
{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
循环语法
第一I ; % \ 4种 {{each datalit value i}} ... {{/each}} ** value 和 i 的位置不能互换K D x
{{each datalist value i}}
{{i +| t l 8 g 1}} {{value}}
{{/each}}
第二种 {{C c ] x , g {each daA + . ztalist}} ... {{/each}}
{{each datalist}}
{{$index}} {{$value}}
{{/each}}
4.案例
<!DOCTYPE html&B V ` X 7 r ? X Rgt; <html> <head> <meta charset="UTF-8"> &G B @ llt;title></title> <script src="template-web.js"></script> </% T d u ; [ F Ahead> <body> <div id="content">&* 1 2lt;/div> <script type="text/html" id="tef A E 8st"> // type="text/html"的模板 id用于在js中将数据与模板做关联
Z X & b // 语法中的第一个 数据展示 ---- {{}} <h1>{{ title }}</h1> // 语法中的循环两种写法 <ul> {{ each list value i }} <li>T ) z r o 1;索引 {{i+ 1 }}: {{ value }}</li> {{ /each }} {{ each list }} <li>索引 {{$index+1}}: {{$value}4 q i a o B U t N} </li>L r 3 \ 9 {{E . [ ) S } ~ /each }} </ul> <ul>
m z w 7 * U L p // 语法v 7 Q K p = W * t中的 if 判断 {{if c== 100}} <ul> {{each person}} <{ V { q Z p j \ a;li> 编# p x V 7号：{{$index+1}} -- 姓名: {{$value.name}} -- 年龄: {{ $value.age}} </li> {{/each}} </ul> {{/if}} </ul> </script> <script> var data = { title: 'hello world', list: ['文艺] O + f R p ~ q', '博客', '摄影', '电影', '明耀', '旅行', 'i { - 7 ; :吉他D P V B !'], c: 100, person: [ {name: 'jack', age: 18}, {name: 'tom', age: 19}, {name: 'jerry', age: 20}, {name: 'kid', age: 21}, {n2 8 % E o f Iame: 'jad{ O ~ # ce', age: 22} ] }; vaU S ; 5 Mr html = template('W y j 2 f : qtest', data); // test是上边的模板 data是要用于展示的数据 document.getElementByIdD ) 5 T @ 9('content').innerHTML = html; // 通过id选择器获取元素 把模板展示的位置 </script> </body> </html>
看看效果吧
自我感觉还是很方便，很实用的一个模板，大家有机会可以试试
特别声明：本站所收录作品、热点评论等信息来源互联网，目的只是为了系统归纳学习和传递资讯所有作品版权归原创作者所有，与本站立场无关，图文源自网络，如有侵权，请联系删除！请联系我们邮箱：908164873@qq.com/电话：187-8421-3206，我们将做删除处理！
