Svelte 前端框架与 Runes 速查备忘单

<Student firstName="Zehan" lastName="Khan" age={23} pro={true} />

<script>
  let { firstName, lastName, age } = $props();
</script>

<h1>{firstName} {lastName} is {age}.</h1>

<script>
  let name = $state("Zehan");

  function updateName() {
    name = prompt("What is your name?") || name;
  }
</script>

<h1>{name}</h1>
<button onclick={updateName}>Update name</button>

<script>
  function handleClick(event) {
    event.preventDefault();
    alert("Hello World");
  }
</script>

<a href="#" onclick|preventDefault={handleClick}>
  Say Hi
</a>

Note: The most common event listeners are onclick and onsubmit.

<script>
  let elements = ["one", "two", "three"];
</script>

<ul>
  {#each elements as value, index}
    <li>{value}</li>
  {/each}
</ul>

<script>
  let elements = [
    { name: "one", value: 1 },
    { name: "two", value: 2 },
    { name: "three", value: 3 }
  ];
</script>

<ul>
  {#each elements as element, index}
    <li>
      The value for {element.name} is {element.value}
    </li>
  {/each}
</ul>

<script>
  let username = $state("");
  let password = $state("");

  function handleSubmit(event) {
    event.preventDefault();
    alert(`Logging in with ${username} and ${password}`);
  }
</script>

<form onsubmit={handleSubmit}>
  <input type="text" placeholder="Username" bind:value={username} />
  <input type="password" placeholder="Password" bind:value={password} />
  <input type="submit" value="Login" />
</form>

<style>
  .student {
    color: blue;
  }
</style>

<div class="student">Zehan Khan</div>

<script>
  import { onMount } from 'svelte';
  let notifications = [];
  let loading = $state(true);

  onMount(async () => {
    const res = await fetch("https://notifications.com");
    notifications = await res.json();
    loading = false;
  });
</script>

{#if loading}
  <p>Loading notifications...</p>
{:else}
  <ul>
    {#each notifications as note}
      <li>{note.title}</li>
    {/each}
  </ul>
{/if}

Note: Use onMount for side effects like API calls.

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    console.log('Component mounted');
  });
</script>

<script>
  import { beforeUpdate } from 'svelte';

  beforeUpdate(() => {
    console.log('Before component updates');
  });
</script>

<script>
  import { afterUpdate } from 'svelte';

  afterUpdate(() => {
    console.log('After component updates');
  });
</script>

<script>
  import { onDestroy } from 'svelte';

  onDestroy(() => {
    console.log('Component destroyed');
  });
</script>

Note: Svelte lifecycle functions are similar to React Hooks, but they are imported individually and used directly in the <script> block.

// store.js
import { writable, derived } from 'svelte/store';

export const count = writable(0);
export const double = derived(count, ($count) => $count * 2);

// App.svelte
<script>
  import { count, double } from './store.js';
</script>

<p>Count: {$count}</p>
<p>Double: {$double}</p>

import { readable } from 'svelte/store';

export const time = readable(new Date(), function start(set) {
  const interval = setInterval(() => {
    set(new Date());
  }, 1000);

  return function stop() {
    clearInterval(interval);
  };
});

<script>
  let a = $state(2);
  let b = $state(3);
  let sum = $derived(a + b);
</script>

<p>{sum}</p>

<script>
  let name = 'Zehan';
  $effect(() => console.log('Name changed to', name));
</script>

<script>
  let text = $state('');
</script>

<textarea bind:value={text} />
<p>{text.length} characters</p>

<script>
  let selected = $state('apple');
</script>

<label><input type="radio" bind:group={selected} value="apple" /> Apple</label>
<label><input type="radio" bind:group={selected} value="orange" /> Orange</label>
<p>Selected: {selected}</p>

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

<div class:active={isActive}>Toggle me</div>

<script>
  let size = 16;
</script>

<p style:font-size={`${size}px`}>Resizable text</p>

<script>
  let userPromise = fetch('https://jsonplaceholder.typicode.com/users/1')
    .then(res => res.json());
</script>

{#await userPromise}
  <p>Loading...</p>
{:then user}
  <p>{user.name}</p>
{:catch error}
  <p>Error: {error.message}</p>
{/await}

// +page.server.js
export async function load({ fetch }) {
  const res = await fetch('/api/data');
  const data = await res.json();
  return { data };
}

// +page.svelte
<script>
  let { data } = $props();
</script>

<h1>{data.title}</h1>

Note: Requires SvelteKit setup for SSR routes.