如果按照服務器數(shù)據(jù)列表那樣去渲染數(shù)據(jù)的話，碰到復雜功能編碼就會變得很復雜，并且由于要修改字符串中的內容，沒有編輯器提示后期維護，加新功能（例如咱們給上傳、刪除按鈕注冊click事件）也變得不方便，所以art-template模板引擎就能解決此問題
art-template官網(wǎng)
http://aui.github.io/art-template/zh-cn/docs/index.html
art-template在線地址
可以在html頁面中 通過
<script src="https://unpkg.com/art-template/lib/template-web.js"></script>導入
https://unpkg.com/art-template/lib/template-web.js
art-template 標準語法
{{value}} // 輸出value變量的值
{{data.key}} // 輸出data對象中key屬性的值
{{data['key']}} // 輸出data對象中key屬性的值
{{a ? b : c}} // 三元運算符
{{a || b}} // 邏輯或運算
{{a + b}} // 算術運算符
art-template用法步驟
模板引擎.png
art-template體驗
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 1.0 引入模板引擎 -->
<script src="./libs/template-web.js"></script>
</head>
<body>
<h1>看控制臺輸出</h1>
<!-- 2.0 定義模板 -->
<!-- {{ 變量 }} 坑位經(jīng)過模板引擎處理，自動變成變量的數(shù)據(jù) -->
<script type="text/html" id="t1">
<h1>你好{{ aa }}</h1>
</script>
<!-- 3.0 調用模板 -->
<script>
// 調用
// template("模板的id", { 變量: 數(shù)據(jù) })
const res = template('t1', { aa: 111 })
console.log(res)
console.log(typeof res) // string
</script>
</body>
</html>
循環(huán)語法
{{each target}}
{{$index}} {{$value}}
{{/each}}
// 說明：target 支持 array(數(shù)組) 與 object（對象） 的迭代
