Vue.js開発入門 ＞ Chapter 2 データを表示するとき
02 データをそのまま表示する：{{ データ }} †
Vue.jsでデータを表示させる方法は、３つ用意されています。
- マスタッシュタグ「{{ }}」を使う。
- 「v-text」ディレクティブを使う。
- 「v-html」ディレクティブを使う。
マスタッシュタグ「{{ }}」 †
Vueインスタンスで、用意したデータをそのまま表示するときは、マスタッシュタグ「{{ }}」を使います。
（Mustacheとは、口ひげという意味です。）
HTMLのテキストを表示する部分に
{{ データのプロパティー名 }}
と書けばOKです。
- hello1.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | |
- div要素とVueインスタンスを紐づける。
- 文字を表示させたい場所に、マスタッシュタグでプロパティー名を囲んで書く。
- Vueインスタンスの「data:」オプションに表示させたいデータのプロパティーを用意する。
「v-text」ディレクティブ †
ディレクティブとは？ †
Vur.jsでは、HTMLの要素に対して行う命令は「ディレクティブ」を使います。
Vue.jsのディレクティブとは、「要素に対してVueがどんなことを行うかを指示する命令」のことで、頭に「v-」という接頭辞が付いています。
データをそのまま表示するという機能として、「v-text」というディレクティブが用意されています。
「v-text」の書式 †
<タグ名 v-text="表示データのプロパティー名"></タグ名>
- hello2.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | |
これで<p v-text="myText"></p>の中にmyTextプロパティーの値「Hello!!!」が表示されます。
v-textというディレクティブも一応用意はされていますが、単純に文字を表示させるだけなら、マスタッシュタグで書いた方がシンプルですね。
「v-html」ディレクティブ †
マスタッシュタグやv-textディレクティブでは、文字をそのまま表示していますが、HTMLとして表示させるときは「v-html」ディレクティブを使います。
「v-html」の書式 †
<タグ名 v-html="表示データのプロパティー名"></タグ名>
- hello3.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | |
これをWebブラウザー（Chrome）で見ると、
HTMLで表示する例 <h1>Hello!!!</h1> <h1>Hello!!!</h1> Hello!!!
と表示されました。
マスタッシュタグとv-textでは、そのまま「<h1>Hello!!!</h1>」という文字列として表示されており、HTMLとして解釈（変換）はされていません。
しかし、v-htmlでは「<h1>Hello!!!</h1>」という文字列がHTMLとして解釈（変換）されて、大きい文字の「Hello!!!」と表示されていました。
「v-html」の注意点 †
HTMLを簡単に埋め込めるv-htmlは便利ですが、ユーザーの入力データを表示させるような局面で使うと、不正なJavaScriptコードなどを埋め込まれてしまうことも可能なので、セキュリティーが低くなります。
v-htmlを使う場合は、どんなデータが埋め込まれるのかをよく検討して、安易に使うことは避けましょう。
