すべてのSvelte単一のファイルのコンポーネントを書き始める必要がある

この記事はSvelteについての私の最初の3つのポストのパート2です.私の意見では、JavaScriptを持つ原理(UI) framework without a framework フロントエンド開発の将来に最も有望である.Svelteについて書くのを楽しみにしています.パートIは、どのように作成するかについて議論します.第3部
バージョン:
Svelte : 3.16.7

導入
Svelteはサイバー的に強化されたWebアプリを作成する近代的なフレームワークです.クライアントにライブラリ全体をロードすることなく、コンパイルステップですべての作業を行います.Svelteについて話すより多くのものがあります、しかし、今日、我々はSvelteでものをつくる方法について話すだけです.
この記事はsvelteの単一のファイル構成要素を書くことに集中します.次に示します.

structure a svelte file

create data attributes

render markup conditionally

handle events

compose components

pass properties to child components

use slots

continue with Svelte

エー.Svelteシングルファイルコンポーネント( SFC )
Svelte SFCSはVueや他の単語と似ています.HTML、JavaScript、CSSなど.通常はVue SFCSから少し異なります.
エー.Svelte SFCは<script> ブロック.それはSFCのロジックを含んでいます.これは、子コンポーネントをインポートすることができますデータ属性やプロパティをエクスポートします.
それに続く<style> ブロック.このコンポーネントのCSSが含まれます.他のコンポーネントベースのフレームワークと比較して、スタイルは自動的にscoped このコンポーネントにキーワードを追加せずに.

Styles are scoped to the component by default. For global styles add the keyword: <style global></style>.

HTMLの部分は驚くべきことではない<template> ブロック.また、1つの周りのタグの中にHTMLタグをすべてラップする必要はありません.それは重要です<template> ブロック.HTMLはファイルに追加できます.
例.svelte sfcは次のようになります.

<!-- component.svelte -->
<script>
  // nothing to do here. This block can be removed.
</script>

<style>
  h1 {
    font-size: 42px;
  }

  p {
    font-size: 14px;
  }
</style>

<h1>Hello World!</h1>
<p>I am a Demo.</p>

HTMLを囲むタグをラップしないことで、他のコンポーネントベースのフレームワークとは異なるいくつかのことがあります.

グリッドスタイリングは、より多くの自由を持つことによってより簡単になるかもしれません

プロパティを渡す他に、他の属性を追加することはできませんclass="" 子コンポーネントに.

データ属性
Svelteのテンプレート言語は角/vue似ています.それらのフレームワークのように、類似点がありますHandlebars . テンプレート内の変数を使用するには、括弧で括ってください.{VARIABLE} .

<script>
  const title = "World";
</script>

<style>
  h1 {
    font-size: 42px;
  }

  p {
    font-size: 14px;
  }
</style>

<h1>Hello {title}!</h1>
<p>I am a Demo.</p>

Although I would consider it as a bad idea to add HTML via variables in the markup, it's possible by writing <h1>Hello {@html title}</h1>.

変数を使用して動的な値をHTML属性にバインドすることもできます.例えば、HREF変数のアンカーリンクは以下のようになります.

<a href={href} target="_blank" rel="noopener">
  Open Link
</a>

A common mistake at the beginning when using variables for HTML attributes could be to add quotes for the variables. It's href={href} and not href="{href}".

良い機能を使用することですshorthand attributes . 変数の名前が属性の名前に等しい場合は、Carブレースで属性のみを追加するのに十分です.

<a {href} target="_blank" rel="noopener">
  Open Link
</a>

Shorthand attributes can reduce redundant code. For example, it's possible to use {href} for href={href}.

いくつかの属性を追加するためにオブジェクトを広げることも可能です.

<script>
  const link = {
    href: "some src",
    target: "_blank",
    rel: "noopener"
  }
</script>

<a {...link}>
<!-- will be compiled to: <a href="some src" target="_blank" rel="noopener">-->
  Open Link
</a>

条件レンダリング
他のフレームワークと比較して、if and else ブロックはディレクティブで実装されていません.For conditional rendering in Vue 書きます.<p v-if="true"> . For conditional rendering in Svelte 純粋にすることで達成できるif ブロック、巻き括弧で包まれます.

