Svelte에서 TODO 응용 프로그램 만들기

15176 단어 svelte tutorial javascript

6분마다 새로운 JS 프레임워크가 만들어진다고 합니다.이상하지 않다. 그들 중 소수만이 1위를 차지했고, 최근 이 단체에 가입한 사람은 Svelte명이다.
따라서 이 강좌에서 저는 간단한 TODO 응용 프로그램을 만들어서 당신을 날씬한 세계로 인도하는 첫걸음을 내딛고 싶습니다.좋아했으면 좋겠어!

설치 프로그램

시간은 돈이다. 당신이 시도하고 싶은 모든 것을 위해 놀이터를 만들 때 가능한 한 빨리 이 점을 하고 싶다.따라서 본 강좌에 대해 CodeSandbox와 Svelte template 또는 GitHub에서 제공하는 공식 Svelte 템플릿 중 하나를 사용하는 것을 권장합니다. 예를 들어

npx degit sveltejs/template svelte-todo
cd svelte-todo
npm install

그렇지 않으면, 가장 유행하는 JS 패키지(Rollup, Webpack, Parcel)와 추가 플러그인/로더를 설정할 수 있습니다.this repo에서 거의 모든 슬림한 통합 목록을 볼 수 있습니다.

비밀번호

어떤 설정 방법을 사용하든지 간에 우리의 모든 작업은 App.svelte 파일에서 진행될 것입니다.
우리 먼저 준비를 좀 합시다.

<script></script>

<svelte:head>
  <link
    rel="stylesheet"
    type="text/css"
    href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"
  />
  <script src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</svelte:head>

<main class="container is-fluid">
  <div class="columns is-centered is-vcentered is-mobile">
    <div class="column is-narrow" style="width: 70%">
      <h1 class="has-text-centered title">Svelte TODO</h1>
      <form></form>
      <ul></ul>
    </div>
  </div>
</main>

우리의 코드는 세 가지 주요 부분으로 구성되어 있다.

<script> - 모든 필수 JavaScript 코드가 포함된 블록입니다.

<svelte:head> - 특수한 날씬한 제공 블록으로 우리가 요소를 <head> 라벨에 삽입하여 날씬한 구성 요소의 편안한 구역을 떠나지 않도록 합니다.

<main>-는 저희 응용 프로그램 템플릿의 일부입니다.

현재 <svelte:head> 요소를 사용하여 외부 CDN에서 Bulma CSS framework과 Font Awesome 라이브러리를 가져옵니다.첫 번째는 응용 프로그램을 유행처럼 보이게 하고, 두 번째는 모든 무료 Font Awesome icons에 접근할 수 있도록 합니다.또한 NPM 또는 기타 방법(각 프로젝트의 웹 사이트에 나열)을 사용하여 이 자원을 가져올 수도 있지만, CDN이 가장 간단하기 때문에 우리가 사용하기에 가장 적합합니다.
CSS 프레임워크의 사용에 대해 주의할 점이 있습니다.Svelte는 약간 젊은 프레임워크이기 때문에 자신의'기정된'구성 요소 라이브러리가 없습니다. 예를 들어 Vue나 React-do, CSS 프레임워크는 Svelte 응용 프로그램을 보기 좋게 하는 가장 간단한 방법이기 때문에 모든 코드를 직접 작성할 필요가 없습니다.이것이 바로 우리가 이곳에서 Bulma를 사용하는 이유이며, 또한 왜 나는 당신이 자신의 날씬한 응용 프로그램에서도 이것이나 다른 CSS 프레임워크를 사용하도록 건의합니까?

JavaScript

응용 프로그램의 기초 지식이 있으면 우리는 실제 JS 코드를 작성하기 시작할 수 있다.놀랍게도 그것의 수량은 많지 않다.

let todos = [];
let input = "";

function addTodo() {
  if (input) {
    todos = [
      ...todos,
      {
        text: input,
        id: Math.random()
            .toString(36)
            .substr(2, 9)
      }
    ];
  }
  input = "";
}

