Svelte JSから始める

おい、奴!これは、スヴェルトJSと初心者のためのsvelteについて説明する楽しい方法に非常に小さな外観であり、それはちょうどsvelteとその使いやすさの速度を表示することです.
反応、角度とVue開発者は、パッケージ、nodeoundモジュールは、依存関係を維持する必要がありますし、実行時にアプリケーションでコンパイルを知っている.これは確かに非常に数ミリ秒でアプリケーションの速度を下げるでしょう.はい、それは非常に小さいですが、速度のすべての減少を組み合わせて、見てください.私たちは数秒を失ったでしょう.だから、なぜ我々はアプリ自体を構築するときにすべてを行いません.ランタイムでコンパイルする代わりに、なぜレンダリング前にすべてを準備しないのですか?

それはSveletjsが便利になるところです.Svelteはフレームワークではなく、コンパイラです.Svelteは仮想DOMを使用しませんが、むしろ実際のDOMを利用します.Svelteはこれを活用し、高速雷です.ので、少しベルベットを使用して簡単なToDoリストを作成するには少し深くダイビングしましょう.
アプリでは、我々は見てみましょう

Svelteコンポーネントを作成する方法

は、コンポーネント

の間で小道具を通過する方法

コンポーネント

間の関数を呼び出す方法
あなたが反応開発者であれば、小道具やコンポーネントとして小道具や関数を渡すことに精通しているでしょう.

Svelteアプリの設定

Svelteテンプレートを使用するには2つの方法があります

は、RPL

を使用します
24579172はDegit を使います
このアプリのために、我々はDegitを使用します.REPLを使用する場合は、手順hereに従ってください.
degitを使う:
Degitプロジェクトの足場ツールです.端末を開き、Svelteプロジェクトを作成するには次の手順を実行します.

npx degit sveltejs/template sample-svelte-project
cd sample-svelte-project
npm install
npm run dev

プロジェクト構造を見てみましょう.

これは非常に反応プロジェクトに似ています.srcディレクトリを見ると、メインがあることがわかります.JSとアプリ.スベルト.メインを想像してください.あなたのインデックスのようなJS.一緒にすべてをコンパイルすることによってDOMと対話しようとするJS.'Svelte 'ファイルは、独自のHTML、CSS、およびJSコードを持つ別のコンポーネントです.デフォルトのファイルを見てみましょう
アプリ.スベルト

<script>
  export let name;
</script>

<style>
  h1 {
    color: purple;
  }
</style>

<h1>Hello {name}!</h1>

これは、HTML、CSS、およびJSと単純なコンポーネントです.Svelteコンポーネントについての良いことは、スタイルがコンポーネントブロックレベルの中に残っていることです.意味は、アプリのH 1タグにスタイルを追加します.Svelteはアプリの外で使用される任意のH 1タグに反映されません.スベルト.角度と反応のように、変数は同じ方法で使用されます.
メイン.js

import App from "./App.svelte";

const app = new App({
  target: document.body,
  props: {
    name: "world",
  },
});

export default app;

ここではSvelteコンパイルされ、あなたのアプリケーションを構築する場所です.これは、コンポーネントのアプリをインポートし、小道具の名前と実際のDOMの本体の中に新しい要素を作成します.
我々のページライブを見ましょう

とても速くレンダリング!じゃなかった?

プログラマ: npm ru ...
Svelte :完了!
これは、Svelteについてクールなものです.コードを変更したら、保存してください.公共の下のJSとあなたはすべてのあなたのコンポーネント、クラス、テキストは、コンパイルされ、準備ができて、ちょうどレンダリングされるのを待って宣言されたテキストを見つけることができます.
さあ、TODOリストを少しずつ変えましょう.我々は4つの異なるsvelteコンポーネントに我々のアプリを分割します.

アプリ.スヴェルト

サイドバー.スヴェルト

東海道276 , 769スヴェルト

todoview.スヴェルト

メイン.JS

TODOリストアプリケーションフロー
それらを個別に見てみましょう.
メイン.js

import App from "./App.svelte";

const app = new App({
  target: document.body,
});

export default app;

我々は、アプリケーションのコンポーネントには、今のため、小道具を無視する小道具を渡す必要はありません.
サイドバー.js

