Svelte 官方入门教程(1) - 入门简介

一、快速入门

简介

欢迎学习 Svelte 教程。此教程将会教给你构建快速、轻便的 web 应用程序所需要知道的一切知识。

你还可以参考 API文档 和 实例，或者，如果你现在没有耐心在本地电脑上开始上手 Svelte，可以先看一下这份 60秒入门 的文章。

什么是 Svelte？

Svelte 是一个构建 web 应用程序的工具。

Svelte 与诸如 React 和 Vue 等 JavaScript 框架类似，都怀揣着一颗让构建交互式用户界面变得更容易的心。

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

你可以使用 Svelte 构建整个应用程序，也可以逐步将其融合到现有的代码中。你还可以将组件作为独立的包（package）交付到任何地方，并且不会有传统框架所带来的额外开销。

如何使用本教程

在学习 Svelte 之前，你需要对 HTML、CSS 和 JavaScript 有基本的了解。

在本教程的学习过程中，你将看到一些旨在说明新功能的小练习。后面的章节依赖前面的章节所铺垫的基础知识，因此建议你从头到尾依次进行学习。循序渐进这样知识系统更扎实。

每一个章节都会有一个对应的实例来帮助理解，自己动手实现能体会更深。

了解组件

在 Svelte 中，应用程序由一个或多个 组件（components） 构成。组件是一个可重用的、自包含的代码块，它将 HTML、CSS 和 JavaScript 代码封装在一起并写入 .svelte 后缀名的文件中。下面的 ‘hello world’ 实例就是一个简单的组件。

<h1>Hello world!</h1>

二、 添加数据

只绘制某些静态标签的组件没什么意思，让我们添加一些数据吧。

首先，向组件添加 <script> 标签并声明一个 name 变量：

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

<h1>Hello world!</h1>

然后，我们就可以在下面的标签内引用 name 变量了：

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

在花括号内，我们可以放置任何我们想要的 JavaScript 代码。可以试试把 name 改为 name.toUpperCase() 。

<h1>Hello {name.toUpperCase()}!</h1>

是不是已经可以看到name对应内容变成大写的了~

三、动态属性

就像可以使用花括号控制文本一样，也可以使用花括号控制元素属性。

我们的图像缺少一个 src 属性，让我们添加一个吧：

<img src={src}>

看上去很不错，但是 Svelte 给出了一条警告信息：

A11y: <img> element should have an alt attribute

在构建 Web 应用程序时，要确保尽可能广泛的用户群可以访问它们这是很重要的，包括（例如）视力或运动受损的人，或者没有强大硬件或良好互联网连接的人。 可访问性（缩写为 a11y）并不总是很容易做到正确，但是如果编写的标签不具有良好的可访问性，Svelte 会通过警告您来帮助您。

在上面这个例子中，我们缺少 alt 属性，该属性用于描述img的用途，以便让使用屏幕阅读器的用户，或网络连接缓慢、不稳定的用户了解这幅图像的用途。接下来就让我们完善一下吧：

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

我们可以在属性 内部 使用花括号*。试着改为 "{name} dances." — 不要忘了在 <script> 块内声明 name 变量。

属性缩写

名称和值相同的属性并不少见，比如 src={src}。Svelte 为这些情况提供了一个方便的速记法：

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

四、样式

就像在 HTML 中一样，你可以向组件添加一个 <style> 标签。接下来就让我们为 <p> 元素添加一些样式吧：

<p>这是一个段落。</p>

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

重要的是，这些 CSS 样式规则 的作用域被限定在当前组件中。您不会意外地更改应用程序中其他地方的 <p> 元素的样式，这在下一章节中也将看到。

五、嵌套组件

将整个应用程序放在一个组件中是不切实际的。相反，我们可以从其他文件导入组件并包含它们，就好像我们包含 HTML 元素一样。

我们现在提供 2 个文件，App.svelte 和 Nested.svelte。

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

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

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

每个 .svelte 文件都包含一个组件，该组件是一个可重用的自包含代码块，它封装了属于一起的 HTML、CSS 和 JavaScript。

让我们向 App.svelte 添加一个 <script> 标签，将文件（我们的组件） Nested.svelte 导入我们的应用程序……

<script>
	import Nested from './Nested.svelte';
</script>
<style>
	p {
		color: purple;
		font-family: 'Comic Sans MS', cursive;
		font-size: 2em;
	}
</style>

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

