共计 2026 个字符，预计需要花费 6 分钟才能阅读完成。
什么是 Svelte？
Svelte 是用于构建疾速 Web 应用程序的工具。
它相似于 React 和 Vue 等 JavaScript 框架，它们的独特指标是轻松构建晦涩的交互式用户界面。
然而有一个要害的区别：Svelte 在构建时将先编译您的应用程序，而不是在运行时解析您的利用程序代码。这意味着性能更好，首次运行时更为晦涩。
您能够应用 Svelte 构建整个应用程序，也能够将其逐渐增加到现有代码库中。您还能够将组件作为可在任何中央工作的独立包公布，而无需依赖传统框架的开销。
从 Hello World 开始
<script>
let name = 'world';
</script>
<h1>Hello world!</h1>而后，咱们能够在标记中援用 name。
<h1>Hello {name}!</h1>在大括号外面，咱们能够放任何咱们想要的 JavaScript。
速记属性，属性语法糖
就像能够应用大括号来管制文本一样，也能够应用它们来管制元素属性。
<script>
let src = 'tutorial/image.gif';
</script>
<img>咱们的图像短少一个 src ー让咱们增加一个：
<img src={src}>这样好多了，但 Svelte 给了咱们一个正告：
A11y: <img> element should have an alt attribute
11y: < img > 元素应该有一个 alt 属性在构建网络应用时，确保它们可能被更宽泛的用户群拜访是十分重要的，这些用户群包含视力或静止受损的人，或者没有弱小硬件或良好互联网环境的人。可拜访性 (缩写为 a11y) 的提醒并不会轻易呈现，然而如果您编写不可拜访的标记，Svelte 会通过正告您来提供帮忙。
这里，咱们疏忽了替换属性 alt，替换属性形容图片内容，次要提供给应用屏幕阅读器的人们，或者那些网络连接迟缓或不稳固的环境下无奈下载图像的情景。让咱们再加上一条：
<img src={src} alt="A man dances.">名称和值雷同的属性并不常见，比方 src={src}。为这些状况提供了一个简便的语法糖：
<img {src} alt="A man dances.">不会被净化的组件款式
就像在 HTML 中一样，您能够向组件增加一个 <style> 标记。让咱们为 <p> 元素增加一些款式：
<p>This is a paragraph.</p>
<style>
p {
color: purple;
font-family: 'Comic Sans MS', cursive;
font-size: 2em;
}
</style>重要的是，这些款式规定的范畴仅限于组件。您不会意外地扭转应用程序中其余中央 <p> 元素的款式，接下来咱们将看到这一点。
将整个应用程序放在一个独自的组件中是不切实际的。相同，咱们能够从其余文件中引入组件，并将它们蕴含在内，就如同蕴含了元素一样。
咱们先创立一个 neted.svelte 文件，内容如下：
<p>This is another paragraph.</p>再创立一个 app.svelte 文件，内容如下：
<p>This is a paragraph.</p>
<style>
p {
color: purple;
font-family: 'Comic Sans MS', cursive;
font-size: 2em;
}
</style>增加一个导入 neted.svelte 的 <script> 标记。
<script>
import Nested from './Nested.svelte';
</script>而后加上应用标记：
<p>This is a paragraph.</p>
<Nested/>残缺的文件代码：
<script>
import Nested from './Nested.svelte';
</script>
<p>This is a paragraph.</p>
<Nested/>
<style>
p {
color: purple;
font-family: 'Comic Sans MS', cursive;
font-size: 2em;
}
</style>留神，即便 neted.svelte 有一个 <p> 元素，app.svelte 中的款式也不会净化。
还要留神组件名 Nested 是首字母大写的。咱们采纳这种约定来辨别用户定义的组件和惯例的 HTML 标记。
HTML 输入
通常，字符串作为纯文本插入，这意味着像 < 和>这样的字符没有非凡含意。
但有时您须要将 HTML 间接出现到组件中。在 Svelte 中，你能够应用非凡的 {@html...} 标签：
<p>{@html string}</p>在将表达式插入 DOM 之前，Svelte 不会对 {@html…} 外部的表达式执行任何平安验证。换句话说，如果您应用这个个性，您必须手动本义来自您不信赖的源代码的 HTML，否则您的用户将面临蒙受 XSS 攻打的危险。
看过之后有没有想上手试试的激动？
此框架有在线版的代码编辑器，不必在本地装置框架，即可操练起来。
而且官网有详尽的教程和文档。
点击 Svelte REPL 去体验一下。