#author("2019-08-10T15:54:43+00:00","default:sagasite","sagasite")
#author("2019-08-10T16:00:10+00:00","default:sagasite","sagasite")
[[Vue.js開発入門]] ＞ Chapter 2 データを表示するとき
#contents
*02 データをそのまま表示する：{{ データ }} [#o10fdc9e]
Vue.jsでデータを表示させる方法は、３つ用意されています。
+マスタッシュタグ「{{ }}」を使う。
+「v-text」ディレクティブを使う。
+「v-html」ディレクティブを使う。
~
**マスタッシュタグ「{{ }}」 [#m8cf437d]
Vueインスタンスで、用意したデータをそのまま表示するときは、マスタッシュタグ「{{ }}」を使います。
（Mustacheとは、口ひげという意味です。）
HTMLのテキストを表示する部分に
{{ データのプロパティー名 }}
と書けばOKです。
~
-hello1.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>データをそのまま表示する例</h2>
<div id="app">
<p> {{ myText }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
myText:'Hello!!!'
}
})
</script>
</body>
</html>
}}}
+div要素とVueインスタンスを紐づける。
+文字を表示させたい場所に、マスタッシュタグでプロパティー名を囲んで書く。
+Vueインスタンスの「data:」オプションに表示させたいデータのプロパティーを用意する。
**「v-text」ディレクティブ [#b54a9156]
***ディレクティブとは？ [#m38b94b3]
Vur.jsでは、HTMLの要素に対して行う命令は「ディレクティブ」を使います。
Vue.jsのディレクティブとは、「要素に対してVueがどんなことを行うかを指示する命令」のことで、頭に「v-」という接頭辞が付いています。
データをそのまま表示するという機能として、「v-text」というディレクティブが用意されています。
***「v-text」の書式 [#t3effb91]
<タグ名 v-text="表示データのプロパティー名"></タグ名>
-hello2.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>データを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-html」ディレクティブ [#kb894359]
マスタッシュタグやv-textディレクティブでは、文字をそのまま表示していますが、HTMLとして表示させるときは「v-html」ディレクティブを使います。
***「v-html」の書式 [#f1b26575]
<タグ名 v-html="表示データのプロパティー名"></タグ名>
-hello3.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!!!」と表示されていました。
***「v-html」の注意点 [#g39b24d1]
HTMLを簡単に埋め込めるv-htmlは便利ですが、ユーザーの入力データを表示させるような局面で使うと、不正なJavaScriptコードなどを埋め込まれてしまうことも可能なので、セキュリティーが低くなります。
v-htmlを使う場合は、どんなデータが埋め込まれるのかをよく検討して、安易に使うことは避けましょう。
