【Vue.js】5大ディレクティブの使い方まとめ
v-pre
See the Pen
v-preの使い方 by りっしー (@hiwriterprogram)
on CodePen.
v-preは、{{}}で囲ったdataの値があっても変換をしません。
そのため静的なコンテンツとして扱われます。
v-once
See the Pen
v-onceの使い方 by りっしー (@hiwriterprogram)
on CodePen.
上記の例では分かりにくいですが、v-onceは最初のhtml描画後、dataの値などが変わったとしてもその変化がhtml側に反映することがありません。
1度きりの描画なので、v-onceなのです。
v-text
See the Pen
v-textの使い方 by りっしー (@hiwriterprogram)
on CodePen.
v-textは、マスタッシュ{{}}を使わなくてもhtmlに出力ができるディレクティブです。
ただしv-textディレクティブ指定したタグの中に文字を書き込んでも、上塗りされるため注意！
v-html
See the Pen
ZgpLNx by りっしー (@hiwriterprogram)
on CodePen.
v-textと似ているのですが、v-htmlはdataの値に書き込まれたhtmlタグを変換してくれます。
一方でv-textは、タグをそのまま出力します。
v-cloak
See the Pen
v-cloakの使い方1 by りっしー (@hiwriterprogram)
on CodePen.
v-cloakは、コンパイル前のテンプレートが画面に表示されることを防ぐことができます。
Vueを使っていると、dataの値が{{}}に伝わるまで、{{ message }}などと表示されることがありますが、そのような現象をなくすことができます。
またインスタンスが生成されると、v-cloakディレクティブは消滅します。