<script>
  import Todo from "./Todo.svelte";

  export let viewTodo;
  export let removeTodo;

  let todo = "";
  let todoList = [];
  function addTodo(e) {
    if (e.keyCode === 13) {
      todoList = todoList.concat(todo);
      todo = "";
    }
  }

  function todoDone(key) {
    var temp = todoList;
    temp.splice(key, 1);
    todoList = temp;
    removeTodo();
  }
</script>

<style>
  .sidebar-container {
    position: fixed;
    right: 0;
    width: 400px;
    height: 100vh;
    background-color: #fff;
    top: 0;
    z-index: 999;
    box-shadow: 1px 1px 20px #000;
  }
  .todo-input {
    width: 100%;
    height: 5%;
  }
  input {
    color: rgb(56, 56, 56);
    font-weight: 70;
    font-size: 15px;
  }
  input::placeholder {
    color: rgb(165, 165, 165);
    font-weight: 70;
    font-size: 15px;
  }
  .empty-todo {
    padding: 10px;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: rgb(133, 133, 133);
    font-weight: 70;
    font-size: 15px;
  }
  .todo-list-container {
    overflow-y: scroll;
    height: 95%;
  }
</style>

<div class="sidebar-container">
  <input placeholder="Enter todo list" type="text" class="todo-input" bind:value="{todo}" on:keydown="{addTodo}" />
  <div class="todo-list-container">
    {#if !todoList.length}
    <div class="empty-todo">No Todos yet!</div>
    {:else} {#each todoList as todo,i }
    <Todo todo="{todo}" key="{i}" viewTodo="{viewTodo}" todoDone="{todoDone}" />
    {/each} {/if}
  </div>
</div>

非常にシンプルなToDoリストサイドバー.todosを格納し、todosを異なるコンポーネントとしてレンダリングする配列を作成します.
藤堂js

<script>
  export let todo;
  export let key;
  export let todoDone;
  export let viewTodo;

  const completedMessage = ["I'm Done!", "Accomplished!", "Finished!", "Done and dusted!", "Done for the day!", "Peace out!", "Cash me outside!"];

  function setRandomCompletedMessage() {
    var index = Math.floor(Math.random() * 7);
    return completedMessage[index];
  }
</script>

<style>
  .todo-item-wrapper {
    padding: 10px;
    color: rgb(65, 65, 65);
    font-weight: 70;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .todo-item {
    cursor: pointer;
  }
  .done-btn {
    background-color: #fff;
    border-radius: 15px;
    color: rgb(65, 65, 65);
    cursor: pointer;
  }
</style>

<div class="todo-item-wrapper">
  <div class="todo-item" on:click="{viewTodo.bind(this," todo)}>
    {todo}
  </div>
  <button class="done-btn" on:click="{todoDone.bind(this," key)}>
    {setRandomCompletedMessage()}
  </button>
</div>

新しいtodoを受信した小道具としてレンダリングします.また、配列の要素をポップするには、[完了]ボタンを追加します.
ToDoView.js

<script>
  export let currentTodo;
  var extras = [];
  var currentTodoExtra = extras[currentTodo] ? extras[currentTodo] : "Sample";
</script>

<style>
  .view-todo-container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .current-todo-wrapper {
    background-color: #fff;
    height: 95%;
    width: 95%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 0px 0px 20px #000;
    border-top-right-radius: 40px;
  }
  .current-todo-item {
    color: rgb(56, 56, 56);
    font-size: 40px;
    font-weight: 100;
  }
</style>

<div class="view-todo-container" style="{`width:${width}px`}">
  {#if currentTodo.length}
  <div class="current-todo-wrapper">
    <div class="current-todo-item">{currentTodo}</div>
  </div>
  {/if}
</div>

これは、別のコンポーネントに小道具を表示するには、追加機能です.アプリケーションへのサイドバーのように、ToDoViewにアプリ.
アプリ.スベルト

<script>
  import Sidebar from "./Sidebar.svelte";
  import TodoView from "./TodoView.svelte";

  var currentTodo = "";

  function viewTodo(todo) {
    currentTodo = todo;
  }

  function removeTodo() {
    currentTodo = "";
  }
</script>

<TodoView currentTodo="{currentTodo}" />
<Sidebar viewTodo="{viewTodo}" removeTodo="{removeTodo}" />

最後に、アクションでアプリを見てみましょう.

そして、我々はそれをしました