当前位置：首页 > article >正文

【前端】Svelte：核心语法和组件基础

article 2024/11/13 15:22:37

本教程将详细介绍 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>