Svelte

Svelte基础

<h1>Svelte 基础</h1> <div class="content-bg"> <div class="content-intro view-box "><p>欢迎使用 Svelte 教程。这将教会您轻松构建快速、小型 Web 应用程序所需的一切知识。...

Svelte添加数据

<h1>Svelte 添加数据</h1> <div class="content-bg"> <div class="content-intro view-box "><p>只呈现一些静态标记的组件不是很有趣。让我们添加一些数据。</p><p>首先，向您的组件添加一个脚本标签并声明一个 <code>...

Svelte动态属性

<h1>Svelte 动态属性</h1> <div class="content-bg"> <div class="content-intro view-box "><p>您可以使用花括号来控制元素属性，就像使用它们来控制文本一样。</p><p>我们的图像缺少 <code>src</co...

Svelte样式

<h1>Svelte 样式</h1> <div class="content-bg"> <div class="content-intro view-box "><p>就像在 HTML 中一样，您可以将 <code><style></code>&nbsp...

Svelte嵌套组件

<h1>Svelte 嵌套组件</h1> <div class="content-bg"> <div class="content-intro view-box "><p>将整个应用程序放在一个组件中是不切实际的。相反，我们可以从其他文件导入组件，然后像包含元素一样使用它们。</p><p>现在，我们...

SvelteHTML标签

<h1>Svelte HTML标签</h1> <div class="content-bg"> <div class="content-intro view-box "><p>通常，字符串作为纯文本插入，这意味着像 <code><</code> 和 <cod...

Svelte制作一个app

<h1>Svelte 制作一个app</h1> <div class="content-bg"> <div class="content-intro view-box "><p>本教程是为了让你熟悉编写组件的过程。但在某些时候，你会想在你自己的文本编辑器里开始编写组件。</p><p>首先，您需要将&...

Svelte赋值

<h1>Svelte 赋值</h1> <div class="content-bg"> <div class="content-intro view-box "><p>Svelte 的核心是一个强大的 reactivity 系统，用于使 DOM 与您的应用程序状态保持同...

Svelte声明

<h1>Svelte 声明</h1> <div class="content-bg"> <div class="content-intro view-box "><p>当组件的状态改变时，Svelte 会自动更新 DOM。通常，组件状态的某些部分需要通过 <em>其它</em> ...

Svelte语句

<h1>Svelte 语句</h1> <div class="content-bg"> <div class="content-intro view-box "><p>我们不仅提供了声明反应式的 <i>值</i>，我们还可以运行反应式的 <i>语句</i>。例如，当 <code>coun...

Svelte更新数组和对象

<h1>Svelte 更新数组和对象</h1> <div class="content-bg"> <div class="content-intro view-box "><p>由于 Svelte 的反应性是由赋值语句触发的，因此使用数组的诸如 <code style="font-size...

Svelte声明props

<h1>Svelte 声明 props</h1> <div class="content-bg"> <div class="content-intro view-box "><p>到目前为止，我们只处理内部状态——也就是说，值只能在给定组件内访问。</p><p>在任何实际应用程序中，您都需要将数据从...

Svelte默认值

<h1>Svelte 默认值</h1> <div class="content-bg"> <div class="content-intro view-box "><p>我们可以轻松地在 <code>Nested.svelte</code> 中为 props&nbs...

Svelte属性传递

<h1>Svelte 属性传递</h1> <div class="content-bg"> <div class="content-intro view-box "><p>如果你的组件含有有一个对象属性，可以利用<code>...</code>语法将它们spread（传播）到一个组件上，而不用逐...

SvelteIf块

<h1>Svelte If 块</h1> <div class="content-bg"> <div class="content-intro view-box "><p>HTML没有表达逻辑的方法，比如条件和循环。Svelte 有。</p><p>为了有条件地呈现一些标记，我们将其包装在一个&nbs...

SvelteElse块

<h1>Svelte Else 块</h1> <div class="content-bg"> <div class="content-intro view-box "><p>由于这两个条件——<code>if user.loggedIn</code> 和 <co...

SvelteElse-if块

<h1>Svelte Else-if 块</h1> <div class="content-bg"> <div class="content-intro view-box "><p>将多个条件链接在一起请使用<code>else if</code>：</p><pre lang="htm...

SvelteEach块

<h1>Svelte Each 块</h1> <div class="content-bg"> <div class="content-intro view-box "><p>如果你遇到需要遍历的数据列表，请使用 <code>each</code> 块：</p><pre la...

Svelte为each块添加key值

<h1>Svelte 为 each 块添加 key 值</h1> <div class="content-bg"> <div class="content-intro view-box "><p>一般来说，当你修改<code>each</code> 块中的值时，它将会在 <em>...

