Svelte基础教程

没有特殊说明，下面的每个例子均是一个单独的 .svelte 文件。

# 基础篇

# 最基础的例子

输出 Hello world。

<h1>Hello world!</h1>
htmlcopy success

# 动态数据

不想跟 world 打招呼了，想跟别人打招呼。

<script>
  const name = 'realign';
</script>

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

# 动态属性

给打招呼的人加个头像。

<script>
  const name = 'realign';
  const avatar = 'https://svelte.dev/favicon.png';
</script>

<h1>Hello {name}!</h1>
<img src={avatar} alt="" />
htmlcopy success

# 样式渲染

给头像设置大小跟边框。

<script>
  const name = 'realign';
  const avatar = 'https://svelte.dev/favicon.png';
</script>

<h1>Hello {name}!</h1>
<img src={avatar} alt="" />

<style>
img {
  width: 30px;
  border: 1px solid #ff3e00;
}
</style>
htmlcopy success

# 头像单独放

想把头像单独抽离，给不欢迎的人的名单用。

<!-- avatar.svelte -->
<script>
  const avatar = 'https://svelte.dev/favicon.png';
</script>

<img src={avatar} alt="" />

<style>
img {
  width: 30px;
  border: 1px solid #ff3e00;
}
</style>
htmlcopy success

<!-- main.svelte -->
<script>
  import Avatar from './avatar.svelte';

  const name = 'realign';
</script>

<h1>Hello {name}!</h1>
<Avatar />
htmlcopy success

未完，待完善...