art-template系列之前端页面使用

---

art-template官网

一、模板引擎概述

作用：使用模板引擎提供的模板语法，可以将数据和 HTML 拼接起来。

二、使用步骤

1. 下载 art-template 模板引擎库文件并在 HTML 页面中引入库文件

<script src="/js/template-web.js">script>
1
2

2. 准备 art-template 模板

<script id="tpl" type="text/html">
	<div class="box"></div>
script>
1
2
3

需要给script标签指定type 为 “text/html”，并为script指定id。

3. 告诉模板引擎将哪一个模板和哪个数据进行拼接

var html = template("tpl", { username: "zhangsan", age: "20" });
1

4. 将拼接好的html字符串添加到页面中

document.getElementById("container").innerHTML = html;
1

5. 通过模板语法告诉模板引擎，数据和html字符串要如何拼接

<script id="tpl" type="text/html">
	<div class="box">{{ username }}</div>
script>
1
2
3

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！