SuperAPI AI 工具集

svelte-template-syntax

前端与建站

查看项目

更新于 10-16 05:48

技能介绍

用途:本技能面向 Svelte 5 组件模板的编写与理解,涵盖条件渲染、列表渲染、异步处理、片段复用、事件绑定、双向绑定、过渡动画等场景。

主要能力:块级语法 {#if}/{:else if}/{:else}、{#each}(含索引、key、解构、空列表 fallback)、{#key}、{#await}(含简洁形式与懒加载组件)、{#snippet} 与 {@render};模板标签 {@html}、{@attach}、{@const}、{@debug};事件以 onclick 等属性形式书写;bind: 系列指令(value/checked/group/files/this 及只读尺寸类);use: action;transition:/in:/out: 与 animate:flip;style: 指令与 class 对象/数组写法。

使用方式:在 Svelte 5 组件中按上述语法书写模板;{@attach} 需 5.29+,await 表达式需在 svelte.config.js 启用 experimental.async,{let/const} 为 5.56+ 推荐写法。

限制:{@html} 存在 XSS 风险且不受 scoped 样式影响;{@debug} 只接受变量名;{#each} 的 key 必须唯一;bind:group 仅在同一组件内有效;过渡在 SSR 期间不运行;{@attach} 参数变化会完整重建,昂贵初始化需包装。

资料未提供具体安装命令、收费与平台信息。