本教程将详细介绍 Svelte 的核心语法和组件基础，包括 <script>、<style> 和 HTML 模板的使用方法。我们将通过实例掌握双向数据绑定、条件渲染、循环等基本语法，最后编写简单的交互式组件。
Svelte 组件机制
Svelte 使用组件化结构来组织代码。每个 .svelte 文件就是一个组件，包含 <script>、<style> 和 HTML 模板块，分别用于编写 JavaScript 逻辑、CSS 样式和 HTML 结构。组件之间的逻辑与样式是分离的，但每个组件的 CSS 默认作用于组件自身。
组件文件结构
每个 .svelte 文件由以下三个主要部分组成：
<script>：编写 JavaScript 逻辑，包括定义变量、函数、导入模块等。<style>：编写组件的 CSS 样式。Svelte 会将样式作用域限定在当前组件，不会影响全局样式。- HTML 模板：用于描述组件的 HTML 结构。可以在模板中插入变量、条件渲染、循环等。
<!-- App.svelte -->
<script>let name = 'Svelte';
</script><style>h1 {color: #ff3e00;}
</style><main><h1>Hello {name}!</h1>
</main>
在这个示例中，组件会显示一个 “Hello Svelte!” 标题，并将标题颜色设置为橙色。
基础语法和数据绑定
单向数据绑定
Svelte 提供了简单的绑定机制，只需在 HTML 中插入 {} 即可将变量绑定到视图。通过单向绑定，视图会随变量的更新而自动刷新。
<script>let count = 0;
</script><button on:click={() => count += 1}>Clicked {count} times
</button>
每次点击按钮，count 会增加 1，视图会自动更新显示点击次数。
双向数据绑定
Svelte 提供了 bind: 语法用于实现双向数据绑定。可以将输入框的内容和变量绑定，使输入的内容实时更新到变量中。
<script>let name = '';
</script><input bind:value={name} placeholder="Enter your name" />
<p>Your name is {name}</p>
在这个示例中，每当输入框内容变化时，name 变量会自动更新，且会实时显示在段落中。
条件渲染和循环渲染
条件渲染（{#if ...}）
Svelte 支持使用 {#if} 块进行条件渲染。可以根据条件动态显示或隐藏某些内容。
<script>let isLoggedIn = false;function toggleLogin() {isLoggedIn = !isLoggedIn;}
</script><button on:click={toggleLogin}>{#if isLoggedIn}Logout{:else}Login{/if}
</button>
<p>{isLoggedIn ? "Welcome back!" : "Please log in."}</p>
这里通过点击按钮改变 isLoggedIn 的状态，以动态显示 “Login” 或 “Logout” 文案。
循环渲染（{#each ...}）
Svelte 的 {#each} 块可以遍历数组并渲染每一项。适用于动态展示列表。
<script>let items = ['Apple', 'Banana', 'Orange'];
</script><ul>{#each items as item}<li>{item}</li>{/each}
</ul>
上面的代码会生成一个列表，每个水果名都将显示在一个 li 元素中。
事件绑定和交互式组件
事件绑定
Svelte 提供了简洁的事件绑定语法，通过 on: 指令可以轻松绑定事件。
<script>let message = '';function handleClick() {message = 'Button clicked!';}
</script><button on:click={handleClick}>Click me</button>
<p>{message}</p>
在这个示例中，点击按钮后，message 的内容会更新为 “Button clicked!”。
双向绑定的输入组件
使用 bind: 实现输入框的双向绑定，可以创建一个交互式输入组件。
<script>let username = '';
</script><input bind:value={username} placeholder="Enter your username" />
<p>Hello, {username || 'Guest'}!</p>
当用户在输入框中键入时，username 变量实时更新，页面上的文本也会动态改变。
简单的交互式组件示例
我们可以利用以上语法，编写一个包含按钮和输入框的交互式组件，让用户可以输入信息并点击按钮来更新显示内容。
<script>let name = '';let greeting = '';function greet() {greeting = `Hello, ${name}!`;}
</script><style>button {margin-top: 10px;padding: 5px 10px;background-color: #6200ea;color: #fff;border: none;border-radius: 3px;cursor: pointer;}
</style><input bind:value={name} placeholder="Enter your name" />
<button on:click={greet}>Greet</button>
<p>{greeting}</p>
在这个示例中：
- 输入框通过
bind:value实现双向数据绑定。 - 点击按钮后触发
greet函数，更新greeting文本并显示。
通过该交互组件，用户可以输入名称并点击按钮，页面会显示相应的问候信息。
总结
在本教程中，我们学习了 Svelte 的组件机制、单向和双向数据绑定、条件渲染和循环渲染，还编写了简单的交互式组件。通过这些基础语法和功能，已经可以构建动态的交互界面。掌握这些内容之后，您可以进一步学习 Svelte 的 Store 状态管理、路由等高级特性，创建更复杂的应用。