Svelte 101 - Codesandboxで!に沿ってプレイ!

このチュートリアルでは、このCodesAndBoxを使用します.
将来的に、あなたはコマンドnpx merced-spinup svelte projectNameを使用して迅速なsvelteテンプレートをspinupできます
https://codesandbox.io/s/welcome-to-svelte-is0hb
スベートとは
おそらく、3つのフロントエンドUIフレームワーク、反応、角度とVueを聞いたことがあります.Svelteは宇宙への新しい参加者であり、実際に開発者の間でスモールバンドルサイズと低学習曲線の蒸気を拾っている.

始めましょう
最初にCodesAndBoxを開くと、インデックスになります.Setteのためのエントリポイントであるjsは、reactdomに似たDOMに入ります.反応またはVueでレンダリングします.マウントVueで.このファイルには何も触れていません.
アプリに頭.Svelte、これは非常に動作するようになります.VueファイルにはJavaScript用のスクリプトタグ、テンプレート用のHTML、および任意のコンポーネント固有のCSS用のスクリプトタグです.

変数の宣言
Svelteの最良の部分の1つは、あなたの変数を宣言するために空想的なことをする必要はありません.役に立たないかフックまたはデータオブジェクトでない、ちょうど変数を宣言して、それは役に立ちます、そして、その変数が再割り当てされるならば、テンプレートは更新されます.これが原因の理由は、Svelteはランタイム中に動作するフレームワークを構築する必要がないためです.代わりに、すべてのコードを標準のJavaScriptにコンパイルし、単純な構文と小さなバンドルを持つことができます.
変数を宣言する

<script>
  const hello = "Welcome to Svelte"
  const myVar = "I just declared this!"
</script>

それから、あなたのテンプレートでその変数を使用しましょう!

<main>
  <h1>{hello}</h1>
  <h2>{myVar}</h2>
</main>

ニース、反応補間のように、Vueと角度の二重のカーリーの代わりに1つの巻き毛ブラケットを持っています.だけでなく、任意の有効なJavaScript Express変数を補間することができます(2 + 2をお試しください).

小道具
他のファイルと呼ばれる新しいコンポーネントを作成しましょう.スベルト.我々は今、アプリでこれをインポートすることができますし、我々も他のsvelteファイルからコンポーネントをエクスポートする必要はありません、コンパイラが知っている.
だからアプリを更新します.スベルト

<script>
  import Other from "./Other.svelte"
  const hello = "Welcome to Svelte"
  const myVar = "I just declared this!"
</script>

<style>
  main {
    font-family: sans-serif;
    text-align: center;
  }
</style>

<main>
  <h1>{hello}</h1>
  <h2>{myVar}</h2>
  <Other />
</main>

更新その他.スベルト

<div>
  <h1>Hello World</h1>
</div>

他のコンポーネントにpropを受け入れるようにするには、propになる変数をエクスポートしなければなりません.

<script>
  export let myProp
</script>

<div>
  <h1>{myProp}</h1>
</div>

さあ、アプリから支柱を送りましょう.スベルト

<script>
  import Other from "./Other.svelte"
  const hello = "Welcome to Svelte"
  const myVar = "I just declared this!"
</script>

<style>
  main {
    font-family: sans-serif;
    text-align: center;
  }
</style>

<main>
  <h1>{hello}</h1>
  <h2>{myVar}</h2>
  <Other myProp="cheese" />
</main>

事象と反応性データ
letを使用して再利用可能な変数を作成し、countを呼び出し、1で初期化します
カウントを1つ追加するハンドルクリック機能を作成します(再割り当ては再描画をトリガーするものですので、変更する要素/プロパティの値が再割り当てされていないオブジェクトや配列に注意してください).
テンプレートにカウントを加えましょう
クリックすると、handleclick関数を実行するボタンを追加します.
以下のようになります.

<script>
  export let myProp
  let count = 1

  const handleClick = () => {
    count += 1
  }
</script>

<div>
  <h1>{myProp}</h1>
  <h2>{count}</h2>
  <button on:click="{handleClick}">Add One</button>
</div>

on :( event )構文はvueと似ているはずですが、cury括弧の中で関数を渡すことは反応するのに精通しているべきです.しかし、ええ、これはかなり簡単だった!

配列を反復処理する
Svelteで反復処理を処理する方法は、実際には神社やハンドルバーのようなテンプレート言語に似ています.
のように値をループするために領域を作成し、ブロックを作成しましょう.
その他スベルト

<script>
  export let myProp
  let count = 1

  const nums = [1, 2, 3, 4, 5, 6]

  const handleClick = () => {
    count += 1
  }
</script>

<div>
  <h1>{myProp}</h1>
  <h2>{count}</h2>
  <button on:click="{handleClick}">Add One</button>
  {#each nums as num}
  <h1>{num}</h1>
  {/each}
</div>

そう、それはそんなに悪くなかった.

ボトムライン
Svelteは学ぶことはかなり簡単であり、それがなぜそんなに速く人気が高まっているかを確認するのは簡単です.Svelteまた、それ自身の次/NSXTのようなSSR/SSGフレームワークSapperと呼ばれるモバイルアプリケーションライブラリSvelteネイティブと呼ばれる、SvelteはVue、角と反応の大きな男の子との完全なすべてのツールを提供することができることをやっている.