ディレクティブによるデータアクセスv-text
データオブジェクトにアクセスするのに、({{…}}の代わりに)v-textディレクティブを利用しても構まわない。
以下コードは同じ意味である
<p>{{ message }}</p> <p v-text="message"></p>
ディレクティブとは、v~ではじまる特別な属性のこと。
directive(指令)という名前の通り、Vue.jsになんらかの指示を渡すためのしくみ。
v-textディレクティブであれば、現在の要素配下を指定された式の値で置き換える。
コードの可読性、記述の簡便さを考慮すると{{…}}のほうが良いと思われる。
文字列をHTMLとして埋め込むv-html
Vue.jsでは、式によるテキストの埋め込みにも、セキュリティ的な考慮がなされている。
hello.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>速習Vue.js</title> </head> <body> <div id="app"> <p>{{ message }}</p> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> <script src="./hello.js"></script> </html>
hello.js
var app = new Vue({ el: '#app', data: { message: '<h1>こんにちは</h1>' + '<span><a href="https://jp.vuejs.org/">Vue.js!</a></span>' } });
画面
hello.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>速習Vue.js</title>
</head>
<body>
<div id="app">
<p v-html="message"></p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="./hello.js"></script>
</html>
hello.js
var app = new Vue({ el: '#app', data: { message: '<h1>こんにちは</h1>' + '<span><a href="https://jp.vuejs.org/">Vue.js!</a></span>' } });
画面
- {{…}}式やvtextディレクティブが要素オブジェクトのtextContentプロパティを設定する。
- v-htmlディレクティブはinnerHtmlプロパティを設定する。
属性値にJavaScriptをうめこむ v-bind
属性値の操作には、v-bindディレクティブを利用する。
hello.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>速習Vue.js</title>
</head>
<body>
<div id="app">
<a v-bind:href="url">Vue.js</a>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="./hello.js"></script>
</html>
hello.js
var app = new Vue({ el: '#app', data: { url: 'https://jp.vuejs.org/' } });
「v-bind:属性名=”値”」のように、ディレクティブ名と属性名はコロン(:)区切りで表記する。
画面
プロパティ値をアプリ独自のルールで加工する 算出プロパティ
テンプレートには、{{…}}、vbindを用いることで、任意のJavaScript式を埋め込むことができる。
hello.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>速習Vue.js</title> </head> <body> <div id="app"> <p>{{ localEmail }}</p> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> <script src="./hello.js"></script> </html>
hello.js
var app = new Vue({ el: '#app', data: { email: 'yuji@example,com' }, //演算した結果を算出するプロパティ computed: { localEmail: function(){ return this.email.split('@')[0].toLowerCase(); } } });
コメント