1. Función
Usando la sintaxis de plantilla proporcionada por el motor de plantilla, los datos y el HTML se pueden unir.
utilizar
- Descargue el archivo de la biblioteca del motor de plantillas de arte e incluya el archivo de la biblioteca en la página HTML
<script src="./../template-web.js"></script>
- Preparar plantilla de plantilla de arte
<script id="tpl" type="text/html">
<h1>{
{
username}} {
{
age}}</h1>
</script>
- Dile al motor de plantillas qué plantilla y qué datos unir
<script>
// 1. 模板id 2. 数据 对象类型
// 方法的返回值就是拼接好的字符串
var html = template('tpl', {
username: 'zhangsan',
age: '30'
})
document.getElementById('container').innerHTML = html;
</script>
- Dígale al motor de plantillas a través de la gramática de la plantilla cómo unir datos y cadenas html
Ejemplo de código:
<!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>