function removeTodo(id) {
  const index = todos.findIndex(todo => todo.id === id);
  todos.splice(index, 1);
  todos = todos;
}

Svelte는 compiler이기 때문에 그 반응성 시스템은 간단한 국부 변수를 바탕으로 할 수 있다.우리의 예에서 단지 두 가지가 있다.

todos, 모든 대기 대상을 저장하는 데 사용됩니다.

input, 사용자 입력을 저장하는 데 사용됩니다.

이 두 변수를 제외하고 우리는 두 가지 간단한 함수인 addTodo()과 removeTodo()을 가지고 있는데, 그것들은 모두 그것들의 이름에 따라 한다.
여기서 주의해야 할 중요한 세부 사항 중 하나는 todos = todos 함수에서 이상한 removeTodo() 부치이다.vanilla JS에서는 이러한 작업이 무의미하지만, Svelte는 보기를 업데이트해야 하는지 확인하기 위해 이러한 분배에 의존합니다.Svelte는 splice()(TODO를 그룹에서 삭제하는 데 사용됨)이나 push() 등의 방법을 식별하지 않습니다. 변수와 속성만 부여됩니다.이것이 바로 우리가 보기 업데이트를 촉발하기 위해 todos = todos 조작을 실행해야 하는 이유입니다.
다른 한편,addTodo() 함수에서 우리는push()를 사용하여 removeTodo()과 같은 값 부여 기교를 실행할 수 있지만, 우리는 더 좋고 깨끗한 spread syntax을 사용합니다. 그 중에서 값만 부여할 수 있습니다.

양식

JS 코드가 준비되면 우리는 실제 템플릿을 계속 만들 수 있다.새 TODO를 추가할 수 있는 양식부터 시작하겠습니다.

<form
  class="field has-addons"
  style="justify-content: center"
  on:submit|preventDefault="{addTodo}"
>
  <div class="control">
    <input bind:value="{input}" class="input" type="text" placeholder="TODO" />
  </div>
  <div class="control">
    <button class="button is-primary">
      <span class="icon is-small">
        <i class="fas fa-plus"></i>
      </span>
    </button>
  </div>
</form>

우리는 이곳의 모든 CSS 클래스에 중점을 두지 않을 것이다. 왜냐하면 그것들은 모두 해석된 것이기 때문에 Bulma CSS framework에서 직접 추출한 것이다.반대로 세션에 사용되는 모든 날씬한 기능을 확대하자!
맨 위의 <form> 요소에서 우리는 on: 명령을 사용하여 표의 submit 사건을 정청합니다.|[modifier] 문법은 폼을 제출할 때 페이지를 다시 불러오는 것을 방지하기 위해 수신기에 수식자를 적용할 수 있습니다.다음은 preventDefault 명령과 bind: 요소를 사용하여 원소의value 속성을 <input> 변수로 연결합니다.이것이 바로 우리가 해야 할 일이다. 왜냐하면 스웨트는 스스로 나머지를 돌볼 수 있기 때문이다.
현재, 우리의 응용 프로그램은 다음과 같아야 한다.

대기사항 목록

이제 대기사항 명세서 자체를 제외하고는 남은 일이 많지 않다.고맙게도 날씬해졌으니 쉬워요!