{#if Math.random() > 0.5}
  <p>I like Svelte.</p>
{:else}
  <p>I don't like Svelte.</p>
{/if}

For conditional rendering, if-else blocks can be written in curly braces. Else blocks are optional. # opens a block, : indicates a block continuation tag and / closes the block.

イベントハンドラ
UIフレームワークの時代以前に、開発者はヴァニラJavaScriptを使用してウェブ上にロジックと振る舞いを追加しました.Onclick ハンドラはHTML要素にコールバックを追加する機能を提供しました.svelteでは、イベントハンドラをelement directive on: . 関数を参照として渡すか、インライン関数を書くことも可能です.

Use on: to add event handlers on DOM elements.

イベントハンドラの感じを得るための例をいくつか挙げます.

<script>
  let counter = 1;

  function logout() {
    // ... log user out
  }

  function toggleTooltip() {
    // ... show or hide tooltip
  }
</script>

<button on:click={logout}>
  Logout
</button>

<div on:mouseover={toggleTooltip}>
  Info
</div>

<button on:click="{() => a += 1}">
<!-- you can pass the event as property: -->
<!-- <button on:click|preventDefault="{(e) => /* do something with the event e */}"> -->
  a is {a}.
</button>

次にコンポーネントを構成する方法について話しましょう.

コンポーネントの作成
子コンポーネントは<script> ブロック.彼らはそれ以上登録する必要はありません.

<script>
  import GridItem from '../components/GridItem.svelte';
</script>

コンポーネントは、他のHTMLタグのようなテンプレートに追加できます.

<GridItem></GridItem>
<!-- or <GridItem /> -->

Child components are written in CamelCase and imported in the <script> block.

コンポーネントの名前は大文字小文字を区別します.名前のためにpascalcaseを使うことを勧めます.それの利点は、Svelteのコンポーネントの名前としてヘッダー、フッター、および他の既に取られたタグ名を使用することが可能であるということです.ヘッダーやフッターの名前が回避される他のフレームワークとは異なりますが、これらのコンポーネントはページテンプレート内で一度だけ使用する必要があります.

通過プロパティ
プロパティはcurity括弧で渡すことができます{} を返します.子供たちはそれらをエクスポートすることによってプロパティにアクセスすることができます.データ属性を宣言するには[let/const] variable = 'abc'; , 渡されたプロパティにアクセスするための構文は以下の通りですexport let variable; .

<!-- Parent.svelte -->
<script>
  import Child from '../components/Child.svelte';
</script>

<Child title="World!"></Child>

<!-- Child.svelte -->
<script>
  export let title;
</script>

<h1>Hello {title}</h1>

オプションのデフォルト値を追加できます:

<!-- Child.svelte -->
<script>
  export let title = "my dear friend.";
</script>

<h1>Hello {title}</h1>

Use <Child></Child> or <Child /> for nesting components without using slots.

使用スロット
今、それはタグを使用して追加することができますgriditemsスロットを持つシンプルなグリッドを作成する時間です<slot></slot> . このグリッドの実装の単純性に注意してください.@vaheqelyan Aのより複雑なバージョンを実装しましたSvelte-Grid .

<!-- Grid.svelte -->
<style>
  .section {
    display: flex;
    flex: flex-wrap;
  }
</style>

<section>
  <slot></slot>
</section>

つのコンポーネント内で複数のスロットを使用するには、属性を追加しますname= 名前付きスロットを作成するには名前付きスロットと名前なしスロットを結合することができます.

<!-- GridItem.svelte -->
<style>
  .div {
    width: 50%;
  }
</style>

<div>
  <slot name="title"></slot>
  <hr>
  <slot name="content"></slot>
  <slot></slot>
  <!-- or <slot /> -->
</div>

これは、コンポーネントの複雑な組成物を作成する強力な方法です.以下では、グリッド全体の例を示します.

<!-- index.svelte -->
<script>
  import Grid from '../components/Grid.svelte';
  import GridItem from '../components/GridItem.svelte';

  let title = 'World!";
</script>

<h1>Hello {title}</h1>

<Grid>
  <GridItem>
    <h2 slot="title">I will be rendered within the named slot title.</h2>
    <p slot="content">I will be rendered within the named slot.</h2>
    <p>I will be rendered within the unnamed slot.</p>
  </GridItem>
  <GridItem>
    <h2 slot="title">I only have a headline, nothing else.</h2>
  </GridItem>
</Grid>

To add components, data, properties, etc. in Svelte, they only have to be imported or declared in the <script> block. There is no need to register them any further.

次の手順
🤩 この知識で準備し、最初の基本的なsvelteの単一のファイルコンポーネントを実装する🤩
小さい静的なページは、より多くの機能を必要としません.知識を強化するために、私は公式を通過する1 Hを使用することをお勧めしますtutorial .
もっと学ぶことがある.スベルト申し込みlifecycle hooks , bindings , stores , transitions そしてより多くの複雑なアプリケーションを作成する.学習を続ける👨‍🎓👩‍🎓