前端模板：前端(html)和数据(请求到的数据)合并在一起，拼接合并渲染生成HTML。
1.什么是art-template
前端高性能模板，采用预编译，所以性能超级好
1.优点：
性能强，资源比较小
有预编译，使用+=的字符串拼接方式，更加高性能，速度更快
2.基本语法
1.{{var}}模板语法--变量用双层花括号包裹
2.条件表达式
{{if admin}}
相应的html模板
{{else if code>0}}
相应的html模板
{{else}}
相应的html模板
{{/if}}
//条件的终结-几乎等同于js的if
3.遍历表达式
{{each arr as value index}}
<p>当前{{index}}项的值为{{value}}</p>
//arr就是我们要遍历的对象，value就是当前遍历的子项，index就是当前子项在arr里面的下标
{{/each}}
说明：这里我都是写的简单的表达式，没有写原生的，反正不用，何必写入。以上。
3.使用步骤
1.引入对应的js
2.编写模板
3.模板与变量合并与渲染，生成html
4.通过dom操作，将相应的html放到指定的位置
简单示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="wrap"></div>
<script type="text/html" id="Values">
{{each ListInfo as List}}
{{List}}
{{/each}}
</script>
<script src="./js/template.js"></script>
<script>
var data = {
"name":"LBX",
"ListInfo":[1,2,3,4,5,6]
}
var newhtml = template('Values',data);
//将数据data加载到id位Values的模板里面去
document.getElementById("wrap").innerHTML = newhtml;
//将拼接好的html加入到指定的id里面去
</script>
</body>
</html>
网友评论