模板引擎的基本概念及其使用步骤

什么是模板引擎?

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

模板原理

模板的诞生是为了将显示与数据分离,模板技术多种多样,但其本质是将模板文件和数据通过模板引擎生成最终的HTML代码。
模板引擎的基本概念及其使用步骤_第1张图片

模板使用

模板链接:https://aui.github.io/art-template/docs/installation.html
或直接点击这个链接另存为:https://unpkg.com/art-template/lib/template-web.js
这是一个名为:art-template的模板,你也可以自己在Github上面搜索。

使用步骤

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

案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

body>
html>

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

<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>

效果图

模板引擎的基本概念及其使用步骤_第2张图片

注意点

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

你可能感兴趣的:(JS)