高阶模版引擎

高阶模版引擎简介

模版引擎是第三方模块，能够让开发者以愈加友好的方拼接字符串，依据开发人员界说的模块结构和数据，主动生成一个完整的HTML页面的模式，使项目代码愈加明晰，愈加易于维护

高阶模版引擎的使用

art-template模版引擎

  1. 在终端中运用npm install（i） art-template指令进行下载
  2. 运用const template=require(“art-template”)引进模版引擎
  3. 运用模版引擎即将拼接的数据和模版进行绑定 const html=template(“模版途径”，数据)；（数据要是对象类型）
  4. 运用模版语法告诉模版引擎。模版与数据应该怎样进行拼接

art模版代码

<div>
  <span>{{data.name}}</span>
  <span>{{data.age}}</span>
</div>

模版引擎语法

art-template一起支撑两种模版语法：规范语法和原始语法 规范语法：{{数据}}} 原始语法：<%=数据 %>

  • 规范语法{{数据}}（在书写时运用两对{{}包裹，输出变量时能够直接输出变量名或表达式}）
    <h2>{{value}}</h2>
  <h2>{{a?b:c}}</h2>
  <h2>{{a+b}}</h2>
  • 原始语法<%=数据%>（这儿就不过多介绍）

模版引擎的基本用法

if判别句子

运用条件判别的话在if后边直接写判别条件，if句子结束，运用/if即可

示例如下：

    {{if 1>1}}
    {{name}}
    {{/if}}
循环句子

运用each后边跟上要被循环输出的内容（这儿的内容要是数组格局） index表明下标index表明下标 value表明内容 for循环句子结束时，运用/each

示例如下：

    {{each content}}
    {{$value}}
    {{/each}}
模版承继

在用于承继的骨架中设置预留方位 以便于承继页面中刺进不同内容，运用block来预留方位，骨架中能够预留多个内容，对于这些方位要进行区别，能够通过命名的方式来进行区别。

例如咱们要书写内容和外联款式时能够这样书写

    <html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    {{block 'style'}}{{/block}}
    </head>
<body>
    {{block 'body'}} {{/block}}
</body>
</html>

既然咱们能够创立骨架，那咱们怎样来运用这个模版呢？

运用{{include “子模版的途径”}}来进行导入咱们的字模版。

其他用法

如果你想将html中的标签进行解析 需要运用@ 变量名