Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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ディレクティブは、インスタンスの準備が終わると自動的に取り除かれる
runes224
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away