<ul class:list={todos.length > 0}>
    {#each todos as todo (todo.id)}
        <li class="list-item" transition:slide="{{duration: 300, easing: elasticInOut}}">
            <div class="is-flex" style="align-items: center">
                <span class="is-pulled-left">{todo.text}</span>
                <div style="flex: 1"></div>
                <button class="button is-text is-pulled-right is-small" on:click={()=> removeTodo(todo.id)}>
                    <span class="icon">
                        <i class="fas fa-check"></i>
                    </span>
                </button>
            </div>
        </li>
    {:else}
        <li class="has-text-centered" transition:slide="{{delay: 600, duration: 300, easing: elasticInOut}}">
            Nothing here!
        </li>
    {/each}
</ul>

우선, 우리는 input 명령을 상부 class: 요소에 추가합니다.제공된 조건을 충족시키려면 클래스 이름을 촉발해야 합니다(이 예에서 <ul>).우리가 그것을 사용하는 것은 표시할 todo가 없을 때, list 클래스를 적용하고 싶지 않기 때문이다.이것은 필요한 것이다. 왜냐하면 우리는 미학적으로 "여기는 아무것도 없다!"라고 표현하고 싶기 때문이다.소식
다음으로 우리는 첫 번째이자 유일하게 사용하는 날씬한 네모난 덩어리인 list을 보았다.이것은 하나의 값 그룹 (여기는 {#each} 그룹) 을 교체하고 지정된 이름 (todos) 아래의 데이터 대상을 전달할 때 제공하는 템플릿입니다.마지막 일은 키 표현식(todo)입니다. 모든 항목에 지정된 키를 지정함으로써 Svelte가 목록을 최적화하는 과정을 도와줍니다.
우리는 또한 (todo.id) 자구를 사용했는데 전달된 수조의 길이가 {:else}과 같을 때 이 자구가 나타날 것이다.여기가 저희가'여기는 아무것도 없어요'이상적인 곳이에요.소식0 블록을 사용하여 렌더링된 각 항목은 {#each} 객체를 통해 프로젝트의 데이터에 액세스할 수 있습니다.todo을 사용하여 TODO 텍스트를 표시하고 {todo.text} 명령과 내연 처리 프로그램으로 클릭 이벤트를 정탐할 때 우리는 이 점을 이용했다.
마지막으로, 우리는 응용 프로그램을 더욱 매력적으로 만들기 위해 스위트에 내장된 on: 과도를 사용하여 모든 업무 사항과 "여기는 아무것도 없습니다!"를 순조롭게 애니메이션하였다.소식
이를 위해서는 먼저 JS 코드의 맨 위에 Svelte 라이브러리에서 필요한 변환 및 이완 함수를 가져와야 합니다.

import { slide } from "svelte/transition";
import { elasticInOut } from "svelte/easing";

그리고 slide 명령을 통해 템플릿에서 사용할 수 있습니다.변환 함수 (Svelte의 내장 함수 또는 자신의 함수) 와 설정 대상이 필요합니다. 이것은 변환에 달려 있습니다.우리의 예에서 애니메이션 지연, 지속 시간, 휴식 기능 (transition:) 과 같은 설정을 허용합니다.

결과

모든 준비가 완료되어 드디어 TODO 어플리케이션이 출시되었습니다.
당신은 제공된 운동장이나 자신의 강좌에 따라 자유롭게 놀 수 있습니다.

마지막 생각

전반적으로 말하자면, 나는 날씬함과 함께 일하는 것이 얼마나 쉽고 편안한지 정말 놀랐다.컴파일러의 장점은 클라이언트에서 볼 수 있을 뿐만 아니라 (예를 들어 성능 개선과 더 작은 패키지) 개발자의 측면에서 볼 때 국부 변수를 바탕으로 하는 반응성 등 특성도 가지고 있다.도서관과 도구의 소형(하지만 끊임없이 증가) 지역사회와 생태계를 제외하고 날씬함은 확실히 당신의 다음 웹 응용 프로그램의 선택 가능합니다!
만약 당신이 이 글을 좋아한다면, 그것을 공유하고 나를 따라, Facebook, 또는 my personal blog을 방문하세요.만약 네가 나의 내용에 흥미가 있다면, 나도 너에게 나를 좀 보라고 건의한다.다시 한 번 본문을 읽어 주셔서 감사합니다. 즐거운 하루 되세요!

Reference

이 문제에 관하여(Svelte에서 TODO 응용 프로그램 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/areknawo/making-a-todo-app-in-svelte-57l3

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

EXT 학습노트06 combox

Ext 학습_양식 구성 요소 4

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다