一惰爬、基本使用
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熄攘、獲取模板并往模板里插入數(shù)據(jù)
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
二彼念、輸出
標(biāo)準(zhǔn)語法 {{ 變量名 }}
{{title}}
原始語法 <%= 變量名 %>
<%= title %>
標(biāo)準(zhǔn)語法支持基本模板語法以及基本 JavaScript 表達(dá)式挪圾；原始語法支持任意 JavaScript 語句，這和 EJS 一樣逐沙。
三哲思、原文輸出
標(biāo)準(zhǔn)語法 {{@ 變量名 }}
{{@ title }}
原始語法 <%- 變量名 %>
<%- title %>
輸出與原文輸出的區(qū)別在于：原文輸出語句不會對 HTML 內(nèi)容進(jìn)行轉(zhuǎn)義處理，例如：
圖片.png
渲染結(jié)果如下圖：
結(jié)果很明顯吩案，原文輸出將標(biāo)簽解析出來了棚赔，而輸出將標(biāo)簽進(jìn)行轉(zhuǎn)義了。原文輸出可能存在安全風(fēng)險徘郭，請謹(jǐn)慎使用靠益。
四、循環(huán)
循環(huán)可以是Arrray或者Object残揉，語法為：
{{each target}}
{{$index}} {{$value}}
{{/each}}
例如： [圖片上傳失敗...(image-149333-1599533198402)]
渲染結(jié)果如下圖： [圖片上傳失敗...(image-33b951-1599533198402)]
這里的$index和$value是默認(rèn)的胧后，也可以自定義：
{{each target val key}}
{{key}} {{val}}
{{/each}}
五、條件
語法為：
{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
六冲甘、過濾器（自定義函數(shù)）
template.defaults.imports.show = function(num,str){
console.log(num, str)
return num*666
}
使用：
{{num | show}}
或者：
{{ show(num,'hello') }}
第一種方法只能傳入一個參數(shù)即 '|' 前面這個參數(shù)绩卤，第二種沒有限制，跟普通函數(shù)一樣江醇。
