模板语法概览
ElfUI 模板通过 defineHtml(...) 声明,构建期会编译成直接操作 DOM 的 render 函数。
ts
export const Counter = defineHtml(`
<button @click=${inc} :disabled=${disabled}>${count}</button>
`);模板语法分两类:
| 类型 | 示例 |
|---|---|
| JavaScript 动态表达式 | ${count}、:disabled=${disabled}、@click=${inc} |
| 指令 | v-if、v-for、v-model、v-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 点。
