前端路线图

夜间模式

导航

svelte ​

一篇文章不足以介绍一个框架，本文仅展示部分使用示例，以与其他框架进行横向对比

数据双向绑定示例 ​

模板插值+bind:反向绑定示例 ​

bind:反向绑定类似Angular的ngModel，Vue的v-model，是框架对HTML标签属性、事件处理实现的。

svelte
<section>
    <div id="app">
        <div>msg: {msg}</div>
        <input bind:value={msg}/>
    </div>
</section>
<script lang="ts">
    export let msg = ''
</script>

不使用bind:示例 ​

svelte
<section>
    <div id="app">
        <div>msg: {msg}</div>
        <input value={msg} on:input={inputHandler}/>
    </div>
</section>
<script lang="ts">
    export let msg = ''
    export function inputHandler(e: Event){
        msg = (e.target as HTMLInputElement).value
    }
</script>

亮点 ​

Svelte 在 构建/编译阶段 将你的应用程序转换为理想的 JavaScript 应用，而不是在 运行阶段 解释应用程序的代码。这意味着你不需要为框架所消耗的性能付出成本，并且在应用程序首次加载时没有额外损失。

Svelte 没有运行时的库依赖，对于简单应用可以明显节省网络传输文件大小，例如上例构建产物总共5KB