SvelteAwait块

<h1>Svelte Await 块</h1> <div class="content-bg"> <div class="content-intro view-box "><p>很多 Web 应用程序都可能在某个时候有需要处理异步数据的需求。使用 Svelte 在标签中使用&nb...

SvelteDOM事件

<h1>Svelte DOM事件</h1> <div class="content-bg"> <div class="content-intro view-box "><p>您可以使用 <code>on:</code> 指令监听元素上的任何事件：</p><pre lang="...

Svelte内联处理

<h1>Svelte 内联处理</h1> <div class="content-bg"> <div class="content-intro view-box "><p>您还可以内联声明事件处理程序：</p><pre lang="html" style="max-width: 100%;"><co...

Svelte事件修饰符

<h1>Svelte 事件修饰符</h1> <div class="content-bg"> <div class="content-intro view-box "><p>DOM 事件处理程序具有额外的 <i>修饰符（modifiers）</i> 。例如，带&nbsp...

Svelte组件事件

<h1>Svelte 组件事件</h1> <div class="content-bg"> <div class="content-intro view-box "><p>组件也可以调度事件，为此，组件内必须创建一个相同事件并在外部进行分配。更改 <code style="font-siz...

Svelte事件转发

<h1>Svelte 事件转发</h1> <div class="content-bg"> <div class="content-intro view-box "><p>与 DOM 事件不同， 组件事件不会 冒泡（bubble） ，如果你想要在某个...

SvelteDOM事件转发

<h1>Svelte DOM事件转发</h1> <div class="content-bg"> <div class="content-intro view-box "><p>事件转发也可以应用到DOM事件。</p><p>我们希望<code><FancyButton></code>组件...

SvelteTextinputs

<h1>Svelte Text inputs</h1> <div class="content-bg"> <div class="content-intro view-box "><p>一般来说，Svelte 中的数据流是自上而下的——父组件可以在子组件上设置属性，组件可以在元素上设置属性...

SvelteNumericinputs

<h1>Svelte Numeric inputs</h1> <div class="content-bg"> <div class="content-intro view-box "><p>在 DOM 中，一切都是字符串。当您处理数字输入（<code>type="number...

Svelte复选框

<h1>Svelte 复选框</h1> <div class="content-bg"> <div class="content-intro view-box "><div>我们不仅可以使用<code>input.value</code>，也可以将复选状态绑定<code>input.checked<...

Svelte输入框组绑定

<h1>Svelte 输入框组绑定</h1> <div class="content-bg"> <div class="content-intro view-box "><p>如果你需要绑定更多值，则可以使用<code style="font-size: 15px;">bind:group</cod...

Svelte文本域绑定

<h1>Svelte 文本域绑定</h1> <div class="content-bg"> <div class="content-intro view-box "><p>同样，<code style="font-size: 15px;"><textarea></code>标签在 Sv...

Svelte选择框绑定

<h1>Svelte 选择框绑定</h1> <div class="content-bg"> <div class="content-intro view-box "><p>我们还可以利用 <code style="font-size: 15px;">bind:value</code>&n...

Svelte选择框的multiple属性

<h1>Svelte 选择框的multiple属性</h1> <div class="content-bg"> <div class="content-intro view-box "><p>选择框含有一个名为 <code style="font-size: 15px;">multiple...

SvelteContenteditable的绑定

<h1>Svelte Contenteditable的绑定</h1> <div class="content-bg"> <div class="content-intro view-box "><p>支持 <code style="font-size: 15px;">contentedit...

SvelteEach块绑定

<h1>Svelte Each 块绑定</h1> <div class="content-bg"> <div class="content-intro view-box "><p>你甚至可以对 <code style="font-size: 15px;">each</code> ...

Svelte媒体标签的绑定

<h1>Svelte 媒体标签的绑定</h1> <div class="content-bg"> <div class="content-intro view-box "><p><code style="font-size: 15px;"><audio></code> 和&nb...

Svelte尺寸的绑定

<h1>Svelte 尺寸的绑定</h1> <div class="content-bg"> <div class="content-intro view-box "><p>每个块级标签都可以对 <code style="font-size: 15px;">clientWidth</cod...

SvelteThis

<h1>Svelte This</h1> <div class="content-bg"> <div class="content-intro view-box "><p><code style="font-size: 15px;">this</code>可以绑定到任何标签 (或组件) 并允许你获取...

Svelte组件绑定

<h1>Svelte 组件绑定</h1> <div class="content-bg"> <div class="content-intro view-box "><p>正如可以绑定到DOM元素的属性一样，你也可以将组件的属性绑定。例如，我们能绑定位于<code style="font-size:...

SvelteonMount

