一、基本使用
1、引入模板引擎（版本为4.13.2）
<script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>
2、编写模板和渲染的容器
<div id="test-wrapper"></div>
<script id="test-template" type="text/html">
<h1>{{title}}</h1>
</script>
3、获取模板并往模板里插入数据
var data = {
title: "hello world",
desc: "<p>这是一段描述</p>"
};
var html = template("test-template",data);
4、把模板渲染到页面
document.getElementById('test-wrapper').innerHTML = html;
或者用jQuery：
$('#test-wrapper').html(html)
完成代码如下图：
template1.png
二、输出
标准语法 {{ 变量名 }}
{{title}}
原始语法 <%= 变量名 %>
<%= title %>
标准语法支持基本模板语法以及基本 JavaScript 表达式；原始语法支持任意 JavaScript 语句，这和 EJS 一样。
三、原文输出
标准语法 {{@ 变量名 }}
{{@ title }}
原始语法 <%- 变量名 %>
<%- title %>
输出与原文输出的区别在于：原文输出语句不会对 HTML 内容进行转义处理，例如：
图片.png
渲染结果如下图：
结果很明显，原文输出将标签解析出来了，而输出将标签进行转义了。原文输出可能存在安全风险，请谨慎使用。
四、循环
循环可以是Arrray或者Object，语法为：
{{each target}}
{{$index}} {{$value}}
{{/each}}
例如： [图片上传失败...(image-149333-1599533198402)]
渲染结果如下图： [图片上传失败...(image-33b951-1599533198402)]
这里的$index和$value是默认的，也可以自定义：
{{each target val key}}
{{key}} {{val}}
{{/each}}
五、条件
语法为：
{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
六、过滤器（自定义函数）
template.defaults.imports.show = function(num,str){
console.log(num, str)
return num*666
}
使用：
{{num | show}}
或者：
{{ show(num,'hello') }}
第一种方法只能传入一个参数即 '|' 前面这个参数，第二种没有限制，跟普通函数一样。
