标签

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

  1. <script>
  2.     import Widget from './Widget.svelte';
  3. </script>
  5. <div>
  6.     <Widget />
  7. </div>

属性和属性值

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

  1. <div class="foo">
  2.     <button disabled>can't touch this</button>
  3. </div>

与 HTML 一样，值可以不使用引号。

  1. <input type=checkbox />

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

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

或者它们本身 就是 JavaScript 表达式。

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

布尔属性如果其值为 真值 则包含在元素中，如果是 假值 则排除。

所有其他属性，除非其值为 空值（null 或 undefined），否则都会包含。

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

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

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

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

  1. <button {disabled}>...</button>
  2. <!-- 等同于
  3. <button disabled={disabled}>...</button>
  4. -->

按照惯例，传递给组件的值称为 属性 或 属性值，而不是 DOM 的 属性 特性。

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

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

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

一个元素或组件可以有多个扩展属性，与普通属性交错。

  1. <Widget {...things} />

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

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

restPropsrestProps 仅包含那些没有用 export 声明的属性值。它可以用来将其他未知属性传递给组件中的元素。它与特定属性访问相比具有相同的性能特性，就像 props。

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

使用 bind:group 或 bind:checked 时，不能使用扩展属性设置 input 元素的 value 属性或其子元素 option 元素。在这些情况下，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="..."> 以使图像延迟加载。

文本表达式

可以通过用花括号包围 JavaScript 表达式来将其包含为文本。

  1. {expression}

可以通过使用它们的 HTML 实体 字符串：&lbrace;，&lcub; 或 &#123; 来表示 {，以及 &rbrace;，&rcub; 或 &#125; 来表示 }，在 Svelte 模板中包含花括号。

如果你正在使用正则表达式（RegExp）字面量表示法，你需要用括号将其包装起来。

  1. <h1>Hello {name}!</h1>
  2. <p>{a} + {b} = {a + b}.</p>
  4. <div>{(/^[A-Za-z ]+$/).test(value) ? x : y}</div>

注释

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

  1. <!-- 这是一个注释！ --><h1>Hello world</h1>

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

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