![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
Vue.js開発入門 ＞ Chapter 2 データを表示するとき
Vue.jsでデータを表示させる方法は、３つ用意されています。
Vueインスタンスで、用意したデータをそのまま表示するときは、マスタッシュタグ「{{ }}」を使います。
（Mustacheとは、口ひげという意味です。）
HTMLのテキストを表示する部分に
{{ データのプロパティー名 }}
と書けばOKです。
#code(html){{{
!DOCTYPE html>
html>
<head> <meta charset="UTF-8"> <title>Vue.js sample</title> <link rel="stylesheet" href="style.css"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> <h2>データをそのまま表示する例</h2> <div id="app"> <p> {{ myText }}</p> </div>
<script>
new Vue({
el: '#app',
data: {
myText:'Hello!!!'
}
})
</script>
</body>
/html>
}}}
Vur.jsでは、HTMLの要素に対して行う命令は「ディレクティブ」を使います。
Vue.jsのディレクティブとは、「要素に対してVueがどんなことを行うかを指示する命令」のことで、頭に「v-」という接頭辞が付いています。
データをそのまま表示するという機能として、「v-text」というディレクティブが用意されています。
<タグ名 v-text="表示データのプロパティー名"></タグ名>
#code(html){{{
!DOCTYPE html>
html>
<head> <meta charset="UTF-8"> <title>Vue.js sample</title> <link rel="stylesheet" href="style.css"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> <h2>データをv-textで表示する例</h2> <div id="app"> <p v-text="myText"></p> </div>
<script>
new Vue({
el: '#app',
data: {
myText:'Hello!!!'
}
})
</script>
</body>
/html>
}}}
これで<p v-text="myText"></p>の中にmyTextプロパティーの値「Hello!!!」が表示されます。
v-textというディレクティブも一応用意はされていますが、単純に文字を表示させるだけなら、マスタッシュタグで書いた方がシンプルですね。
マスタッシュタグやv-textディレクティブでは、文字をそのまま表示していますが、HTMLとして表示させるときは「v-html」ディレクティブを使います。
<タグ名 v-html="表示データのプロパティー名"></タグ名>
#code(html){{{
!DOCTYPE html>
html>
<head> <meta charset="UTF-8"> <title>Vue.js sample</title> <link rel="stylesheet" href="style.css"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> <h2>HTMLで表示する例</h2> <div id="app"> <p>{{ myText }}</p> <p v-text="myText"></p> <p v-html="myText"></p> </div>
<script>
new Vue({
el: '#app',
data: {
myText:'<h1>Hello!!!</h1>'
}
})
</script>
</body>
/html>
}}}
これをWebブラウザー（Chrome）で見ると、
HTMLで表示する例 <h1>Hello!!!</h1> <h1>Hello!!!</h1> Hello!!!
と表示されました。
マスタッシュタグとv-textでは、そのまま「<h1>Hello!!!</h1>」という文字列として表示されており、HTMLとして解釈（変換）はされていません。
しかし、v-htmlでは「<h1>Hello!!!</h1>」という文字列がHTMLとして解釈（変換）されて、大きい文字の「Hello!!!」と表示されていました。
HTMLを簡単に埋め込めるv-htmlは便利ですが、ユーザーの入力データを表示させるような局面で使うと、不正なJavaScriptコードなどを埋め込まれてしまうことも可能なので、セキュリティーが低くなります。
v-htmlを使う場合は、どんなデータが埋め込まれるのかをよく検討して、安易に使うことは避けましょう。
