基本标记

标签(Tags)permalink

小写标签（如 <div>）表示常规 HTML 元素。 大写的标签（例如 <Widget> 或 <Namespace.Widget>）表示一个组件。

英A lowercase tag, like <div>, denotes a regular HTML element. A capitalised tag, such as <Widget> or <Namespace.Widget>, indicates a component.

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

<div>
	<Widget />
</div>

属性和参数(Attributes and props)permalink

默认情况下，属性的工作方式与其 HTML 对应项完全相同。

英By default, attributes work exactly like their HTML counterparts.

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

与 HTML 中一样，值可以不加引号。

英As in HTML, values may be unquoted.

<input type=checkbox />

属性值可以包含 JavaScript 表达式。

英Attribute values can contain JavaScript expressions.

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

或者它们可以是 JavaScript 表达式。

英Or they can be JavaScript expressions.

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

如果布尔属性的值为 truthy，则包含在元素中；如果值为 falsy，则排除元素。

英Boolean attributes are included on the element if their value is truthy and excluded if it's falsy.

包括所有其他属性，除非其值为 nullish（null 或 undefined）。

英All other attributes are included unless their value is nullish (null or undefined).

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

表达式可能包含会导致常规 HTML 中语法高亮失败的字符，因此允许引用该值。 引号不影响值的解析方式：

英An expression might include characters that would cause syntax highlighting to fail in regular HTML, so quoting the value is permitted. The quotes do not affect how the value is parsed:

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

当属性名称和值匹配（name={name}）时，可以将其替换为 {name}。

英When the attribute name and value match (name={name}), they can be replaced with {name}.

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

按照惯例，传递给组件的值被称为属性或属性，而不是属性，这是 DOM 的一个功能。

英By convention, values passed to components are referred to as properties or props rather than attributes, which are a feature of the DOM.

与元素一样，name={name} 可以替换为 {name} 简写。

英As with elements, name={name} can be replaced with the {name} shorthand.

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

扩展属性允许将许多属性或属性一次传递到元素或组件。

英Spread attributes allow many attributes or properties to be passed to an element or component at once.

一个元素或组件可以具有多个散布属性，这些属性散布在常规属性中。

英An element or component can have multiple spread attributes, interspersed with regular ones.

<Widget {...things} />

$props 引用传递给组件的所有属性，包括未使用 export 声明的属性。 使用 $props 的性能不如对特定 prop 的引用，因为对任何 prop 的更改都会导致 Svelte 重新检查 $props 的所有用法。 但在某些情况下它可能很有用 – 例如，当你在编译时不知道哪些 props 可能会传递给组件时。

英$$props references all props that are passed to a component, including ones that are not declared with export. Using $$props will not perform as well as references to a specific prop because changes to any prop will cause Svelte to recheck all usages of $$props. But it can be useful in some cases – for example, when you don't know at compile time what props might be passed to a component.

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

$restProps 仅包含未使用 export 声明的 props。 它可用于将其他未知属性传递给组件中的元素。 与 $props 相比，它与特定属性访问具有相同的性能特性。

英$$restProps contains only the props which are not declared with export. It can be used to pass down other unknown attributes to an element in a component. It shares the same performance characteristics compared to specific property access as $$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（从 0.5 向上舍入，因为步长默认为 1），然后将步长设置为 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="..."> 以使图片延迟加载。

文本表达式(Text expressions)permalink

JavaScript 表达式可以通过用大括号括起来作为文本包含在内。

英A JavaScript expression can be included as text by surrounding it with curly braces.

{expression}

可以使用大括号的 HTML 实体 字符串将大括号包含在 Svelte 模板中： {、{ 或 { 对应 {，}、} 或 } 对应 }。

英Curly braces can be included in a Svelte template by using their HTML entity strings: {, {, or { for { and }, }, or } for }.

如果你使用正则表达式 (RegExp) 字面表示法，则需要将其括在括号中。

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

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

注释(Comments)permalink

你可以在组件内使用 HTML 注释。

英You can use HTML comments inside components.

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

以 svelte-ignore 开头的注释禁用下一个标记块的警告。 通常，这些是可访问性警告； 确保你出于充分的理由禁用它们。

英Comments beginning with svelte-ignore disable warnings for the next block of markup. Usually, these are accessibility warnings; make sure that you're disabling them for a good reason.

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