Vueアプリで生のHTMLをレンダリングする

それほど頻繁ではありませんが、文字列として格納された生のHTMLをDOMに挿入する必要がある理由が実際にある場合があります。 もちろん、めったにありません。 ほとんどの場合、これを行うべきではありません。これにより、さまざまなXSS攻撃が発生する可能性があります。 やや有効なユースケースは、（ shudders ）が長い間忘れられていたサーバールームの古いデータベースにデータと混合されたHTMLを保存する古代のレガシーシステムの新しいフロントエンドコンポーネントを作成している場合です。一部のリース施設の北部。 その場合、アプリで生のHTMLをレンダリングする必要があるかもしれません。

それでは始めましょう。 まず最初に、正規表現スキルを解き放ちます…

冗談だ。 レガシーシステムに対応するためだけに、既知の宇宙の運命を危険にさらしたくはありません。

とにかく、Vueは私たちのためにこれらすべてを処理できる素敵な小さなディレクティブを提供してくれることがわかりました。 予想通り、それはv-htmlと呼ばれています。

これを使用するには、次のように、データモデルのHTML文字列への参照をコンポーネントテンプレートのv-htmlに渡します。

<template>
  <div v-html="legacySystemHTML">
  </div>
</template>

<script>
export default {
  data() {
    return {
      // Just like JSX! Oh wait...
      legacySystemHTML: `
        <FONT color="#faddad" size="-2">
          <MARQUEE>Please enter your name to continue.</MARQUEE>
          ...
        </FONT>
      `
    }
  }
}
</script>

そして、まさにそのように、HTMLがコンポーネントにレンダリングされます。 legacySystemHTMLプロパティを更新すると、それに応じてHTMLが更新されます。

悪くない！

---

また、ここに少し関連した秘密があります。 v-textプロパティは、要素のテキストコンテンツのみを設定することを除いて、同じ方法で使用できます。

…

代わりにMustache式（テンプレート:ComponentInnerText）を使用できるのに、なぜそれを使用するのかわかりませんが、それはあります！