<h1>Svelte onMount</h1> <div class="content-bg"> <div class="content-intro view-box "><p>每个组件都有一个生命周期，从创建时开始，到销毁时结束。有一些函数允许您在生命周期的关键时刻运行代码。</p><p>您最常使...

SvelteonDestroy

<h1>Svelte onDestroy</h1> <div class="content-bg"> <div class="content-intro view-box "><p>要在组件被销毁时运行代码，请使用 <code>onDestroy</code>。</p><p>例如，我们...

SveltebeforeUpdate和afterUpdate

<h1>Svelte beforeUpdate 和 afterUpdate</h1> <div class="content-bg"> <div class="content-intro view-box "><p>顾名思义，<code style="font-size: 15px;">before...

Sveltetick

<h1>Svelte tick</h1> <div class="content-bg"> <div class="content-intro view-box "><p><code style="font-size: 15px;">tick</code>函数不同于其他生命周期函数，因为你可以随时调...

Svelte可写存储

<h1>Svelte 可写存储</h1> <div class="content-bg"> <div class="content-intro view-box "><p>并非所有的应用程序状态都属于你的应用程序的组件层次结构。有时，你会有一些值需要被多个不相关的组件或普通的 JavaScript ...

Svelte自动订阅

<h1>Svelte 自动订阅</h1> <div class="content-bg"> <div class="content-intro view-box "><p>前面的例子中的应用程序可以工作，但有一个微妙的错误--<code>unsubscribe</code>函数从未被调用。如果该...

Svelte只读stores

<h1>Svelte 只读 stores</h1> <div class="content-bg"> <div class="content-intro view-box "><p>并非所有<code style="font-size: 15px;">stores</code>都需要在其他地方写入，...

Sveltestores派生

<h1>Svelte stores派生</h1> <div class="content-bg"> <div class="content-intro view-box "><p>你可以创建一个<code style="font-size: 15px;">stores</code>，其内的值可以派生...

Svelte自定义stores

<h1>Svelte 自定义 stores</h1> <div class="content-bg"> <div class="content-intro view-box "><p>只要一个对象正确的使用 <code style="font-size: 15px;">subscribe<...

Svelte绑定Store

