1. 模板引擎概述
- 作用: 使用模板引擎提高模板语法, 可以将数据和 HTML 拼接起来
- 官方网址: https://aui.github.io/art-template/zh-cn/index.html
2. 使用步骤
- 下载art-template模板引擎库文件并在HTML页面中引入库文件
这里下载的是文件
<script src="/js/template-web.js"></script>
- 准备 art-template 模板
<script id="tpl" type="text/html">
</script>
- 告诉模板引擎将哪个模板和哪个数据进行拼接
<script>
// 3. 告诉模板引擎将哪个数据和哪个模板进行拼接
// 1) 模板id 2) 数据 对象类型
// 方法的返回值就是拼接好的html字符串
var html = template('tpl', {username: 'zhangsan', age: 30})
</script>
- 将拼接好的 html 字符串添加到页面中
document.getElementById('container').innerHTML = html
- 通过模板语法告诉模板引擎, 数据和html字符串要如何拼接
<script id="tpl" type="text/html">
<h1>{{ username }} {{ age }}</h1>
</script>
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1. 将模板引擎的库文件引入到当前页面 -->
<script src="/js/template-web.js"></script>
</head>
<body>
<div id="container"></div>
<!-- 2. 准备art-template模板 -->
<script id="tpl" type="text/html">
<h1>{{ username }} {{ age }}</h1>
</script>
<script>
// 3. 告诉模板引擎将哪个数据和哪个模板进行拼接
// 1) 模板id 2) 数据 对象类型
// 方法的返回值就是拼接好的html字符串
var html = template('tpl', {username: 'zhangsan', age: 30})
document.getElementById('container').innerHTML = html
</script>
</body>
</html>