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