（一）SvelteKit教程：hello world

（一）SvelteKit教程：hello world

sveltekit 的官方教程，在这里：Creating a project • Docs • SvelteKitCreating a project • Docs • SvelteKit

我们可以按照如下的步骤来创建一个项目：

npm create svelte@latest my-app
cd my-app
npm install
npm run dev

之后你就可以通过访问：http://localhost:5173/ 来看到原始画面了。

这个 SvelteKit 代码主要做以下事情：

1. 初始化一个变量 name 并将其值设置为 'hello ming'。
2. 定义一个函数 handleClick，该函数在调用时将 name 的值修改为 'hello world'。
3. 在页面中显示一个标题，标题内容包括 name 的当前值。
4. 显示一段包含超链接的文本，指向 SvelteKit 的文档。
5. 显示一个按钮，点击按钮时调用 handleClick 函数。
6. 显示一个输入框，输入框的值绑定到 name 变量，允许用户直接修改 name 的值。

逐行解释如下：

<script>// 定义一个变量 name，并初始化为字符串 'hello ming'let name = 'hello ming';// 定义一个函数 handleClick，当调用该函数时，将变量 name 的值修改为 'hello world'const handleClick = () => {name = 'hello world';}
</script><div class="page"><!-- 显示一个标题，内容为 'Welcome to SvelteKit' 后跟变量 name 的当前值 --><h1>Welcome to SvelteKit {name}</h1><!-- 显示一段文本，包含一个指向 SvelteKit 文档的超链接 --><p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p><!-- 显示一个按钮，当点击按钮时调用 handleClick 函数 --><button on:click={handleClick}>Change Name</button><!-- 显示一个输入框，输入框的值绑定到变量 name，允许用户修改 name 的值 --><input type="text" bind:value={name}>
</div><style>/* 空的样式标签，可以在此处添加自定义样式 */
</style>

代码解释总结

1. 变量和函数定义：

• let name = 'hello ming';：定义一个可变的字符串变量 name，初始值为 'hello ming'。
• const handleClick = () => { name = 'hello world'; }：定义一个箭头函数 handleClick，函数体内将 name 变量的值设置为 'hello world'。

2. HTML 结构和绑定：

• <div class="page">：定义一个 div 容器，类名为 page。
• <h1>Welcome to SvelteKit {name}</h1>：显示一个标题，标题中插入 name 变量的当前值。
• <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>：显示一段文本，包含一个超链接，指向 SvelteKit 的文档。
• <button on:click={handleClick}>Change Name</button>：显示一个按钮，点击时调用 handleClick 函数，将 name 的值更改为 'hello world'。
• <input type="text" bind:value={name}>：显示一个输入框，输入框的值绑定到 name 变量，用户在输入框中输入的值将实时更新 name 变量。

3. 样式：

• <style></style>：空的样式标签，当前没有定义任何样式规则，可以在此处添加自定义样式。

总结

该代码通过 SvelteKit 实现了一个简单的交互页面，用户可以通过按钮点击和输入框修改来动态更新页面显示的文本内容。这展示了 SvelteKit 在处理状态和事件方面的强大功能。