苗条的生成树_在5分钟内学习苗条

苗条的生成树

This article gives you a lightning-speed overview of Svelte - a Javascript framework which lets you write less code, use no virtual DOM, and create truly reactive apps.

本文为您提供了Svelte的概述，它是一个Javascript框架，可让您编写更少的代码，不使用虚拟DOM并创建真正的响应式应用程序。

As if that's not enough, Svelte is super-intuitive too! Built with developers in mind, it is designed to make coding easier, bug-squashing quicker, and a developer's work life generally happier.

似乎还不够，Card.svelte(Svelte)也非常直观！ 它专为开发人员而设计，旨在简化编程，更快地解决错误，并且使开发人员的工作更快乐。

If that sounds right up your street, then read on!

如果这听起来像是在您的街道上，那么请继续阅读！

While 5 minutes won't be enough to teach you Svelte in depth, it does allow for a solid overview of the basics, including:

虽然5分钟不足以教会您Svelte的深入知识，但它可以使您对基础知识有一个全面的了解，包括：

• Components
  组件
• Importing and Exporting
  导入导出
• Templating
  模板化
• Event handling
  事件处理
• Event dispatching
  事件调度
• Reactivity
  React性

If you want to find out more about Svelte after reading this article, check out the full course over on Scrimba. There, you'll learn about even more Svelte features and have the chance to road test your new skills with a bunch of interactive challenges.

如果您在阅读完本文后想了解有关Svelte的更多信息，请查看Scrimba上的完整课程 。 在这里，您将了解更多Svelte功能，并有机会通过一系列互动挑战来路考您的新技能。

For now, let's get started on the basics!

现在，让我们开始基础知识！

组件 (Components)

(Click the image to access the course.)

(单击图像以访问课程。)

First, we'll take a look at how to build a Svelte component, which can contain three parts;

Say: {say}

Note: The bare minimum needed for a Svelte component is the HTML, so the app will still work without the

=)

This allows us to easily adjust the size of the imported component over in our App.svelte file:

这使我们可以轻松地在App.svelte文件中调整导入组件的大小：

The various sizes appear on the DOM as follows:

各种大小显示在DOM上，如下所示：

(Click the image to access the course.)

(单击图像以访问课程。)

Head over to the course on Scrimba to view and play around with the full code.

前往Scrimba上的课程 ，查看并尝试完整的代码。

模板化 (Templating)

The Svelte templating syntax is a great feature which lets us add if statements and for loops to our HTML.

Svelte 模板语法是一个很棒的功能，可让我们向HTML添加if语句和for循环。

The syntax for an if statement looks like this:

if语句的语法如下所示：

    {#if say}
        

            Hi!
        
    
    {/if}

While a for loop is as follows:

而for循环如下：

{#each [2,1,0] as faceIndex}
        
    {/each}

事件处理 (Event handling)

To allow the user to interact with our app, we need event handlers. In this scrim, we see how to add a simple on:click to a to show our app's header:

为了允许用户与我们的应用进行交互，我们需要事件处理程序。 在此稀松布中 ，我们看到如何on:click

on:click添加简单的on:click以显示应用程序的标题：

{showHeader = true}}>show

And what a header it is..!

(Click the image to access the course.)

而且它是什么标题..！ (单击图像以访问课程。)

There is a gotcha with this, though - it only works with the native HTML tag and not imported components called .

但是，有一个陷阱-它仅适用于本机HTML

标记，而不适用于称为导入组件。

Luckily, we can work around this by using event forwarding, i.e. adding an on:click to the native

tag in its component file:

幸运的是，我们可以使用事件转发来解决此问题，即将on:click添加到其组件文件中的本机

标记中：

事件调度 (Event dispatching)

(Click the image to access the course.) Event dispatching is a great feature of Svelte which increases code usability by allowing us to use the same element for more than one action.

(单击图像可访问课程。)事件分派是Svelte的一项重要功能，它允许我们将同一元素用于多个操作，从而提高了代码的可用性。

In this scrim, we learn how to use one component to both show and hide an element.

在此稀松布中 ，我们学习如何使用一个

组件来显示和隐藏元素。

We create an event dispatcher in the

component file like this:

我们在

组件文件中创建一个事件分配器，如下所示：

We then add the dispatcher to our native HTML

like this:

然后，我们将调度程序添加到我们的本机HTML

如下所示：

dispatch('show')}> Show dispatch('hide')}> Hide

Lastly, we declare the button's functionality options in the App.svelte file as follows:

最后，我们在App.svelte文件中声明按钮的功能选项，如下所示：

 {showHeader = true}} on:hide={() => {showHeader = false}} />

We can refactor this by passing values up through the dispatch using the event variable (e). In this case, the in our App.svelte file looks like this:

我们可以通过使用事件变量( e )将值向上传递通过调度来重构。 在这种情况下， App.svelte文件中的

看起来像这样：

 {showHeader = e.detail}} />

While the native HTML

s in our component file look like this:

虽然我们的组件文件中的本机HTML

看起来像这样：

dispatch('click', true)}> Show dispatch('click', false)}> Hide

React性 (Reactivity)

If you want a piece of code to rerun every time its associated variable is updated, then Svelte's unique feature, the reactive statement, is for you. We declare a reactive statement with $: as follows:

如果您希望每次相关代码变量更新时都重新运行一段代码，那么Svelte的独特功能即react语句适合您。 我们用$:声明React式语句，如下所示：

let score = 0;
    $: smileySays = 'Hi there, your score is: ' + score;

It's also possible to run if statements inside reactive statements. The code to do so looks like this:

还可以在React式语句中运行if语句。 这样做的代码如下所示：

let score = 0;
    $: smileySays = 'Hi there, your score is: ' + score;
    $: if (score < -4) smileySays = 'Wow your score is low!'

That's about all the features we can cram into our 5-minute tour of Svelte. I hope you found it useful and are inspired to try out the framework for yourself and test your new-found skills.

这就是我们可以参加5分钟的Card.svelte之旅的所有功能。 我希望您发现它有用，并受到启发去尝试一下自己的框架并测试您的新技能。

Don't forget to check out the full course over at Scrimba to find out about even more Svelte features and give the coding challenges a try.

不要忘记在Scrimba上查看完整的课程，以了解更多Svelte功能并尝试编码挑战。

Wherever your coding journey takes you next, happy learning :)

无论您的编码旅程带到哪里，接下来的学习都很愉快：)

翻译自: https://www.freecodecamp.org/news/learn-svelte-in-5-minutes/

苗条的生成树