Components

Component cơ bản

Hello {name}!

Cấu trúc Component

<script>	Logic component (JS/TS)
Markup	Template HTML với `{expressions}`
<style>	CSS có phạm vi (tự động giới hạn trong component)
<script context="module">	Chạy một lần mỗi module, không phải mỗi instance

Reactivity

Gán giá trị có tính phản ứng

Khai báo có tính phản ứng

$: đánh dấu các khai báo và câu lệnh có tính phản ứng

Quy tắc Reactivity

Assignment triggers	`count += 1` kích hoạt cập nhật; `obj.x = 1` cũng vậy
Array mutation	Dùng `arr = [...arr, item]` (gán lại để kích hoạt)
$: declaration	Tự động tính lại khi các biến phụ thuộc thay đổi
$: statement	Chạy side effects có tính phản ứng

Props

Khai báo & Truyền Props

{greeting}, {name}!

Spread Props

Events

DOM Events

value = e.target.value} />

Event Modifiers

preventDefault	Gọi `e.preventDefault()`
stopPropagation	Ngừng event bubbling
once	Handler chỉ kích hoạt một lần
self	Chỉ khi `event.target` là chính phần tử đó
capture	Dùng capture phase

Component Events

Bindings

Binding hai chiều

Binding phần tử & Component

Các loại Binding

bind:value	Giá trị input/select/textarea
bind:checked	Trạng thái checkbox
bind:group	Nhóm radio/checkbox
bind:this	Tham chiếu phần tử DOM
bind:clientWidth/Height	Kích thước phần tử chỉ đọc

Stores

Writable Store

// store.js import { writable } from "svelte/store"; export const count = writable(0); // Component — auto-subscribe with $

Phương thức Store

count.set(10);               // set value
count.update(n => n + 1);    // update from current
const unsub = count.subscribe(v => console.log(v));

Các loại Store

writable(val)	Store đọc-ghi
readable(val, fn)	Chỉ đọc, thiết lập bởi hàm start
derived(stores, fn)	Tính toán từ các stores khác
$store	Cú pháp auto-subscribe trong components

Transitions

Transitions tích hợp

{#if visible}Fades in/out
Fly in, fade out

{/if}

Tùy chọn Transition

fade	Opacity từ 0 đến 1
fly	Hoạt ảnh offset x/y + opacity
slide	Trượt vào/ra (chiều cao)
scale	Phóng to và mờ dần
draw	Hoạt ảnh stroke SVG path
duration	Thời gian transition tính bằng ms
delay	Độ trễ trước khi bắt đầu

Slots

Slot mặc định & có tên

Default header Default content

Title

Body content goes here

Slot Props

{#each items as item} {/each}

{index}: {item.name}

Context

Set & Get Context

Context vs Stores

Context	Phạm vi theo cây component, không có tính phản ứng mặc định
Stores	Toàn cục, có tính phản ứng, có thể import mọi nơi
Context + Store	Truyền store qua context để có reactivity theo phạm vi

Cơ bản về SvelteKit

Routing theo file

src/routes/
  +page.svelte          
  about/+page.svelte    
  blog/[slug]/+page.svelte  

Hàm Load

// +page.js (runs on client & server)
export async function load({ params, fetch }) {
  const res = await fetch(`/api/posts/${params.slug}`);
  return { post: await res.json() };
}

Các file quan trọng

+page.svelte	Component trang
+page.js / +page.ts	Hàm load phía client/universal
+page.server.js	Load chỉ phía server / form actions
+layout.svelte	Wrapper layout dùng chung
+error.svelte	Trang lỗi
+server.js	API endpoint (GET, POST, ...)

THAM KHẢO NHANH SVELTE

Hello {name}!

Title