什么是Svelte？Svelte是一种用于构建快速Web应用程序的工具。它类似于React和Vue等JavaScript框架，它们的共同目标是轻松构建流畅的交互式用户界面。但有一个关键区别：Svelte将首先在构建时编译您的应用程序，而不是在运行时解析您的应用程序代码。这意味着更好的性能和更流畅的首次运行。您可以使用Svelte构建整个应用程序，或将其增量添加到现有代码库中。您还可以将组件发布为可在任何地方使用的独立包，而无需依赖传统框架的开销。从HelloWorld开始

Helloworld!

然后，我们可以在标记中引用名称。

Hello{name}!

在大括号内，我们可以放置任何我们想要的JavaScript。速记属性，属性语法糖正如你可以用花括号控制文本一样，你也可以用它们来控制元素属性。我们的图像缺少一个src—让我们添加一个：这要好得多，但Svelte给了我们一个警告：A11y：元素应该有一个alt属性运动，或没有强大硬件或良好互联网环境的人。可访问性提示（缩写为a11y）来之不易，但Svelte会在您编写不可访问的标记时警告您，从而提供帮助。在这里，我们忽略替代属性alt，它描述了图片的内容，主要提供给使用屏幕阅读器的人，或者在网络连接缓慢或不稳定的环境中无法下载图片的人。让我们再添加一个：具有相同名称和值的属性并不少见，例如src={src}。为这些情况提供了一个方便的语法糖：不会被污染的组件样式就像在HTML中一样，您可以将重要的是，这些样式规则的范围仅限于组件。您不能在应用程序的其他地方不小心更改

元素的样式，我们将在接下来看到。将整个应用程序放在一个组件中是不切实际的。相反，我们可以从其他文件导入组件并将它们作为元素包含在内。我们首先创建一个包含以下内容的neted.svelte文件：

Thisisanotherparagraph.

然后创建一个包含以下内容的app.svelte文件：

Thisisaparagraph.

<样式>p{颜色：紫色；字体系列：'ComicSansMS'，草书；字体大小：2em；}添加导入neted.svelte的importNestedfrom'./Nested.svelte';然后添加用法标签：

Thisisaparagraph.

完整文件代码：

这是一个段落。

请注意，即使neted.svelte有一个

元素，app.svelte中的样式也不会造成污染。另请注意，组件名称Nested是大写的。我们采用这种约定来区分用户定义的组件和常规的HTML标记。HTML输出通常，字符串作为纯文本插入，这意味着<和>等字符没有特殊含义。但有时您需要将HTML直接渲染到组件中。在Svelte中，你可以使用特殊的{@html...}标签：

{@htmlstring}

在将表达式插入DOM之前，Svelte不会解析里面的{@html...}该表达式执行任何安全验证。换句话说，如果您使用此功能，您必须手动从您不信任的来源转义HTML，否则您的用户将面临XSS攻击的风险。看完之后是不是有想要一试的冲动呢？本框架自带在线版代码编辑器，无需在本地安装框架即可实践。并且官网有详细的教程和文档。点击SvelteREPL即可体验。