初次提交

README.md

@@ -0,0 +1,136 @@
+# 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>
+```
+
+
+