<h1>Svelte 绑定Store</h1> <div class="content-bg"> <div class="content-intro view-box "><p>如果 store可写入的(即具有<code style="font-size: 15px;">set</code>方法）,...

SvelteTweened

<h1>Svelte Tweened</h1> <div class="content-bg"> <div class="content-intro view-box "><p>设置数值并观察DOM的自动更新是很酷的。知道更酷的是什么吗？变化这些值。Svelte包括一些工具，可以帮助你建立灵活的用户...

SvelteSpring

<h1>Svelte Spring</h1> <div class="content-bg"> <div class="content-intro view-box "><p><code>spring</code> 函数是 <code>tweened</code>&nbs...

Svelte过渡指令

<h1>Svelte 过渡指令</h1> <div class="content-bg"> <div class="content-intro view-box "><p>我们可以通过优雅地将元素转入和转出 DOM 来制作更具吸引力的用户界面。 Svelte ...

Svelte添加参数

<h1>Svelte 添加参数</h1> <div class="content-bg"> <div class="content-intro view-box "><p><code>Transition</code>函数可以接受参数。用 <code>fly</code>&nbsp...

Svelte出入

<h1>Svelte 出入</h1> <div class="content-bg"> <div class="content-intro view-box "><p><code style="font-size: 15px;">transition</code> 属性可以替换为&nbsp...

Svelte自定义CSS过渡

<h1>Svelte 自定义 CSS 过渡</h1> <div class="content-bg"> <div class="content-intro view-box "><p><code style="font-size: 15px;">svelte/transition</code>&nb...

Svelte自定义JS过渡

<h1>Svelte 自定义 JS 过渡</h1> <div class="content-bg"> <div class="content-intro view-box "><p>虽然通常应该尽可能多地使用CSS进行过渡，但是如果不借助JavaScript，有些效果是无法实现的，例如“逐字打印”效...

Svelte过渡事件

<h1>Svelte 过渡事件</h1> <div class="content-bg"> <div class="content-intro view-box "><p>了解过渡的开始和结束可能会很有用。Svelte调度监听事件，像监听其他任何DOM事件一样：</p><pre lang="html...

Svelte局部过渡

<h1>Svelte 局部过渡</h1> <div class="content-bg"> <div class="content-intro view-box "><p>无论是添加或销毁任何标签容器块，过渡都会在标签上播放，示例中，单个列表项的过渡效果影响到切换整个列表，以致切换可见性时也有过渡效...

Svelte延时过渡

<h1>Svelte 延时过渡</h1> <div class="content-bg"> <div class="content-intro view-box "><p>Svelte 过渡引擎其中一项特别强大的功能就是可以设置<em>延时（defer）</em> 过渡，以便多个效果之间协...

Svelte动画指令

<h1>Svelte 动画指令</h1> <div class="content-bg"> <div class="content-intro view-box "><p>在上一章中，我们使用延迟转换来创建元素从一个待办事项列表移动到另一个待办事项列表时的运动错觉。</p><p>为了完成 illus...

Svelte使用指令

<h1>Svelte 使用指令</h1> <div class="content-bg"> <div class="content-intro view-box "><p>Actions 本质上是元素级生命周期函数。它们在以下方面很有用：</p><ul><li><p>与第三方库接口</p></li>...

Svelte添加参数

<h1>Svelte 添加参数</h1> <div class="content-bg"> <div class="content-intro view-box "><p>像过渡和动画一样，一个动作可以带一个参数，动作函数将与它所属的元素一起被调用。</p><p>在这里，我们使用<code>lon...

Svelte类指令

<h1>Svelte 类指令</h1> <div class="content-bg"> <div class="content-intro view-box "><p>与任何其他属性一样，您可以使用 JavaScript 属性指定类，如下所示：</p><pre lang="ht...

Svelte快捷类指令

<h1>Svelte 快捷类指令</h1> <div class="content-bg"> <div class="content-intro view-box "><p>通常，类的名称将与其所依赖的值的名称相同：</p><pre lang="html" style="max-width: 100...

SvelteSlots

<h1>Svelte Slots</h1> <div class="content-bg"> <div class="content-intro view-box "><p>就像元素可以有子元素一样......</p><pre lang="html" style="max-width: 100%;"...

SvelteNamedslots

<h1>Svelte Named slots</h1> <div class="content-bg"> <div class="content-intro view-box "><p>上一章节使用了一个<em>默认插槽（default slot）</em>，该slot直接在组件内显示，有时候你需要...

SvelteCheckingforslotcontent

<h1>Svelte Checking for slot content</h1> <div class="content-bg"> <div class="content-intro view-box "><p>在某些情况下，您可能希望根据父级是否传入某个插槽的内容来控制组件的某些部分。也许您在该...

SvelteSlot属性

<h1>Svelte Slot 属性</h1> <div class="content-bg"> <div class="content-intro view-box "><p>在当前程序中，我们有一个名为 <code style="font-size: 15px;"><Hovera...

SveltesetContextandgetContext

<h1>Svelte setContext and getContext</h1> <div class="content-bg"> <div class="content-intro view-box "><p>上下文 API 为组件提供了一种机制，可以在不传递数据和函数作为&...

Sveltesvelteself

<h1>Svelte <svelte:self></h1> <div class="content-bg"> <div class="content-intro view-box "><p>Svelte 提供了多种内置元素。第一个，<code><svelte:self&...

Sveltesveltecomponent

<h1>Svelte <svelte:component></h1> <div class="content-bg"> <div class="content-intro view-box "><p>一个组件可以用 <code><svelte:component>...

Sveltesveltewindow

<h1>Svelte <svelte:window></h1> <div class="content-bg"> <div class="content-intro view-box "><p>如同事件可以监听 DOM 标签一样，你可以通过<code style="font-size: ...

Sveltesveltewindow绑定

<h1>Svelte <svelte:window>绑定</h1> <div class="content-bg"> <div class="content-intro view-box "><p>我们还可以绑定某些属性到<code style="font-size: 15px;">wi...

Sveltesveltebody

<h1>Svelte <svelte:body></h1> <div class="content-bg"> <div class="content-intro view-box "><p>和<code style="font-size: 15px;"><svelte:window...

Sveltesveltehead

<h1>Svelte <svelte:head></h1> <div class="content-bg"> <div class="content-intro view-box "><p><code style="font-size: 15px;"><svelte:head&gt...

Sveltesvelteoptions

<h1>Svelte <svelte:options></h1> <div class="content-bg"> <div class="content-intro view-box "><p>最后， <code style="font-size: 15px;"><sv...

SvelteSharingcode

<h1>Svelte Sharing code</h1> <div class="content-bg"> <div class="content-intro view-box "><p>在我们目前看到的所有示例中，<code><script></code> 块包含在初始化...

SvelteExports

<h1>Svelte Exports</h1> <div class="content-bg"> <div class="content-intro view-box "><p>从 <code>context="module"</code> 脚本块导出的任何内容都将成为模块本...

SvelteThe@debugtag

<h1>Svelte The @debug tag</h1> <div class="content-bg"> <div class="content-intro view-box "><p>有时，在数据流经您的应用程序时检查它很有用。</p> <p>一种方法是在标记中使用 <code>...