【Svelte】第二节：Svelte 基础语法与组件结构

👽第2节：Svelte 基础语法与组件结构

👋 引言：掌握 Svelte 的核心语法基础

在上一节中，我们完成了 Svelte 项目的搭建并编写了第一个组件。本节老曹将深入讲解 .svelte 文件的三大组成部分（<script>、模板、<style>），以及模板语法中的文本插值、表达式绑定、属性绑定等基础知识。

这些内容是构建 Svelte 应用的基石，理解它们将帮助你快速开发出结构清晰、逻辑严谨的组件，并为后续学习事件处理、响应式变量打下坚实基础。

📚 课程目标

• 掌握 .svelte 文件的三大部分：<script>、模板、<style>
• 理解 Svelte 模板语法和表达式使用方式
• 学会使用文本插值 {} 和属性绑定机制
• 能够创建一个结构完整、交互简单的组件
• 实战练习：构建一个动态展示用户信息的组件

🧱 一、Svelte 组件文件结构详解

每个 Svelte 组件都由三个部分组成：

1. <script> —— JavaScript 逻辑层

用于定义变量、函数、生命周期钩子、引入其他模块等。

<script>
  let name = 'Alice';
  let age = 25;

  function sayHello() {
    alert(`你好，${name}`);
  }
</script>

2. 模板 —— HTML + 动态数据绑定

HTML 结构中可以嵌入变量、表达式、指令等。

<h1>欢迎，{name}</h1>
<p>年龄：{age}</p>
<button on:click={sayHello}>打招呼</button>

3. <style> —— 样式定义

默认是 scoped，即样式仅作用于当前组件。

<style>
  h1 {
    color: #42b983;
  }

  button {
    padding: 0.5rem 1rem;
    background-color: #333;
    color: white;
    border: none;
    cursor: pointer;
  }
</style>

🧪 二、模板语法详解

1. 文本插值 {}

用于在 HTML 中插入动态变量或表达式。

<p>姓名：{name}</p>
<p>出生年份：{2024 - age}</p>

2. 表达式计算

支持任意合法的 JavaScript 表达式：

<p>是否成年：{age >= 18 ? '是' : '否'}</p>
<p>全名：{'Mr.' + name}</p>

3. 属性绑定

✅ 静态属性绑定

<img src="avatar.png" alt="用户头像">

✅ 动态属性绑定（使用 src={variable}）

<script>
  let imageUrl = 'https://example.com/avatar.jpg';
</script>

<img src={imageUrl} alt="动态图片">

✅ 类名绑定（条件类）

<script>
  let isActive = true;
</script>

<div class="box {isActive ? 'active' : ''}">状态框</div>

简写方式：

<div class="box" class:active={isActive}>状态框</div>

✅ 样式绑定（内联样式）

<script>
  let width = 80;
</script>

<div style="width: {width}%;">进度条</div>

或者使用对象形式：

<div style={{ width: `${width}%` }}>进度条</div>

💡 三、课堂实战练习

🎯 实战任务

创建一个组件 UserInfo.svelte，实现以下功能：

• 显示用户的姓名、年龄、性别；
• 根据年龄判断是否成年；
• 显示用户头像（使用动态 src）；
• 使用条件类控制“成年”标签的颜色；
• 添加按钮点击显示用户信息。

示例代码：

<script>
  let name = 'Tom';
  let age = 20;
  let gender = '男';
  let avatarUrl = 'https://example.com/avatar.png';

  let isAdult = age >= 18;

  function showInfo() {
    alert(`姓名：${name}\n年龄：${age}\n性别：${gender}`);
  }
</script>

<main>
  <img src={avatarUrl} alt="用户头像" style={{ width: '100px' }}>
  <h2>用户信息</h2>
  <p>姓名：{name}</p>
  <p>年龄：{age}</p>
  <p>性别：{gender}</p>
  <p class:text-green={isAdult} class:text-red={!isAdult}>
    {isAdult ? '已成年' : '未成年'}
  </p>
  <button on:click={showInfo}>查看详情</button>
</main>

