关于前端:svelte版本的todolist

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

创立一个svelte利用很容易：

npx degit sveltejs/template todolistcd todolistnpm installnpm start dev

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

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

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

node scripts/setupTypeScript.jsnpm installnpm 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