模板引擎概述
使用步骤
- 下载 art-template 模板引擎库文件并在 HTML 页面中引入库文件
<script src="./js/template-web.js"></script>
<script id="tpl" type="text/html">
<div class="box"></div>
</script>
var html = template('tpl', {username: 'zhangsan', age: '20'});
document.getElementById('container').innerHTML = html;
- 通过模板语法告诉模板引擎，数据和html字符串要如何拼接
<script id="tpl" type="text/html">
<div class="box"> {{ username }} </div>
</script>
完整步骤：
<!-- 1. 将模板引擎的库文件引入到当前页面 -->
<script src="/js/template-web.js"></script>
</head>
<body>
<div id="container">1111222222</div>
<!-- 2.准备art-template模板 -->
<script type="text/html" id="tpl">
<h2>{{username}}:{{age}}</h2>
</script>
<script type="text/javascript">
// 3.告诉模板引擎将那个数据和哪个模板进行拼接
// 1) 模板id 2)数据 对象类型
// 方法的返回值就是拼接好的html字符串
var html = template('tpl', {username: 'zhangsan', age: 30});
console.log(html)
document.getElementById('container').innerHTML = html;
</script>
</body>
案例：
https://gitee.com/zhangzanzz007/example_ajax
网友评论