基本標記

在 GitHub 上編輯此頁面

標籤永久連結

小寫標籤，例如 <div>，表示一般的 HTML 元素。大寫標籤，例如 <Widget> 或 <Namespace.Widget>，表示元件。

<script>
	import Widget from './Widget.svelte';
</script>

<div>
	<Widget />
</div>

屬性和 props永久連結

預設情況下，屬性與其 HTML 對應項完全相同。

<div class="foo">
	<button disabled>can't touch this</button>
</div>

與 HTML 中相同，值可以不加引號。

<input type=checkbox />

屬性值可以包含 JavaScript 表達式。

<a href="page/{p}">page {p}</a>

或它們可以是 JavaScript 表達式。

<button disabled={!clickable}>...</button>

如果布林屬性的值為 真值，則會包含在元素中；如果為 假值，則會排除。

除非其值為 空值（null 或 undefined），否則所有其他屬性都包含在內。

<input required={false} placeholder="This input field is not required" />
<div title={null}>This div has no title attribute</div>

表達式可能包含會導致常規 HTML 中語法突顯失敗的字元，因此允許引用值。引號不會影響值的解析方式

<button disabled="{number !== 42}">...</button>

當屬性名稱和值相符時（name={name}），它們可以用 {name} 取代。

<button {disabled}>...</button>
<!-- equivalent to
<button disabled={disabled}>...</button>
-->

根據慣例，傳遞給組件的值稱為屬性或props，而不是 DOM 的特徵屬性。

與元素一樣，name={name} 可以用 {name} 簡寫取代。

<Widget foo={bar} answer={42} text="hello" />

擴散屬性允許一次將許多屬性或屬性傳遞給元素或組件。

元素或組件可以有多個擴散屬性，穿插在常規屬性中。

<Widget {...things} />

$$props 參照傳遞給組件的所有 props，包括未宣告為 export 的 props。使用 $$props 的效能不如參照特定 prop，因為任何 prop 的變更都會導致 Svelte 重新檢查 $$props 的所有用法。但在某些情況下可能很有用，例如在編譯時不知道可能會傳遞哪些 props 給組件時。

<Widget {...$$props} />

$$restProps 僅包含未以 export 宣告的屬性。它可用於將其他未知屬性傳遞給組件中的元素。與特定屬性存取相比，它具有相同的效能特性，例如 $$props。

<input {...$$restProps} />

使用 bind:group 或 bind:checked 時，input 元素或其子元素 option 元素的 value 屬性不得設定為擴充屬性。在這些情況下，Svelte 需要能夠在標記中直接看到元素的 value，以便將其連結到繫結變數。

有時，屬性順序很重要，因為 Svelte 會依序在 JavaScript 中設定屬性。例如，<input type="range" min="0" max="1" value={0.5} step="0.1"/>，Svelte 會嘗試將值設定為 1（預設步長為 1，因此從 0.5 四捨五入），然後將步長設定為 0.1。若要修正此問題，請將其變更為 <input type="range" min="0" max="1" step="0.1" value={0.5}/>。

另一個範例是 <img src="..." loading="lazy" />。Svelte 會在將 img 元素設為 loading="lazy" 之前設定 img src，這可能太晚了。將其變更為 <img loading="lazy" src="..."> 以使影像延遲載入。

文字表達式永久連結

JavaScript 表達式可以透過將其置於大括號中來包含為文字。

{expression}

大括號可以使用其 HTML 實體 字串包含在 Svelte 範本中：{、{ 或 { 代表 {，而 }、} 或 } 代表 }。

如果你使用正規表示式 (RegExp) 文字表示法，則需要將其括在括號中。

<h1>Hello {name}!</h1>
<p>{a} + {b} = {a + b}.</p>

<div>{(/^[A-Za-z ]+$/).test(value) ? x : y}</div>

註解永久連結

您可以在元件內使用 HTML 註解。

<!-- this is a comment! --><h1>Hello world</h1>

以 svelte-ignore 開頭的註解會停用下一區塊標記的警告。通常這些是無障礙警告；請確定您停用它們是有正當理由的。

<!-- svelte-ignore a11y-autofocus -->
<input bind:value={name} autofocus />