请注意，即使 Nested.svelte 有一个 <p> 元素，但是 App.svelte 的样式也不会影响 Nested.svelte 中的 <p> 元素。如果你想影响到怎么办呢？后面会讲到:global(...)

另请注意，组件名称 Nested 是大写的。 采用此约定是为了让我们能够区分用户定义的组件和常规 HTML 标记。

六、HTML标签

通常，字符串以纯文本形式插入，这意味着像 < and >这样的字符没有特殊的含义。

但有时需要将 HTML 直接绘制到组件中。例如，您现在正在阅读的这段文字是存放于 markdown 文件中的，而展示到本页面时是作为一个 HTML 块。

在 Svelte 中，你可以使用特殊标记 {@html ...} 实现：

<p>{@html string}</p>

看下例子

<script>
	let string = `this string contains some <strong>HTML!!!</strong>`;
</script>

<p>{string}</p>

我们想要加粗展示HTML!!! 大家都了解strong 标签,但是上面的例子是不能实现我们想要的，想要达到效果需要改成下面的样子。

<script>
	let string = `this string contains some <strong>HTML!!!</strong>`;
</script>

<p>{@html string}</p>

使用{@html ...}需要注意：

在将表达式的输出插入到 DOM 之前，Svelte 不会对 {@html ...} 内的表达式的输出做任何清理的。
换言之，如果使用此功能，则必须手动转义来自不信任源的 HTML 代码，否则会使用户面临 XSS 攻击的风险。

创建一个APP

本教程旨在让您熟悉编写组件的过程。 但是在某些时候，您会想要在自己的文本编辑器中舒适地开始编写组件。

首先，你需要将 Svelte 与构建工具集成起来。官方提供了针对 Rollup 和 webpack 的插件：

• rollup-plugin-svelte
• svelte-loader

另外还有很多是社区维护的插件

SvelteKit 是 Svelte 团队的官方应用程序框架。 它目前正在开发中，但如果您不介意使用 1.0 之前的软件，那么推荐使用它来构建 Svelte 应用程序。

如果您是Web开发的新手，并且以前没有使用过这些工具，请不要担心。 我们专门为新开发人员准备了一个简单的Svelte分步指南 ，它将引导您完成整个过程。

您还需要配置您的文本编辑器。 有许多流行编辑器的插件以及官方的 VS Code 扩展。

然后，一旦配置好项目，使用 Svelte 组件就很容易了。 编译器将每个组件变成一个常规的 JavaScript 类 —— 只需导入它并用 new实例化它就可以了。

import App from './App.svelte';

const app = new App({
	target: document.body,
	props: {
		// we'll learn about props later
		answer: 42
	}
});

然后，如果需要，你可以使用 组件API 与 app 进行交互了。

八、调试

有时候，检查数据流经应用的数据是很有用的。

一种方案是在标记内使用 console.log(...)。但是，如果你想暂停执行，则可以使用 {@debug ...} 标签与要检查的值以逗号分隔的列表在一起使用：

App.svelte:

<script>
  let user = {
    firstname: 'Ada',
    lastname: 'Lovelace'
  };
</script>

{@debug user}

<h1>Hello {user.firstname}!</h1>

如果你现在打开 devtools 并准备与<input>元素进行交互，则将在user修改其值时触发调试器。

总结

• 本讲已简单介绍了 Svelte 的基本用法，Svelte 虽然与 React、Vue 一样，致力构建前端 Web 应用程序，但是Svelte 为了最优的性能及最简的代码输出，使用了编译器直接生成最终代码的方式来实现。

• Svelte 与 Vue 的 SFC 较为类似，即一个文件代表一个组件。当然这个也就是标准的web components的方式。

• 除非特殊的情况下（后面《模块》一章将详细说明），否则顶层 HTML 仅允许一个 script 标签（其他 script 可以放在子级元素之中，但是处理结果则不同），一个 style 标签（其他 style 标签可以放置在子元素之中，但是处理结果则不同）。

• 我们要添加一个类似双向绑定的变量，仅需如平常一样，声明一个普通变量即可。

• 而给元素赋值相关的属性，则与 React、Vue 非常接近。

• 样式默认是局部作用域的，在组件内的样式，不会影响到组件以外。

• 最后，Svelte 的组件可以直接输出为原生的 JavaScript 对象，可以轻松将这个对象在 React、Vue 或其他地方导入，然后通过 new 实例化，就可以使用。