- A+
所属分类：Web前端
1 art-template是什么
一个前端js模板引擎。语法分为简洁语法和原始语法,推荐使用简洁语法兼容性更好！
2 下载
码云下载：https://gitee.com/mirrors/art-template.git
github下载：https://github.com/aui/art-template
有git用git拉取下载，没git可以直接下载zip包
3 构造项目测试
3.1 搭建项目
- 下载后的zip包中是这样
- 创建一个html项目,将下载下来的
art-template-masterlibtemplate-web.js拷贝到项目中
3.2 编写代码
test.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试art-template模板引擎</title> </head> <body> <div id="app"></div> <!-- 1.引入art-template依赖 --> <script src="js/template-web.js" type="text/javascript" charset="utf-8"></script> <!-- 2.定义html模板 id:定义模板的id type:定义模板类型 --> <script id="templateId" type="text/html"> <h5>1.渲染普通数据</h5> 你好：<span id="username">{{ username }}</span> <hr> <h5>2.渲染对象数据</h5> 姓名：<span id="name">{{ user.name }}</span> 性别：<span id="sex">{{ user.sex }}</span> 年龄：<span id="age">{{ user.age }}</span> <hr> <h5>3.渲染列表数据</h5> <table cellpadding="0" cellspacing="0" border="1px"> <thead> <tr> <th>序号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>个人介绍</th> </tr> </thead> <tbody> {{each list}} <tr> <td>{{$index + 1}}</td> <td>{{$value.name}}</td> <td>{{$value.sex}}</td> <td>{{$value.age}}</td> <td>{{$value.introduction}}</td> </tr> {{/each}} </tbody> </table> </script> <!-- 3.渲染模板 --> <script> /*注意： 页面加载完毕后调用,否则可能会报错 ！！！*/ window.onload = function(){ //a.定义数据 var data = { "username": "管理员", "user": { "name": "小贺", "sex": "男", "age": 18 }, "list": [ { "name": "小贺", "sex": "男", "age": 18, "introduction": "我很帅" }, { "name": "小花", "sex": "女", "age": 16, "introduction": "我很美" }, { "name": "小李", "sex": "女", "age": 20, "introduction": "我很强" } ] } //b.数据和模板进行渲染,得到渲染后的html字符串 var rsHtml = template("templateId",data); //c.将html渲染到标签中 document.getElementById("app").innerHTML = rsHtml; } </script> </body> </html> 运行结果
其它详细语法请参考：https://www.jianshu.com/p/d8d8e19157e0
