模板引擎的基本概念及其使用步骤模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的

本文已参与「新人创作礼」活动，一起开启掘金创作之路

什么是模板引擎？

模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。

模板原理

模板的诞生是为了将显示与数据分离，模板技术多种多样，但其本质是将模板文件和数据通过模板引擎生成最终的HTML代码。
在这里插入图片描述

模板使用

模板链接：aui.github.io/art-templat…
或直接点击这个链接另存为：unpkg.com/art-templat…
这是一个名为：art-template的模板，你也可以自己在Github上面搜索。

使用步骤

1.定义模板
2.挖坑 ---- 起名字
3.填坑:把对象跟模板结合
4.使用

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>
<!--导入模板引擎-->
<script src="template-web.js"></script>
<!--定义模板
    type不写或者是text/javaScript会被解析为js
    如果写成其他的内容 不会被当作js解析（这里建议写text/html代码会有高亮效果）-->
<script type="text/html" id="muban">
    <ul>
        <li>名字:{{name}}</li>
        <li>技能:{{skill}}</li>
        <li>爱好:{{habbit}}</li>
    </ul>
</script>

<script>
    /*模拟数据*/
    var data = {
        name:'张三',
        skill:'跳远',
        habbit:'跑步'
    }

  /*  填坑
    参数1：模板的id
    参数2：填充的数据*/

    var result = template('muban',data);
    document.body.innerHTML = result;
</script>

效果图

在这里插入图片描述

注意点

1.自己写的模板要写上id模板引擎是通过id查找的
2.格式：{{name}}。挖的坑需要用{{ 括住，name是坑的名字，通过这个名字把数据和坑对应上。