Sevlte

在本文档中，您将看到对 SvelteKit 构建的标准 Web API 的引用。我们不是重新发明轮子，而是使用该平台，这意味着您现有的Web开发技能适用于SvelteKit。

一个典型的 SvelteKit 项目如下所示： 您还可以找到常见文件，例如.gitignore和.npmrc（.prettierrc以及.eslintrc.cjs等等，

开始构建 SvelteKit 应用程序的最简单方法是运行npm create。第一个命令将在my-app目录中搭建一个新项目，询问您是否想要设置一些基本工具，例如 TypeScript。

什么是 SvelteKit？ SvelteKit 是一个使用Svelte快速开发健壮、高性能 Web 应用程序的框架。如果您来自 React，SvelteKit 与 Next 类似。

<svelte:self> <svelte:component> <svelte:window> <svelte:body> <svelte:head> <svelte:options> ...

上下文 API 为组件提供了一种相互“对话”的机制，无需将数据和函数作为props传递，也无需分派大量事件。这是一项高级功能，

就像元素可以有子元素一样： 组件也可以。但是，在组件接受子级之前，它需要知道将它们放在何处。我们使用<slot>元素来实现这一点。把这个放进Box.svelte里： 你现在可以把东西放进Box里了：

与任何其他属性一样，可以使用JavaScript属性指定class，如下所示： 这是UI开发中的常见模式，因此Svelte包含了一个特殊的指令来简化它： 只要表达式的值是真的，selected样式名就

自定义动作 动作本质上是元素级生命周期功能。它们在以下方面很有用： 与第三方库接口 延迟加载的图像 提示 添加自定义事件处理程序 在这个应用程序中，我们要使橙色框“可平移”。它有panstart、pa

在上一章中，我们使用延迟过渡来创建元素从一个todo列表移动到另一个todo列表时的运动。 为了完成效果，我们还需要将运动应用到没有过渡的元素上。为此，我们使用animate指令。 首先，从svelt

过渡 我们可以通过优雅地将元素显示到DOM中或从DOM中移除，来创建更具吸引力的用户界面。使用transition指令，在Svelte中这变得非常容易。 首先，从svelte/transition导入

运动 设置值和观察DOM自动更新是很酷的。知道什么更酷吗？这些值之间的差异。Svelte包括一些工具，可以帮助您构建流畅的用户界面，使用动画来传达更改。 我们先将progress存储更改为tweene

存储 并非所有应用程序状态都应用于程序的组件层次结构内。有时，您的值需要在多个不相关的组件或常规JavaScript模块之间访问。 writable 在Svelte，我们通过存储来做到这一点。 存储只

生命周期 每个组件都有一个生命周期，从创建时开始，到销毁结束。同时在这个过程中也会运行一些叫做生命周期的函数，可以在不同阶段添加处理代码的机会。 Mount 您最常使用的是onMount，它在组件第一

输入框绑定 通常的规则是，Svelte中的数据流是自上而下的，父组件可以在子组件上设置Props，组件可以在元素上设置属性，但不能反过来。 有时我们需要打破这个规则。以组件中的<input>元素为例，

DOM事件 在下面的事例你将看到，您可以使用on:事件名来监听元素上的任何事件： 完整代码： 内联处理 您还可以使用内联声明事件处理程序： 引号是可选的，但在某些环境中，它们有助于提高语法突显。 事件

条件渲染 HTML没有表达逻辑的方式，比如条件和循环，Svelte有。 为了有条件地呈现某些内容，我们将其包装在if块中： 完整代码如下： 点击按钮，按钮将在【Log out】与【Log in】之间切

Props 到目前为止，我们只处理内部状态，也就是说，只能在给定的组件中访问这些值。 在任何真正的应用程序中，都需要将数据从一个组件传递到其子组件。要做到这一点，我们需要声明属性，通常简称为“ pro

响应 Svelte的核心是一个强大的响应系统，可以使DOM与应用程序状态保持同步ーー例如，响应一个事件。 为了演示它，我们首先需要触发一个事件的程序: 在handleClick函数中，我们需要做的就是

##什么是Svelte？ Svelte是用于构建快速Web应用程序的工具。 它类似于React和Vue等JavaScript框架，它们的共同目标是轻松构建流畅的交互式用户界面。 但是有一个关键的区别：