模板引擎art-template的使用步骤(超详细)

什么是模板引擎呢?

		它是将数据转换成html格式的字符串

关于art-template的模板使用

步骤:
  1. 准备art-template文件,进入官网这是官网链接,看不懂英文可以使用浏览器的翻译功能.
 <script src ="/js/template-wb.js"></script>
  1. 使用script引入模板文件,添加id type =“text/html”,这样浏览器就会把这个文件当做html解析了,代码如下:
<script id="tpl" type="text/html">
	<div class="box"></div>
	</script>

3.告诉模板和哪一个数据继续拼接

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

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

documen.getElenmentById("container").inerHTML = html;

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

<script id ="tpl" type="text/html">
	<div class ="box">{{usernam

 1. List item

e}}</div>
</script>

总结下来也就是:下载>引入>告诉模板的引入规则>将拼接好的显示在页面上

控制台使用模板输出数据看效果
	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./第二次ajax/art-template模板的使用/template-web.js"></script>
    <title>Document</title>
   
</head>
<body>
    <script type="text/html" id="tpl">
            <h1>{{username}}{{age}}</h1>
    </script>
    <script type="text/javascript">
         var html = template("tpl",{username:'zhangsan',age:'20'})  //调用template模板,与数据username进行拼接,返回值是拼接好的字符串
        //输出看下
        console.log(html);
        
    </script>
</body>
</html>

你可能感兴趣的:(模板引擎art-template的使用步骤(超详细))