HTML模板引擎

使用此模板引擎，可以方便的将数据渲染到网页上。

安装

npm install @yizhi/render

使用

使用render函数，传入模板字符串和数据对象，即可渲染出网页内容。

import { render } from '@yizhi/render';
const html = render("/path/to/template.html", {name:"Join", age:20, love:["eat", "sleep", "code"] });
console.log(html);

内容输出

使用{{ 表达式 }}语法，可以将表达式的值输出到网页。

<h1>{{ data.name }}</h1>

经过渲染后，输出的HTML内容为：

<h1>Join</h1>

条件判断

在标签上使用:if和:else来进行条件判断，如果else有值，则表示elseif。

<div :if="data.age < 3">你还是个宝宝</div>
<div :else="data.age < 18">你还未成年</div>
<div :else>你已经长大了</div>

经过渲染后，输出的HTML内容为：

<div>你已经长大了</div>

循环

在标签上使用:for来进行循环，支持两种循环方式：

• :for="数据项 in 数据"
• :for="(索引, 数据项) in 数据"

其中，数据项可以是数组或对象。

示例：

<ul>
  <li :for="item in data.love">{{ item }}</li>
</ul>

<ul>
	<li :for="(index, item) in data.love">{{ index }} - {{ item }}</li>
</ul>

<ul>
	<li :for="(key, value) in data">{{ key }} : {{ value }}</li>
</ul>

经过渲染后，输出的HTML内容为：

<ul>
  <li>eat</li>
  <li>sleep</li>
  <li>code</li>
</ul>

<ul>
	<li>0 - eat</li>
	<li>1 - sleep</li>
	<li>2 - code</li>
</ul>

<ul>
	<li>name : Join</li>
	<li>age : 20</li>
	<li>love : eat,sleep,code</li>
</ul>

模板定义

可以使用template来定义模板，通过name属性来指定模板名称。

<template name="my-template">
  <h2>{{ data.name }}</h2>
  <ul>
    <li :for="item in data.love">{{ item }}</li>
  </ul>
</template>

通过上面方式，我们就定义了一个名为my-template的模板。

模板使用

通过use标签，可以将模板内容渲染到网页上，data属性指定数据对象。

<div>
  <h1>模板使用</h1>
  <use name="my-template" data="data"/>
</div>

如果模板文件在其他位置，还可以通过from属性指定模板文件路径。

<div>
  <h1>模板使用</h1>
  <use from="/path/to/my-template.html" name="my-template" data="data"/>
</div>

经过渲染后，输出的HTML内容为：

<div>
  <h1>模板使用</h1>
  <h2>Join</h2>
  <ul>
    <li>eat</li>
    <li>sleep</li>
    <li>code</li>
  </ul>
</div>