137 lines
2.5 KiB
Markdown
137 lines
2.5 KiB
Markdown
# HTML模板引擎
|
||
|
||
使用此模板引擎，可以方便的将数据渲染到网页上。
|
||
|
||
## 安装
|
||
```
|
||
npm install @yizhi/render
|
||
```
|
||
|
||
## 使用
|
||
使用render函数，传入模板字符串和数据对象，即可渲染出网页内容。
|
||
```typescript
|
||
import { render } from '@yizhi/render';
|
||
const html = render("/path/to/template.html", {name:"Join", age:20, love:["eat", "sleep", "code"] });
|
||
console.log(html);
|
||
```
|
||
|
||
### 内容输出
|
||
使用`{{ 表达式 }}`语法，可以将表达式的值输出到网页。
|
||
```html
|
||
<h1>{{ data.name }}</h1>
|
||
```
|
||
|
||
经过渲染后，输出的HTML内容为：
|
||
```html
|
||
<h1>Join</h1>
|
||
```
|
||
|
||
### 条件判断
|
||
在标签上使用`:if`和`:else`来进行条件判断，如果else有值，则表示elseif。
|
||
|
||
|
||
```html
|
||
<div :if="data.age < 3">你还是个宝宝</div>
|
||
<div :else="data.age < 18">你还未成年</div>
|
||
<div :else>你已经长大了</div>
|
||
```
|
||
|
||
经过渲染后，输出的HTML内容为：
|
||
```html
|
||
<div>你已经长大了</div>
|
||
```
|
||
|
||
### 循环
|
||
在标签上使用`:for`来进行循环，支持两种循环方式：
|
||
|
||
- `:for="数据项 in 数据"`
|
||
- `:for="(索引, 数据项) in 数据"`
|
||
|
||
其中，数据项可以是数组或对象。
|
||
|
||
示例：
|
||
|
||
```html
|
||
<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内容为：
|
||
```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`属性来指定模板名称。
|
||
|
||
```html
|
||
<template name="my-template">
|
||
<h2>{{ data.name }}</h2>
|
||
<ul>
|
||
<li :for="item in data.love">{{ item }}</li>
|
||
</ul>
|
||
</template>
|
||
```
|
||
|
||
通过上面方式，我们就定义了一个名为`my-template`的模板。
|
||
|
||
|
||
### 模板使用
|
||
通过`use`标签，可以将模板内容渲染到网页上，`data`属性指定数据对象。
|
||
|
||
```html
|
||
<div>
|
||
<h1>模板使用</h1>
|
||
<use name="my-template" data="data"/>
|
||
</div>
|
||
```
|
||
|
||
如果模板文件在其他位置，还可以通过`from`属性指定模板文件路径。
|
||
|
||
```html
|
||
<div>
|
||
<h1>模板使用</h1>
|
||
<use from="/path/to/my-template.html" name="my-template" data="data"/>
|
||
</div>
|
||
```
|
||
|
||
经过渲染后，输出的HTML内容为：
|
||
```html
|
||
<div>
|
||
<h1>模板使用</h1>
|
||
<h2>Join</h2>
|
||
<ul>
|
||
<li>eat</li>
|
||
<li>sleep</li>
|
||
<li>code</li>
|
||
</ul>
|
||
</div>
|
||
```
|
||
|
||
|
||
|