Skip to content

模板语法概览

ElfUI 模板通过 defineHtml(...) 声明,构建期会编译成直接操作 DOM 的 render 函数。

ts
export const Counter = defineHtml(`
  <button @click=${inc} :disabled=${disabled}>${count}</button>
`);

模板语法分两类:

类型示例
JavaScript 动态表达式${count}:disabled=${disabled}@click=${inc}
指令v-ifv-forv-modelv-show

推荐写法

TIP

普通动态绑定优先使用 ${...}

ts
defineHtml(`<button @click=${submit} :disabled=${loading}>提交</button>`);

TIP

需要模板局部变量的场景使用字符串表达式,比如 v-for

html
<li v-for="item in list" :key="item.id">{{ item.name }}</li>

编译结果

模板不会变成 VNode。编译器会把动态文本、属性、事件和控制流拆成独立绑定,状态变化时只更新对应 DOM 点。