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

最新推荐文章于 2024-07-24 17:27:32 发布

cumifi2519

最新推荐文章于 2024-07-24 17:27:32 发布

阅读量229

点赞数

文章标签： java python vue javascript js ViewUI

原文链接：https://www.freecodecamp.org/news/learn-svelte-in-5-minutes/

版权

苗条的生成树

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; <script>, which contains Javascript, <style>, which contains CSS and the HTML, which uses the JS from the <script> tag.

首先，我们来看看如何构建一个Svelte组件，该组件可以包含三个部分； <script>包含Javascript， <style>包含CSS和HTML，HTML使用<script>标记中的JS。

<script>
    let say = 'hi';
</script>

<style>
    div {
        color: red;
    }
</style>

<div>
    Say: {say}
</div>

Note: The bare minimum needed for a Svelte component is the HTML, so the app will still work without the <script> and <style> tags.

注意： Svelte组件所需的最低要求是HTML，因此该应用程序仍可以在没有<script>和<style>标记的情况下运行。

导入导出 (Importing and Exporting)

One big benefit of using frameworks is the ability to modularise code by splitting it into separate components. Components are then imported into the main app using import keyword:

使用框架的一大好处是能够通过将代码分成单独的组件来模块化代码。然后使用import关键字将组件导入到主应用程序中：

import Face from './Face.svelte';

Unlike with other frameworks, the export keyword is not required to use a component elsewhere in an app. Instead, it is used to pass parameters, or props, from parent elements to their children.

与其他框架不同，在应用程序的其他位置使用组件不需要使用export关键字。相反，它用于将参数或属性从父元素传递到其子元素。

For example, we can set a size prop with a default size in our component:

例如，我们可以在组件中设置一个具有默认尺寸的尺寸道具：

<script>
    export let size = 1;
</script>

<div style="font-size: {size}em">=)</div>

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

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

<script>
    import Face from './Face.svelte';
</script>

<Face size="4" />
<Face size="10" />
<Face />

The various sizes appear on the DOM as follows:

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

component imported with various sizes using props

(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语句的语法如下所示：

<Container>
    {#if say}
        <div>
            Hi!
        </div>
    
    {/if}
</Container>

While a for loop is as follows:

而for循环如下：

{#each [2,1,0] as faceIndex}
        <Face index={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 <button> to show our app's header:

为了允许用户与我们的应用进行交互，我们需要事件处理程序。在此稀松布中，我们看到如何on:click <button> on:click添加简单的on:click以显示应用程序的标题：

<button on:click={() => {showHeader = true}}>show</button>

And what a header it is..!

header made visible on the DOM with an event handler

(Click the image to access the course.)

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

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

但是，有一个陷阱-它仅适用于本机HTML <button>标记，而不适用于称为<Button>导入组件。

Luckily, we can work around this by using event forwarding, i.e. adding an on:click to the native <button> tag in its component file:

幸运的是，我们可以使用事件转发来解决此问题，即在其组件文件中的本地<button>标记中添加on:click ：

<button on:click>
        <slot></slot>
</button>

事件调度 (Event dispatching)

Hide and show buttons created with event dispatcher

(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 <Button> component to both show and hide an element.

在此稀松布中，我们学习如何使用一个<Button>组件来显示和隐藏元素。

We create an event dispatcher in the <Button> component file like this:

我们在<Button>组件文件中创建一个事件分配器，如下所示：

<script>
    import {createEventDispatcher} from 'svelte';
    const dispatch = createEventDispatcher();    
</script>

We then add the dispatcher to our native HTML <button> like this:

然后，我们将调度程序添加到我们的本机HTML <button>如下所示：

<button on:click={() => dispatch('show')}>
    Show
</button>
<button on:click={() => dispatch('hide')}>
    Hide
</button>

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

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

<Buttons on:show={() => {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 <Button> in our App.svelte file looks like this:

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

<Buttons on:click={(e) => {showHeader = e.detail}} />

While the native HTML <button>s in our component file look like this:

虽然我们的组件文件中的本机HTML <button>看起来像这样：

<button on:click={() => dispatch('click', true)}>
    Show
</button>
<button on:click={() => dispatch('click', false)}>
    Hide
</button>

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/

苗条的生成树

cumifi2519

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
苗条的生成树_在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的概述，它是一个Jav...
复制链接

扫一扫