什么是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 attribute11y: < 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去体验一下。