略過至主要內容
版本：0.21

HTML

html! 巨集讓你可以宣告式地撰寫 HTML 和 SVG 程式碼。這類似於 JSX（JavaScript 的延伸，讓你可以在 JavaScript 內撰寫類似 HTML 的程式碼）。

注意事項

  1. html! 巨集只接受一個根部 HTML 節點（你可以使用 片段 或 反覆運算器 來反制這個限制）
  2. 空值的 html! {} 呼叫是有效的，並且不會呈現任何東西
  3. 字面值必須始終加上引號並以大括弧括起來：html! { <p>{ "Hello, World" }</p> }
  4. html! 巨集會將所有的標籤名稱轉換成小寫。若要使用大寫字元（某些 SVG 元素需要），請使用 動態標籤名稱：html! { <@{"myTag"}></@> }
筆記

html!巨集會達到編譯器的預設遞迴限制。如果你遇到編譯錯誤，在板條箱根部加上屬性，例如#![recursion_limit="1024"]，以解決這個問題。

標籤結構​

標籤基於 HTML 標籤。元件、元素和清單都基於這個標籤語法。

標籤必須自我封閉 <... /> 或有與每個開始標籤對應的結束標籤。

use yew::prelude::*;

html! {
  <div id="my_div"></div>
};
use yew::prelude::*;

html! {
  <input id="my_input" />
};
提示

為方便起見，通常需要閉合標籤的元素允許自我封閉。例如，寫 html! { <div class="placeholder" /> } 是有效的。

子項目​

輕鬆建立複雜的巢狀 HTML 和 SVG 排版

use yew::prelude::*;

html! {
    <div>
        <div data-key="abc"></div>
        <div class="parent">
            <span class="child" value="anything"></span>
            <label for="first-name">{ "First Name" }</label>
            <input type="text" id="first-name" value="placeholder" />
            <input type="checkbox" checked=true />
            <textarea value="write a story" />
            <select name="status">
                <option selected=true disabled=false value="">{ "Selected" }</option>
                <option selected=false disabled=true value="">{ "Unselected" }</option>
            </select>
        </div>
    </div>
};

提示​

如果你使用 Rust 編譯器的新增版本來編譯 Yew，巨集會警告你可能會遇到的某些常見陷阱。當然，你可能需要使用穩定的編譯器（例如，你的組織可能強制執行此政策）來進行版本建置，但即使你使用的是穩定的工具鏈，執行 cargo +nightly check 仍然可以標示某些你可以改善 HTML 程式碼的方式。

目前，提示大部分與無障礙存取相關。如果你有提示的想法，請隨時在這個問題中提供意見。

指定屬性和特性​

屬性會以與普通 HTML 相同的方式設定在元素

use yew::prelude::*;

let value = "something";
html! { <div attribute={value} /> };

特性會在元素名稱之前指定 ~

use yew::prelude::*;

html! { <my-element ~property="abc" /> };
提示

如果值是文字，可以省略值周圍的大括號。

文字的分類

文字為 Rust 中所有有效的 文字表達式。注意 負數字並非文字，因此必須使用大括號括起來 {-6}

組件屬性

組件屬性會傳遞為 Rust 物件，且與此處說明的元素屬性/特性不同。在 組件屬性 中閱讀有關它們的詳細資訊

特殊屬性​

有些特殊屬性不會直接影響 DOM，而是做為 Yew 虛擬 DOM 的指令。目前有兩個這種特殊屬性：ref 和 key。

ref 允許你直接存取和操作底層 DOM 節點。有關詳細資訊，請參閱 參考。

另一方面，key 會為元素提供唯一識別碼，Yew 可使用它進行最佳化。

資訊

在 清單 中閱讀更多資訊

條件式呈現​

透過使用 Rust 的條件式結構，可以依照條件呈現標記。' + '目前僅支援 if 和 if let。

use yew::prelude::*;

html! {
  if true {
      <p>{ "True case" }</p>
  }
};
資訊

在 條件式呈現 中閱讀更多資訊