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

创建一个html项目,将下载下来的art-template-masterlib emplate-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