art-template模板引擎
2021-01-28 本文已影响0人
爱吃炸鸡的Banana
如果按照服务器数据列表那样去渲染数据的话，碰到复杂功能编码就会变得很复杂，并且由于要修改字符串中的内容，没有编辑器提示后期维护，加新功能（例如咱们给上传、删除按钮注册click事件）也变得不方便，所以art-template模板引擎就能解决此问题
art-template官网
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 定义模板 -->
<!-- {{ 变量 }} 坑位经过模板引擎处理，自动变成变量的数据 -->
<script type="text/html" id="t1">
<h1>你好{{ aa }}</h1>
</script>
<!-- 3.0 调用模板 -->
<script>
// 调用
// template("模板的id", { 变量: 数据 })
const res = template('t1', { aa: 111 })
console.log(res)
console.log(typeof res) // string
</script>
</body>
</html>
循环语法
{{each target}}
{{$index}} {{$value}}
{{/each}}
// 说明：target 支持 array(数组) 与 object（对象） 的迭代
