框架集成：19 Svelte模板与HTM - 详细教程与实战指南

<!-- 插值 -->
<h1>{title}</h1>
<p>{user.name} - {user.email}</p>
<p>{count * 2}</p>
<p>{isActive ? '激活' : '未激活'}</p>

<!-- 属性绑定 -->
<img src={imageUrl} alt={imageAlt} />
<!-- 简写：属性名与变量名相同时 -->
<img {src} {alt} />

<!-- HTML属性 -->
<div class="card {isActive ? 'active' : ''}"></div>
<div class="card {isActive && 'active'} {isDisabled && 'disabled'}"></div>

<!-- style绑定 -->
<div style="color: {textColor}; font-size: {fontSize}px;"></div>
<div style="color: {textColor}" style:font-size="{fontSize}px"></div>

<!-- 事件绑定 -->
<button on:click={handleClick}>点击</button>
<button on:click={() => count += 1}>+1</button>
<button on:click|once={handleClick}>只触发一次</button>
<button on:click|preventDefault={handleSubmit}>阻止默认</button>

<!-- 事件修饰符（可链式） -->
on:click|stopPropagation|preventDefault={handler}
on:submit|preventDefault={onSubmit}
on:keydown|enter={onEnter}

<!-- 双向绑定 -->
<input bind:value={name} />
<textarea bind:value={bio}></textarea>
<input type="checkbox" bind:checked={agree} />
<input type="range" bind:value={level} min="0" max="10" />
<select bind:value={selected}>
  <option value="a">A</option>
  <option value="b">B</option>
</select>

<!-- 绑定this（获取DOM引用） -->
<input bind:this={inputEl} />
// script中: let inputEl;
// onMount(() => inputEl.focus());

