首先先下载artTemplate文件，点击clone or download
网址：
https://github.com/aui/art-template
使用中文文档网址：
https://aui.github.io/art-template/zh-cn/docs/
下载之后找到文件夹中的lib文件夹：找到里面的template-web.js文件。
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>art-Template使用</title>
<script src="template-web.js"></script>
<script id="template" type="text/html">
<!--id名自定义,注意类型为text/html-->
//使用artTemplate
<h1>{{title}}</h1>
{{if bookname}}
{{each bookname value i}}
<div>{{value}}</div>
{{/each}}
{{/if}}
</script>
<script>
window.onload = function(){
var data = {
title:'图书信息',
bookname:['三国演义','水浒传','红楼梦','西游记']
};
//template的作用是把模块和数据拼接在一起生成html片段
//第一个参数是上方id值，第二个参数是数据
var html = template('template',data);
var container = document.getElementById('container');
container.innerHTML = html;
}
</script>
<script>
//需求动态生成图书列表
//正常写法
/*window.onload = function(){
function success(data){
var tag = '<h1>'+ data.title +'</h1>';
for(var i = 0; i < data.bookname.length;i++){
tag += '<div>'+data.bookname[i]+'</div>';
}
var container = document.getElementById('container');
container.innerHTML = tag;
}
var data = {
title:'图书信息',
bookname:['三国演义','水浒传','红楼梦','西游记']
}
success(data);
}*/
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
运行结果：
