欢迎光临
我的个人博客网站

art-template笔记


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包中是这样

art-template笔记

  • 创建一个html项目,将下载下来的art-template-masterlibtemplate-web.js拷贝到项目中

art-template笔记

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>  

运行结果

art-template笔记

其它详细语法请参考:https://www.jianshu.com/p/d8d8e19157e0

赞(0) 打赏
未经允许不得转载:张拓的天空 » art-template笔记
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