개시하다

달력 첨부 열흘째.
이번에 Svelte의 초보자는 Svelte로 탕시어머니를 만들어 보았다.
내용은 앞서 화제의 탕시어머니가 만든 것이다.
안의 처리가 js에서 거의 표절되었기 때문에 실제로 Svelte의 설명도 많아졌다.
그리고 평소에 vue를 사용하기 때문에 비교되는 부분이 많다고 생각합니다.

Svelte 소개

2016년께 등장한 최근 화제가 된 컴파일러.
(조사하면 틀이나 도구 같은 표현이 있으면 류머티즘이다.)
나는 가장 큰 특징이 화장하지 않은 DOM이라고 생각한다.
이번에는 사용하지 않았지만, 컨디션 관리가 표준 기능으로 활용돼 기쁘다.
다른 특징은 처리가 빠르고 코드량이 적다는 등 다른 것이 많습니다. 자세한 내용은 다른 사람의 보도를 보면 이해하기 쉽습니다.

코드

App.svelte

<script>
    const submit = ''
    const name = ''
    const newName = ''

    const handleSubmit = () => {
        newName = name.substr(Math.floor(Math.random() * Math.floor(name.length)), 1);
        submit = "フン。"+ name +"というのかい。贅沢な名だねぇ、今からお前の名前は"+newName+"だ。いいかい、" + newName + "だよ。分かったら返事をするんだ、" + newName + "!!"
    }
</script>

<main>
 <p>契約書だよ。そこに名前を書きな。</p>
 <form on:submit|preventDefault={handleSubmit} >
  <input type="text" bind:value={name}>
   <button type="submit">
    判を押す
   </button>
 </form>
 {submit}
</main>

svelte에서나는 계속해서 svelte의 파일을 변경하여 js,html,css를 쓸 것이다.
메인으로 HTML 부분을 묶고 dev 등의 표시를 표시하면 움직인다.
여기는vue와 다르기 때문에template 라벨로 싸지 않아도 됩니다.
그럼 바로 코드 해설을 시작하겠습니다.
제작 단계에서 계약 보기를 그립니다.
app.svalte

<main>
 <p>契約書だよ。そこに名前を書きな。</p>
 <form on:submit|preventDefault={handleSubmit} >
  <input type="text" bind:value={name}>
   <button type="submit">
    判を押す
   </button>
 </form>
 {submit}
</main>

이 부분이죠?
Svelte에서 js를 감싸는 변수를 참조합니다.
Svelte에서 이벤트를 설정합니다.
{handleSubmit}으로 이름을 지정할 때의 처리입니다.
그리고 완성해서 만든 건 이쪽이야.

최후

글을 쓸 때 참고하게 해 주세요.
https://sbfl.net/blog/2019/12/04/svelte-frontend-1/
https://qiita.com/Nemesis/items/c7192a7c510788d2cba2