Introduction-to-Vuejs-Development_2-02
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[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/di...
</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-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/di...
</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プロパティーの値...
v-textというディレクティブも一応用意はされていますが、単...
**「v-html」ディレクティブ [#kb894359]
マスタッシュタグやv-textディレクティブでは、文字をそのま...
***「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/di...
</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>...
しかし、v-htmlでは「<h1>Hello!!!</h1>」という文字列がHTML...
***「v-html」の注意点 [#g39b24d1]
HTMLを簡単に埋め込めるv-htmlは便利ですが、ユーザーの入力...
v-htmlを使う場合は、どんなデータが埋め込まれるのかをよく...
終了行:
[[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/di...
</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-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/di...
</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プロパティーの値...
v-textというディレクティブも一応用意はされていますが、単...
**「v-html」ディレクティブ [#kb894359]
マスタッシュタグやv-textディレクティブでは、文字をそのま...
***「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/di...
</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>...
しかし、v-htmlでは「<h1>Hello!!!</h1>」という文字列がHTML...
***「v-html」の注意点 [#g39b24d1]
HTMLを簡単に埋め込めるv-htmlは便利ですが、ユーザーの入力...
v-htmlを使う場合は、どんなデータが埋め込まれるのかをよく...
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