<!-- 基本条件 -->
{#if count > 10}
  <p>计数超过10</p>
{:else if count > 5}
  <p>计数在5-10之间</p>
{:else}
  <p>计数在5以下</p>
{/if}

<!-- 简洁条件（内联） -->
<p>{count > 0 ? '正数' : '非正数'}</p>

<!-- 逻辑与（类似React） -->
{#if items.length > 0}
  <ul>
    {#each items as item}
      <li>{item.name}</li>
    {/each}
  </ul>
{/if}

<!-- 基本列表 -->
<ul>
  {#each items as item}
    <li>{item.name}</li>
  {/each}
</ul>

<!-- 带索引 -->
{#each items as item, i}
  <li>{i + 1}. {item.name}</li>
{/each}

<!-- 带key（推荐，帮助diff） -->
{#each items as item (item.id)}
  <li>{item.name}</li>
{/each}

<!-- 带索引和key -->
{#each items as item, i (item.id)}
  <li>{i}. {item.name}</li>
{/each}

<!-- else分支（列表为空时） -->
{#each items as item}
  <li>{item.name}</li>
{:else}
  <li>暂无数据</li>
{/each}

<!-- 嵌套列表 -->
{#each categories as category}
  <h3>{category.name}</h3>
  <ul>
    {#each category.items as item}
      <li>{item.name}</li>
    {/each}
  </ul>
{/each}

<!-- 基本异步 -->
{#await fetchData()}
  <p>加载中...</p>
{:then data}
  <p>数据: {data.name}</p>
{:catch error}
  <p>错误: {error.message}</p>
{/await}

<!-- 只处理成功 -->
{#await fetchData() then data}
  <p>数据: {data.name}</p>
{/await}

<!-- 分离Promise和结果 -->
<script>
  let promise = fetchData();
  async function fetchData() {
    const res = await fetch('/api/data');
    return res.json();
  }
  function reload() {
    promise = fetchData();  // 重新赋值触发更新
  }
</script>

{#await promise}
  <p>加载中...</p>
{:then data}
  <p>{data.name}</p>
  <button on:click={reload}>刷新</button>
{:catch error}
  <p>出错了: {error}</p>
  <button on:click={reload}>重试</button>
{/await}

<!-- Store使用 -->
<script>
  import { writable, derived } from 'svelte/store';

  // 创建writable store
  const count = writable(0);

  // 创建derived store
  const doubled = derived(count, $count => $count * 2);

  // 组件内使用$前缀自动订阅
  function increment() {
    $count += 1;  // $前缀自动订阅和更新
  }
</script>

<p>计数: {$count}</p>
<p>双倍: {$doubled}</p>
<button on:click={increment}>+1</button>
<button on:click={() => $count -= 1}>-1</button>

<!-- 插槽(Slot) -->
<!-- Card.svelte -->
<div class="card">
  <div class="header">
    <slot name="header">默认标题</slot>
  </div>
  <div class="body">
    <slot>默认内容</slot>
  </div>
  <div class="footer">
    <slot name="footer"></slot>
  </div>
</div>

<!-- 使用 -->
<Card>
  <svelte:fragment slot="header">
    <h3>自定义标题</h3>
  </svelte:fragment>
  <p>卡片内容</p>
  <button slot="footer">底部按钮</button>
</Card>

<!-- svelte:head（设置head内容） -->
<svelte:head>
  <title>{pageTitle}</title>
  <meta name="description" content={description} />
</svelte:head>

<!-- svelte:window（监听窗口事件） -->
<svelte:window on:resize={handleResize} on:keydown={handleKeydown} />

<!-- svelte:body（监听body事件） -->
<svelte:body on:mouseenter={handleMouseEnter} />

<!-- svelte:element（动态元素） -->
<svelte:element this={tagType}>
  动态元素内容
</svelte:element>

<!-- $: 响应式声明 -->
<script>
  let firstName = '张';
  let lastName = '三';

  // 响应式计算
  $: fullName = firstName + lastName;
  $: nameLength = fullName.length;

  // 响应式语句（副作用）
  $: console.log('姓名变化:', fullName);

  // 响应式块
  $: {
    console.log('firstName:', firstName);
    console.log('lastName:', lastName);
    console.log('fullName:', fullName);
  }

  // 响应式条件
  $: if (nameLength > 10) {
    console.log('名字太长了!');
  }

  // 响应式依赖声明（Svelte 5+使用$derived和$effect）
  // Svelte 4:
  $: filtered = items.filter(i => i.active);

  // Svelte 5 (runes):
  let filtered = $derived(items.filter(i => i.active));
  $effect(() => {
    console.log('items changed:', items);
  });
</script>

<!-- 注意：响应式声明的限制 -->
<!-- Svelte通过静态分析确定依赖，以下写法可能无法正确追踪 -->

// 不推荐：函数调用隐藏依赖
function getActive() { return items.filter(i => i.active); }
$: active = getActive();  // Svelte可能无法追踪items变化

// 推荐：直接在响应式声明中写表达式
$: active = items.filter(i => i.active);

// 不推荐：动态键访问
$: value = obj[key];  // key变化时可能不更新

// 推荐：显式声明依赖
$: key, value = obj[key];

<!-- 不推荐：{#each}不加key -->
{#each items as item}
  <li>{item.name}</li>
{/each}

<!-- 推荐：带key -->
{#each items as item (item.id)}
  <li>{item.name}</li>
{/each}

<!-- 不推荐：复杂内联表达式 -->
<p>{items.filter(i => i.active).map(i => i.name).join(', ')}</p>

<!-- 推荐：使用响应式声明 -->
<script>
  $: activeNames = items.filter(i => i.active).map(i => i.name).join(', ');
</script>
<p>{activeNames}</p>

<!-- 不推荐：手动订阅Store -->
import { count } from './stores';
const unsubscribe = count.subscribe(value => { ... });
onDestroy(unsubscribe);

<!-- 推荐：使用$前缀自动订阅 -->
<script>
  import { count } from './stores';
</script>
<p>{$count}</p>