模板语法

WasmUX 支持 Vue 风格模板语法和 React JSX 语法。

模板语法（Vue 风格）

配置 syntax: 'template'，使用 @vue/compiler-dom 解析。

插值 {{ }}

html

<div>{{ message }}</div>
<div>{{ user.name }}</div>

需配合 config.data 使用，或通过 effect 中字符串模板传入。

指令速查

指令	说明	示例
{{ expr }}	插值	{{ message }}
v-if	条件渲染	v-if="show"
v-show	显示/隐藏	v-show="visible"
v-for	列表渲染	v-for="item in items"
:bind / v-bind	属性绑定	:class="cls"
@event / v-on	事件绑定	@click="handleClick"

单根约束

模板必须单根，多根只渲染第一个。用 <div> 包裹：

html

<!-- ❌ 错误 -->
<h1>标题</h1><p>内容</p>

<!-- ✅ 正确 -->
<div><h1>标题</h1><p>内容</p></div>

JSX 语法

配置 syntax: 'jsx'，使用 compile() 编译：

javascript

const vnode = compile('<div className="app"><h1>Hello</h1></div>', 'jsx');
app.mount(vnode);

常用写法：className、style={{ color: 'red' }}、onClick={handler}

语法自动识别

javascript

import { compileSmart, detectSyntaxType } from '@jianghuizhong/wasmux';

const vnode = compileSmart('<div>{{ message }}</div>');
const type = detectSyntaxType(code); // 'template' | 'jsx'