<style>
  main {
    font-family: sans-serif;
    text-align: center;
    padding: 2rem;
  }

  .text-green {
    color: green;
  }

  .text-red {
    color: red;
  }

  button {
    padding: 0.5rem 1rem;
    background-color: #333;
    color: white;
    border: none;
    cursor: pointer;
  }
</style>

📝 四、总结

本节课我们系统学习了：

• Svelte 组件的基本结构：<script>、模板、<style> 三大组成部分
• 模板语法中的文本插值 {}、表达式计算、动态属性绑定
• 条件类绑定、内联样式绑定等高级技巧
• 实战创建了一个完整的用户信息展示组件

通过掌握这些基础语法，你可以开始构建具备交互能力的 Svelte 页面，并为后续学习事件通信、响应式编程、组件化开发奠定坚实基础。

📘 附录资源推荐

• Svelte 官方文档 - 模板语法
• Vite + Svelte 项目模板
• VSCode 插件：
  • Svelte for VS Code
  • Prettier + ESLint 支持格式化与规范检查

🎯 课后作业

1. 创建一个新的 Svelte 组件 ProductCard.svelte，展示商品名称、价格、库存状态（有货/缺货），并根据库存状态改变背景颜色。
2. 尝试使用多种方式实现类名绑定、样式绑定、事件绑定。

🤖 10大高频面试题（含答案）

✅ Q1: Svelte 组件文件由哪几部分构成？

答：
每个 .svelte 文件通常包含三个部分：

• <script>：JavaScript 逻辑和状态管理；
• 模板：HTML 结构及数据绑定；
• <style>：样式定义（支持 scoped 和全局样式）；

✅ Q2: 如何在 Svelte 中进行文本插值？

答：
使用 {} 包裹变量或表达式，例如：

<p>姓名：{name}</p>
<p>出生年份：{2024 - age}</p>

✅ Q3: Svelte 中如何绑定动态属性？

答：
使用 attribute={value} 的方式绑定动态属性，例如：

<img src={imageUrl} alt="动态图片">

✅ Q4: 如何在 Svelte 中实现条件类绑定？

答：
使用 class:className={condition} 语法：

<div class:active={isActive}>状态框</div>

✅ Q5: Svelte 的样式是全局还是局部作用域？

答：
Svelte 的 <style> 默认是 scoped 的，即只作用于当前组件。如果需要全局样式，可以在类名前加 :global(...)：

:global(.my-global-class) {
  color: red;
}

✅ Q6: 如何在 Svelte 中绑定内联样式？

答：
支持两种方式：

<!-- 字符串拼接 -->
<div style="width: {width}%;">进度条</div>

<!-- 对象方式 -->
<div style={{ width: `${width}%` }}>进度条</div>

✅ Q7: Svelte 是否支持 JSX？

答：
不支持 JSX。Svelte 使用原生 HTML + 特定语法（如 {}、on:、class: 等）来实现动态内容和交互。

✅ Q8: Svelte 的响应式变量更新机制是怎样的？

答：
Svelte 使用 $: 声明反应式语句，当依赖变量变化时自动执行。例如：

let count = 0;
$: doubled = count * 2;

当 count 变化时，doubled 自动更新。

✅ Q9: Svelte 是如何做到不需要虚拟 DOM 的？

答：
Svelte 在编译阶段就将组件转换为高效的原生 JavaScript 代码，直接操作真实 DOM，无需运行时进行虚拟 DOM diff，从而减少性能开销。

✅ Q10: Svelte 中如何绑定事件？请举例说明。

答：
使用 on:eventName={handler} 的方式绑定事件：

<script>
  function handleClick() {
    alert('按钮被点击');
  }
</script>

<button on:click={handleClick}>点击我</button>

🎯 总结：
这些问题覆盖了 Svelte 的基本语法结构、数据绑定、样式控制、事件处理等核心知识点，适合用于初级到中级前端岗位的面试准备。掌握这些内容将帮助你更高效地开发 Svelte 应用，并为进一步学习组件通信、状态管理等进阶技能打下良好基础。