是模板引擎
作用-分开JS和HTML
<body>
<p>学生信息表</p>
<ul id="list"></ul>
<script>
const students = [
{
name: "Alex",
age: 18,
sex: "male",
},
{ name: "张三", age: 19, sex: "female" },
{ name: "李四", age: 20, sex: "male" },
];
</script>
</body>
语法
输出
{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}
原文输出-不转义HTML
{{@ value }}
演示
<div id="content"></div>
<script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>
<script id="tpl-1" type="text/html">
{{value}}<br />
{{data.key}}<br />
{{data['key']}} <br />
{{a + b}}<br />
{{$data.value}}<br />
{{text}} <br />
{{@text}}
</script>
<script>
const content = document.getElementById("content");
content.innerHTML = template("tpl-1", {
value: 1,
data: {
key: 2,
},
a: 3,
b: 4,
text: "<strong>重点内容</strong>",
});
</script>
条件
{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
<script id="tpl-2" type="text/html">
{{if sex==='male'}} 男 {{else if sex==='female'}} 女 {{else}} 其他{{/if}}
</script>
<script>
const content = document.getElementById("content");
content.innerHTML = template("tpl-2", {
sex: "male",
// sex: "female",
// sex: "other",
});
</script>
循环
{{each target}}
{{$index}} {{$value}}
{{/each}}
<script>
const students = [
{
name: "Alex",
age: 18,
sex: "male",
},
{ name: "张三", age: 19, sex: "female" },
{ name: "李四", age: 20, sex: "male" },
];
</script>
<script id="tpl-3" type="text/html">
{{each students}}
<li>{{$value.name}}{{$value.age}}{{$value.sex}}{{$index}}{{$data}}</li>
{{/each}}
</script>
<script>
const content = document.getElementById("content");
content.innerHTML = template("tpl-3", { students });
</script>
子模版引入
{{include './header.art'}}
{{include './header.art' data}}
<script id="tpl-4-1" type="text/html">
{{include 'tpl-4-1-header'}}
<p>首页</p>
{{include 'tpl-4-1-footer'}}
</script>
<script id="tpl-4-1-header" type="text/html">
<header>我是公共头部</header>
</script>
<script id="tpl-4-1-footer" type="text/html">
<footer>我是公共底部</footer>
</script>
<script>
const content = document.getElementById("content");
content.innerHTML = template("tpl-4-1", { });
</script>
子模版传参-必须使用原始语法
<% include('./header.art') %>
<% include('./header.art', data) %>
<div id="contentIndex"></div>
<div id="contentList"></div>
<script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js">
</script>
<script id="tpl-4-2-header" type="text/html">
<header>我是{{page}}公共头部</header>
</script>
<script id="tpl-4-2-footer" type="text/html">
<footer>我是{{page}}公共底部</footer>
</script>
<script id="tpl-4-2-index" type="text/html">
{{include 'tpl-4-2-header'}}
<% include('tpl-4-2-header',{page:'首页'}) %>
<p>首页</p>
{{include 'tpl-4-2-footer'}}
<% include('tpl-4-2-footer',{page:'首页'}) %>
</script>
<script id="tpl-4-2-list" type="text/html">
{{include 'tpl-4-2-header'}}
<%include('tpl-4-2-header',{page:'列表页'})%>
<p>列表页</p>
{{include 'tpl-4-2-footer'}}
<%include('tpl-4-2-footer',{page:'列表页'})%>
</script>
<script>
const contentIndex = document.getElementById("contentIndex");
contentIndex.innerHTML = template("tpl-4-2-index", { });
const contentList = document.getElementById("contentList");
contentList.innerHTML = template("tpl-4-2-list", { });
</script>
用法
三步:
1)引入
2)准备模板
3)获取模板
<script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js">
</script>
<script id="tpl-students" type="text/html">
{{each students}}
<li>{{$value.name}}{{$value.age}}{{$value.sex}}</li>
{{/each}}
</script>
<script>
const list = document.getElementById("list");
list.innerHTML = template("tpl-students", { students });
</script>
对比模板字符串
<script>
const list = document.getElementById("list");
let html = "";
for (const student of students) {
html += `
<li>${student.name}${student.sex}${student.age}</li>
`;
}
list.innerHTML = html;
</script>
art-template替代方法:
.art文件中
{{page}}
.js文件中
import render from "./index.art";
console.log(render({ page: "首页" }));
官方文档https://aui.github.io/art-template/zh-cn/docs/