noah云_想学习苗条吗？这是Noah Kaufman的免费16部分课程

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

cumifi2519

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

阅读量215

点赞数

文章标签： java python vue js javascript ViewUI

原文链接：https://www.freecodecamp.org/news/want-to-learn-svelte-heres-our-free-15-part-course-by-noah-kaufman/

版权

noah云

If you're looking to learn a new Javascript framework which allows you to write less code, use no virtual DOM, and create truly reactive apps, then Svelte is for you.

如果您想学习一个新的Javascript框架，该框架可让您编写更少的代码，不使用虚拟DOM并创建真正的响应式应用程序，那么Svelte适合您。

什么是Card.svelte？ (What is Svelte?)

Svelte is a Javascript framework, a compiler, and a language. Unlike other Frameworks such as React and Vue which do much of their work in the browser, Svelte does its work in the compile step. This results in highly efficient code and a potentially faster run-time on the client-side.

Svelte是Javascript框架，编译器和语言。与其他框架(例如React和Vue)在浏览器中完成许多工作不同，Svelte在编译步骤中完成工作。这样可以产生高效的代码，并可能在客户端加快运行时间。

Svelte offers faster development, faster web pages, and a better developer experience - the creators of Svelte created it with other developers in mind).

Svelte提供更快的开发，更快的网页和更好的开发者体验-Svelte的创建者在考虑其他开发者的情况下创建了它。

On top of this, knowing Svelte will help you stand out to potential employers and shows that you're interested in newer technologies.

最重要的是，了解Svelte将帮助您在潜在的雇主中脱颖而出，并表明您对新技术感兴趣。

大！告诉我Card.svelte。 (Great! Tell me about Svelte.)

This article takes you through Scrimba's brand-new 16-part Svelte course which covers the following essential topics to put you well on your way to becoming a Svelte master:

本文将引导您完成Scrimba全新的由16部分组成的Svelte课程，其中涵盖以下基本主题，以使您更好地成为Svelte大师：

Components
组件
Importing/exporting
导入/导出
Slots
插槽
Template
模板
Event Handling
事件处理
Event Dispatching
事件派遣
Buttons
纽扣
Reactivity
React性
Binding
捆绑

The course is delivered through a series of interactive screencasts, allowing you to practice your new skills and truly embed your learning.

该课程通过一系列交互式截屏视频进行授课，使您可以练习新技能并真正融入您的学习中。

Finishing up with an in-depth Final Project which consolidates all the skills learned along the way, the course helps you build the muscle memory needed to become an effective Svelte developer.

完成深入的最终项目，巩固了沿途学习的所有技能，该课程可帮助您建立成为有效的Svelte开发人员所需的肌肉记忆。

It is led by is Noah Kaufman, a Senior Frontend Developer from San Francisco, California with an M.S in Computational Linguistics.

它由来自加利福尼亚旧金山的高级前端开发人员Noah Kaufman领导，拥有计算语言学硕士学位。

If this sounds right up your street, head on over to the course on Scrimba and read on to find out more.

如果这听起来像是在您的街道上，请前往 Scrimba上的球场，然后继续阅读以了解更多信息。

组件 (Components)

In Svelte, everything exists inside a component, and the first cast shows what the anatomy of these components looks like.

在Svelte中，所有东西都存在于组件内部，并且第一个演员表显示了这些组件的外观。

The component has three optional parts; <script>, which contains Javascript, <style> which contains CSS, and finally some HTML, which is able to use the JS from the <script> tag.

该组件具有三个可选部分；包含Javascript的<script> ，包含CSS的<style>以及最后一些能够使用<script>标记中的JSHTML。

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

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

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

导入导出 (Importing and Exporting)

Here, we take a quick look at how to import and export components so they can be used elsewhere in our app.

在这里，我们快速了解如何导入和导出组件，以便它们可以在我们应用程序的其他位置使用。

Components are imported with the import keyword:

使用import关键字导入组件：

import Face from "./Face.svelte";

While the export keyword allows other components to change components on import:

虽然export关键字允许其他组件在导入时更改组件：

<script>
    export let size;
</script>

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

挑战1 (Challenge 1)

In this cast, Noah challenges us to put our new Svelte skills to the test. No spoilers here, so click through to the course to give the challenge a try and check the solution.

在这次演出中，诺亚向我们挑战，以考验我们新的Svelte技能。这里没有破坏者，因此请单击课程以尝试挑战并检查解决方案。

插槽 (Slots)

Slots allow us to place elements inside components. For example, inserting a <slot> into a <div> with the class Container allows us to place as many elements as we want into the <Container> component:

插槽允许我们将元素放置在组件内部。例如，通过Container类将<slot>插入<div>允许我们将任意数量的元素放入<Container>组件：

<div class="Container">
  <slot></slot>
</div>

The newly-placed elements are children of the component:

新放置的元素是该组件的子代：

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

  <Face index={0} />
  <Face />
  <Face index={2} />
</Container>

模板化 (Templating)

The Svelte templating syntax allows us to add if statements and for loops to our HTML. That's right, to our HTML!

Svelte模板语法允许我们向HTML添加if语句和for循环。是的，对于我们HTML！

An if statement looks like this:

if语句如下所示：

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

    {/if}
</Container>

While a for loop looks like this:

虽然for循环如下所示：

{#each [2,1,0] as faceIndex}
        <Face index={faceIndex} />
    {/each}

标头制作-挑战2 (Making Header - Challenge 2)

In this challenge, we use what we've just learned about Svelte templating to add a Header to our app. Check out the course to try it out for yourself and check your answer.

在此挑战中，我们使用了刚刚从Svelte模板中学到的知识来向应用程序添加Header。查看该课程，自己尝试一下，然后查看答案。

事件处理 (Event Handling)

Next up, Noah shows us a simple inline event handler, which allows the user to show the app's header at the click of a button.

接下来，Noah向我们展示了一个简单的内联事件处理程序，该事件处理程序允许用户单击按钮即可显示应用程序的标题。

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

However, if we use a <Button> component rather than a native HTML button, this kind of on:click handler won't work. We can fix this with event forwarding, i.e. adding a plain on:click to the native <button> in the component file:

但是，如果我们使用<Button>组件而不是本机HTML按钮，则这种on:click处理程序将无法工作。我们可以通过事件转发来解决此问题，即在组件文件中的本地<button> on:click添加一个普通的on:click ：

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

事件派遣 (Event Dispatching)

Event dispatching allows a component to emit more than one type of event, for example, the same <Button> component can be used both to show an element and to hide it.

事件分派允许组件发出一种以上类型的事件，例如，相同的<Button>组件可用于显示元素和隐藏元素。

We create an event dispatcher like this:

我们创建一个事件调度程序，如下所示：

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

We then add it to native HTML <button> like this:

然后我们将其添加到本地HTML <button>如下所示：

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

Finally we define the <Button>'s functionality options in the App.svelte file like this:

最后，我们在App.svelte文件中定义<Button>的功能选项，如下所示：

<Buttons
  on:show={() => {
    showHeader = true;
  }}
  on:hide={() => {
    showHeader = false;
  }}
/>

The same outcome can also be achieved by passing values (in this case true and false) up through the dispatch. The values can then be accessed through the event variable e.

通过将值(在这种情况下为true和false )向上传递到调度中，也可以实现相同的结果。然后可以通过事件变量e访问这些值。

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

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

按钮-挑战3 (Buttons - Challenge 3)

Our third challenge is more involved than the previous two and puts our new knowledge of event dispatchers to the test. To help us along, Noah breaks the challenge down into bitesize chunks:

我们的第三个挑战比前两个更具挑战性，并将我们对事件分配器的新知识进行测试。为了帮助我们前进，诺亚将挑战分解为小块：

<!-- Challenge 3 -
1. add a prop in Buttons.svelte called buttons which is a list of objects like:
[{value: '', text: ''}, ...etc]
2. use #each to turn all the objects into buttons that:
    a. have innerHTML equal to the .text of the object.
    b. dispatch a click event that passes the .value of the object.
3. Handle the event in App.svelte to update the score.
-->

Head over to the course now to give it a try and see the solution.

立即前往课程，尝试一下并查看解决方案。

React性 (Reactivity)

Reactive statements are a unique feature of Svelte which tell a piece of code to re-run each time a variable within that code is updated.

React性语句是Svelte的独特功能，它告诉代码每次在该代码中的变量更新时都重新运行。

For example, the code below will run each time the score variable is changed (note that we declare a reactive statement with $:).

例如，下面的代码将在每次更改score变量时运行(请注意，我们使用$:声明了一个React式语句)。

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

We can also run if statements inside reactive statements:

我们还可以在React式语句中运行if语句：

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

React性挑战-挑战4 (Reactive Challenge - Challenge 4)

We can now test our new skills by completing the Reactive Challenge, which brings us one step closer to being ready for the final project.

现在，我们可以通过完成“React性挑战”来测试我们的新技能，这使我们距离为最终项目做好准备又迈了一步。

Once again, Noah splits the challenge into smaller parts to help us on our way:

再次，诺亚将挑战分成了较小的部分，以帮助我们前进：

<!-- Challenge 4 -
1. add happyScore and storyIndex (both equal 0)
2. smileySays and buttons get updated whenever storyIndex changes
3. add clickHandler function that increments storyIndex and adds e.detail.value to the happyScore -->

Click through to the course to try it out and check your answer.

点击进入课程以尝试并检查答案。

React性更高 (A Bit More Reactivity)

Next up, Noah gives us another example of using Reactive Statements, an emoji face which changes according the current happyScore variable:

接下来，Noah给出了另一个使用Reactive Statements的示例，它是根据当前happyScore变量而变化的表情符号表情：

const faceList = [
  "🤬",
  "😡",
  "😭",
  "🙁",
  "😕",
  "😐",
  "🙂",
  "😀",
  "😄",
  "😊",
  "😘",
];
$: index = happyScore + 5;

Similarly to the previous examples, the code runs each time the 'happyScore' variable changes, so a Reactive Statement is just the right tool for the job.

与前面的示例类似，代码每次'happyScore'变量更改时都会运行，因此Reactive语句正是完成此任务的正确工具。

捆绑 (Binding)

Binding allows a user to update a variable (in this case called name) by entering a value into an <input> field. As binding is a two-way process, changing the variable also updates the <input>'s value:

绑定允许用户通过在<input>字段中<input>值来更新变量(在本例中为name )。由于绑定是一个双向过程，因此更改变量也会更新<input>的值：

We bind values like this:

我们绑定这样的值：

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

    let showHeader = false;
    let storyIndex = 0;
    $: smileySays = story[storyIndex].smileySays;
    //variable name below:
    let name = '';
</script>

<Container>
    //binding declared below:
    <input type="text" bind:value={name}>
    <h1>{name}, {smileySays}</h1>
</Container>

As well as binding variables, it's also possible to bind values from objects, lists or components.

除了绑定变量，还可以绑定对象，列表或组件中的值。

最终项目 (Final Project)

Click the image to access the final project.

单击图像访问最终项目。

Well done for making it through the course! We wrap things up with a final project which ties together all the skills we've learned along the way.

顺利完成本课程！我们用一个最终项目将所有内容结合在一起，这是我们沿途学到的所有技能的结合。

Once again Noah breaks it down into smaller chunks to help us through:

诺亚再次将其分解成小块，以帮助我们完成以下任务：

<!-- Final Challenge
1. The header appears if the user chooses Svelte answer
(HINT: happyScore will be greater than 0 if they answer Svelte)
2. Display final message depending on happyScore
3. Implement the Reset functionality
-->

Check out the cast to test out your news Svelte skills and see the solution.

查看演员表，测试您的新闻Svelte技能并查看解决方案。

奥托罗 (Outro)

That brings us to the end of the course. Great job for finishing it! And if you're eager to learn more Svelte, do check out the official docs at svelte.dev for topics like: Context, Stores, Lifecycle methods, Actions, Sapper and more.

这将我们带到课程的结尾。完成这项工作真是太好了！如果您想了解更多Svelte，请查看svelte.dev上的官方文档，以获得诸如Context ， Stores ， Lifecycle methods ， Actions ， Sapper等主题。

You can also follow my SvelteMaster Youtube Channel and do sign up for the Scrimba Svelte Bootcamp to be the first to know about the launch and any discounts.

您也可以关注我的SvelteMaster Youtube频道，并注册Scrimba Svelte训练营，成为第一个了解发布和任何折扣的人。

I hope you've found it useful and can put your brand-new knowledge to good use very soon.

我希望您发现它有用，并且可以很快将您的全新知识很好地利用。

In the meantime, why not head over to Scrimba to see what other courses are on offer to help you reach your coding goals?

同时，为什么不前往Scrimba看看提供了哪些其他课程来帮助您达到编码目标呢？

If you also want to hang out with your fellow learners or chat with more experienced folks and the creators of Scrimba courses, do join our Scrimba Discord server.

如果您还想和其他学习者闲逛或与更多经验丰富的人以及Scrimba课程的创建者聊天，请加入我们的Scrimba Discord服务器。

Happy learning :)

快乐学习:)

翻译自: https://www.freecodecamp.org/news/want-to-learn-svelte-heres-our-free-15-part-course-by-noah-kaufman/

noah云

cumifi2519

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
noah云_想学习苗条吗？这是Noah Kaufman的免费16部分课程

noah云If you're looking to learn a new Javascript framework which allows you to write less code, use no virtual DOM, and create truly reactive apps, then Svelte is for you. 如果您想学习一个新的Javascript框架，该框架可...
复制链接

扫一扫