Vue.js 色々なテンプレート制御ディレクティブまとめ

v-once

初回だけテンプレートを評価し、それ以降は静的なコンテンツとして扱う

html

  <p v-once>
    {{ message }}
  </p>

• 初回表示以降、JavaScript側で変数の値を変更しても画面には反映されない
• 描画更新のパフォーマンスを上げたい時に使用する

v-pre

要素と子要素の全てのコンパイルをスキップ

html

  <p v-pre>
    {{ message }}
  </p>

• 生のMustacheタグを表示したいとき
• XSS対策
• コンパイルのスピードをあげる

v-html

プレーンなHTMLをデータオブジェクトに挿入する

html

<p v-html="message"></p>

• 主にサーバサイドから取得したHTML文書を表示する時に使用する
• XSS脆弱性を引き起こす恐れがあるため、v-htmlディレクティブは慎重に利用する
• サービスが利用するユーザが入力したコンテンツには絶対に使用しない ※Mustacheタグを使った描画では、XSS対策としてデータオブジェクトにHTMLタグを挿入しても、タグがテキストとして評価されてしまう

v-cloak

ページを表示開始してから、インスタンスの作成が終わるまでの間に、Mustacheタグなど、コンパイル前のテンプレートが表示されてしまうことを防ぐ

html

  <p v-cloak>
    {{ message }}
  </p>

css

[v-cloak] {
  display: none;
}

• チラツキを防止したい要素にv-cloakディレクティブを設定
• CSSでv-cloakがついてる要素を非表示にする
• v-cloakディレクティブは、インスタンスの準備が終わると自動的に取り除かれる