template模板引擎的使用

1. 模板引擎概述

1. 作用：使用模板引擎提供的模板语法，可以将数据和HTML拼接起来
2. 官方地址：https://aui.github.io/art-template/zh-cn/index.html

2. 使用步骤

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

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

2. 准备 art-template 模板

   // 1. 模板内容是一段 HTML 代码，要写在单独的 script 标签中
   // 2. 在一个 HTML 文件中，可能有多个模板，为了区分所以每个模板定义一个 id
   // 3. 代码编辑器会默认将 script 标签中的代码，当作 js语法进行解析，添加type=text/html就可以当作html代码解析了
   <script id="tpl" type="text/html">
   	<div class="box"></div>
   </script>
   

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

   // 1. 当我们把 模板引擎的库文件 引入到页面中的时候，在全局作用域下就多了一个 template 的方法
   // 2. 这是方法就是要告诉模板引擎我们要将哪一个数据和哪一个模板进行拼接的
   // 3. 方法的第一个参数是 模板id，第二个参数是一个对象，对象中存储的数据就是要在模板中展示的数据
   // 4. 然后我们就可以在模板引擎中写比如：username属性 模板引擎中就会得到它的值
   // 5. 这个方法返回的是拼接后的 html 字符串
   var html = template('tpl', {
        username: 'zhangsan', age: '20'})
   

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