关于前端:svelte版本的todolist

svelte是react和vue之外的另一个抉择。

创立一个svelte利用很容易：

npx degit sveltejs/template todolist
cd todolist
npm install
npm start dev

它会启动5000端口，关上后，是这样的成果：

为了在vscode里有提醒，须要在vscode里装置Svelte for VS Code。

为了有更好的提醒，输出一条命令，让它反对typescript：

node scripts/setupTypeScript.js
npm install
npm run dev

这个时候，它曾经反对typescript了。

创立srcstores.ts，在这里设置todolist的list：

import { writable } from 'svelte/store';

interface Todo{
    done:boolean,
    text:string
}

const todo:Todo[]=[
    {
        done:true,
        text:'test-1'
    },{
        done:false,
        text:'test-2'
    }
]

export const list_store = writable(todo);

而后，在srcApp.svelte中，导入list：

import { list_store } from './stores.ts';

因为list_store是一个对象，因而还须要再设置一个变量：

let list:Todo[];

并获得值：

const unsubscribe = list_store.subscribe((value) => {
    list = value;
});

此时，就能够用循环，把todo给列出来：

{#each list as todo}
    <div class:done={todo.done}>
        <input type="checkbox" checked={todo.done} />
        <input placeholder="What needs to be done?" value={todo.text} />
    </div>
{/each}

此刻的成果是：

接下来减少对checkbox的事件处理：

on:change={() => {
    todo.done = !todo.done;
}}

同样，还须要对input文本输出进行解决：

on:change={(event) => {
    todo.text = event.target.value;
}}

接下来，减少一个增加按钮，和一个删除按钮。

<button
    on:click={() => {
        list = list.concat({ done: false, text: '' });
        }
    }>add</button>

<button
    on:click={() => {
        list = list.filter((todo) => !todo.done);
    }}>clear</button>

还要有一个显示状态:

<p>{remaining} remaining</p>

remaining是这样定义的：

$: remaining = list.filter((t) => !t.done).length;

srcApp.svelte全副代码如下：

<script lang="ts">
    import { list_store } from "./stores.ts";

    interface Todo {
        done: boolean;
        text: string;
    }

    let list: Todo[];

    const unsubscribe = list_store.subscribe((value) => {
        list = value;
    });

    $: remaining = list.filter((t) => !t.done).length;
</script>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }

    h1 {
        color: #ff3e00;
        text-transform: uppercase;
        font-size: 4em;
        font-weight: 100;
    }

    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

<main>
    <h1>todo list</h1>
    {#each list as todo}
        <div class:done={todo.done}>
            <input
                type="checkbox"
                checked={todo.done}
                on:change={() => {
                    todo.done = !todo.done;
                    console.log(todo.done);
                }} />
            <input
                on:change={(event) => {
                    todo.text = event.target.value;
                }}
                placeholder="What needs to be done?"
                value={todo.text} />
        </div>
    {/each}

    <p>{remaining} remaining</p>

    <button
        on:click={() => {
            list = list.concat({ done: false, text: '' });
        }}>add</button>

    <button
        on:click={() => {
            list = list.filter((todo) => !todo.done);
        }}>clear</button>
</main>

成果如下:

最初，全副代码位于：https://git.code.tencent.com/codetyphon/svelte-todolist