在 Svelte 中，应用程序由一个或多个组件组成。组件是一个可复用的自包含代码块，它封装了相互关联的 HTML、CSS 和JavaScript，写入 .svelte 文件中。在右侧代码编辑器中打开的 App.svelte 文件是一个简单的组件。

添加数据

一个仅渲染静态标记的组件并不是很有趣。让我们添加一些数据。

首先，在组件中添加一个脚本标签并声明一个 name 变量：

<script>
	let name = 'Svelte';
</script>

<h1>Hello world!</h1>

<script lang="ts">
	let name = 'Svelte';
</script>

<h1>Hello world!</h1>

然后，我们可以在标记中引用 name：

<h1>Hello {name}!</h1>

在大括号内，我们可以放入任何想要的 JavaScript 代码。尝试将 name 改为 name.toUpperCase() 以获得更响亮的问候语。

<h1>Hello {name.toUpperCase()}!</h1>