模板引擎概述

作用:使用模板引擎提供的模板語法,可以將數據和HTML拼接起來

使用步驟

1. 下載art-template模板引擎庫文件并將其引入到HTML頁面中
   下載安裝地址:http://aui.github.io/art-template/docs/installation.html#Pre-compilation-in-browser

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

2. 準備art-template模板
   為了在script內部方便的書寫HTML語法,并且要有HTML的高亮提示,所以在script內部添加type="text/html"

<script type="text/html" id='tpl'><div id="box"></div></script>

3. 告訴模板引擎將數據和哪一個模板拼接起來

  var html = template('tpl',{usename:'zhangsan',age:30})

4. 將拼接好的HTML字符串添加到頁面中

5. 通過模板語法告訴模板引擎,數據和字符串要如何拼接

<script type="text/html" id='tpl'><div id="box"></div><h1> {{usename}} {{age}} </h1></script>

 <div class="container"></div><!-- 準備art-template模板 --><script type="text/html" id='tpl'><h1> {{usename}} {{age}} </h1></script><!-- 告訴模板引擎將哪一個模板和哪一個數據進行拼接 調用template()1）模板id2) 數據 對象類型 方法的返回值就是拼接好的字符串--><script>var html = template('tpl',{usename:'zhangsan',age:30});var ct = document.querySelector('.container');ct.innerHTML = html;</script>