lit-html 模板测试器 - 在线编写并渲染 Lit 模板

使用教程与模板语法指南

本教程将引导您使用 lit-html 模板测试器，从基础的模板渲染到高级的指令使用，逐步掌握 lit-html 的核心模板语法。

第一步：了解编辑器界面

打开工具后，您会看到三个主要区域。上方或左侧是模板代码编辑器，用于编写 lit-html 模板。旁边是数据编辑器，用于定义 JSON 数据。下方或右侧是预览区域，用于显示渲染结果。界面上还有运行按钮、重置按钮和复制按钮等操作控件。

第二步：编写第一个模板

在模板代码编辑器中输入以下基础代码：const greeting = html`<h1>Hello, ${data.name}!</h1>`;。然后在数据编辑器中输入：{"name": "World"}。点击运行按钮，预览区域会显示"Hello, World!"。这就是 lit-html 模板渲染的基本流程：使用 html 标签模板字面量定义模板，通过 ${} 表达式绑定数据。

第三步：使用表达式绑定

lit-html 模板中的 ${} 表达式可以插入任意的 JavaScript 表达式结果。除了简单的变量引用外，还可以使用计算表达式（如 ${data.price * data.quantity}）、方法调用（如 ${data.name.toUpperCase()}）以及三元表达式（如 ${data.isActive ? 'Active' : 'Inactive'}）。表达式的结果会被自动转换为 DOM 内容插入到模板中。

第四步：条件渲染（when 指令）

使用 when 指令可以实现条件渲染。语法为 when(condition, template)。当 condition 为真值时渲染 template 指定的内容。例如：${when(data.showWelcome, html`<p>Welcome!</p>`)}。当 data.showWelcome 为 true 时显示欢迎信息，为 false 时不渲染任何内容。

第五步：列表渲染（repeat 指令）

使用 repeat 指令可以高效地渲染列表数据。语法为 repeat(items, (item, index) => template)。例如：${repeat(data.users, (user, i) => html`<div>${i + 1}. ${user.name}</div>`)}。repeat 指令会根据 data.users 数组的长度自动创建对应数量的 DOM 元素，并支持高效的 DOM 复用和更新。

第六步：动态类名绑定（classMap）

使用 classMap 指令可以动态设置元素的 CSS 类名。语法为 classMap({ className: boolean })。例如：html`<div class="${classMap({ active: data.isActive, disabled: !data.isActive })}">`。当 data.isActive 为 true 时添加 active 类，为 false 时添加 disabled 类。

第七步：内联样式绑定（styleMap）

使用 styleMap 指令可以动态设置元素的内联样式。语法为 styleMap({ property: value })。例如：html`<div style="${styleMap({ color: data.textColor, fontSize: data.fontSize + 'px' })}">`。styleMap 会将对象中的属性值应用为元素的内联样式。

第八步：运行与预览

编写好模板和数据后，使用快捷键 Ctrl+Enter 或点击运行按钮触发渲染。预览区域会显示最终的 HTML 输出。您可以随时修改模板或数据并重新运行，实时观察渲染结果的变化。这种即时反馈的开发方式非常适合快速迭代和调试。

第九步：使用预设示例学习

点击预设示例按钮可以加载工具内置的示例代码。建议按顺序浏览各个示例，了解每种指令和语法的使用方法。在示例的基础上进行修改和扩展，是加深理解的有效学习方式。