再Vue.jsディレクティブ学習

Vue.jsを薄く学んでいた際、v-bind、v-if、v-show、v-forなどはよく使っていました。
しかし、しっかり勉強しようとした際、知らないディレクティブが結構あったので、メモとして残します。

v-once

最初の一度だけテンプレートを評価し、その後は静的なコンテンツとする。

例

v-onceが設定されているpタグは、ボタンを押してもhogeと表示されたままとなる。

data() {
  return {
    message: 'hoge'
  }
},
methods: {
  onClick: function() {
    this.message = 'click';
  }
}

<p>{{ message }}</p>
<p v-once>{{ message }}</p>
<button v-on:click="onClick">Click</button>

主な用途

更新不要な部分を評価させず、描画更新のパフォーマンスを上げる。

注意点

ノード内の全てのバインディングに影響するが、子孫ノードには適用されず、評価＆更新される。

v-pre

ノードと子孫ノードのコンパイルをスキップする。

例

v-preが設定されているpタグは、{{ message }}がそのまま表示される。

data() {
  return {
    message: 'hoge'
  }
}

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

主な用途

ディレクティブが存在しないノードを評価させず、描画のパフォーマンスを上げる。
XSS対策。

v-cloak

関連づけられたviewModelのコンパイルが完了するまで、ノードにプロパティが残る。

例

コンパイル完了まで<p v-cloak>となり、完了後は<p>となる。
v-cloakプロパティが残存する間、cssの[v-cloak]が効いているため、pタグは表示されない。

data() {
  return {
    message: 'hoge'
  }
}

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

[v-cloak] {
  display: none;
}

主な用途

コンパイルに時間がかかる場合のチラつき防止など。

v-text

ノードのtextContentに指定したデータで更新する。
=> マスタッシュ構文と同じことをする。

本家にも

内部的には、{{ Mustache }} 挿入も textNode 上の v-text ディレクティブとしてコンパイルされます。

と書いてある。

例

v-textで指定したhogeがマスタッシュ構文の場合と同様に表示される。

<p v-text="message"></p>
{{ message }}

主な用途

あまりわからず、、

v-html

ノードのinnterHTMLを更新する。
=> html形式の文字列をテキストではなく、プレーンなhtmlとして評価する。

例

pタグのinnterHTMLにデータオブジェクトのhtmlを設定している。

data() {
  return {
    html: '<span style="color: blue;">blue</span><br/><span style="color: red;">red</span>'
  }
}

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

主な用途

サーバーサイドからのレスポンス（html形式の）をそのまま表示する場合など。

注意点

XSSの危険性があるため、信頼できるデータソースからのデータのみに使用する。
入力フォームなどに使うのはNG。