如果你有什么好的想法，或者翻译中存在什么错误，欢迎指正，非常感谢。原文地址

一.介绍

欢迎来到Svelte的教程。它将使你轻松学会构建一个快速的小型web应用程序。

你还可以查阅API文档和示例了解到更多Svelte相关内容。如果等不及得话，可以通过阅读这篇文章(60秒快速上手)在本地搭建一个Svelte的例子。

什么是Svelte?

Svelte是一个构建非常快速的web应用程序的js库。

它是一个类似于react和vue这样的js框架，它们共同的目标是使交互式用户界面的构建变得更容易。

但是Svelte有一个关键的不同：Svelte在构建时能够转换成理想的JavaScript，而不是在你的应用程序运行时解释你的代码。这意味着你无需负担由于框架抽象或者在应用首次加载时产生的性能损耗。

你可以使用Svelte构建你的整个应用程序，或者你可以在现有的代码基础之上渐进式的使用Svelte。你也可以将组件作为独立的包在任何地方使用，不会有依赖常规框架的使用成本。

怎样使用这个教程

在了解Svelte之前，你需要对HTML，CSS，和JavaScript有一个基本的认识。

你将看到为新特性设计的小练习，通过学习这个教程你将逐步的了解Svelte。后面文章的知识建立在前面文章的基础之上，所以建议你从头到尾阅读。如果有需要跳转至指定章节的话，可以点击上方的'Introduction / Basics'进行跳转。

后面的每一篇教程中将有一个‘Show me’的按钮，如果你在练习的过程中遇到问题的话，可以点击它。尽量不要过分依赖它。通过编辑区手动练习每一个提示代码块，你将学习的更快。

理解组件

在Svelte中，一个应用程序由一个或更多的组件组成。组件是一个可复用的独立的代码块，他由HTML，CSS，JavaScript封装而成。文件后缀写为.svelte。下面这个是‘hello world’组件一个简单的例子。

二.添加数据

这是一个仅仅渲染了静态内容的标签，并不是太有趣。让我们给他添加一些数据。

首先，增加一个script标签，并且声明一个name的变量在你的组件上：

<script>
    let name = 'world';
</script>

<h1>Hello world!</h1>

之后，我们便可以在标签内引用name这个变量：

<h1>Hello {name}!</h1>

在花括号{}内，我们可以添加我们想要的JavaScript。尝试将name使用name.toUpperCase()将内容转换为大写。如下图：

3.动态属性

你可以使用花括号{}来控制元素属性，就像你使用它来控制文本一样。

我们的图片缺少一个src属性，让我们使用下面的命令给他添加一个：

<img src={src}>

这样很棒，但是Svelte给了我们这样一个警告：

A11y：img标签应该有一个alt属性

当我们构建一个应用程序时，应当考虑让尽可能广泛的用户可以访问它们。例如：视力或者行动受损的人，亦或者没有强大硬件或者网络不好的人。并不是很容易解决可访问性（简写为a11y），但是如果你使用Svelte编写标签，Svelte将会通过警告提示你。

在这个例子中，我们缺失了一个alt属性，它的作用是针对于使用屏幕阅读器，亦或者网速慢或者不稳定而无法下载图片的人。让我们使用下面的代码给他添加一个：

<img src={src} alt="A man dances.">

我们可以在属性内使用花括号{}，尝试将其改变为"{name} dances."---一定要记得在script标签内申明name这个变量。

简写属性

由于我们在编写代码的过程中，属性名和属性值名称相同的情况下并不少见，例如src={src}。Svelte给我们提供了一个简写的方式：

<img {src} alt="A man dances.">

4.样式

像在HTML中一样，你可以在你的组件上添加一个style标签。让我们给这个<p>元素加一些样式：

<style>
    p {
        color: purple;
        font-family: 'Comic Sans MS', cursive;
        font-size: 2em;
    }
</style>

<p>This is a paragraph.</p>

重要的是，这些样式是局部的作用域当前组件。他不会在你的应用程序内，改变其他地方的<p>元素的样式。我们将会在下面的内容了解到。

Next➡