前回までテキストについてのデータとバインディングをして画面に表示する方法について学びました
scriptに書かれたmessageというプロパティと14行目の{{message}}が２６行目でインスタンスが作成されるときにバインドされ、「こんばんは」と表示されるようになりました
また、データはリアクティブであり、データが更新されるとDOMも更新されます
上のコードをブラウザで開いて、Consoleからデータを更新すると画面に表示されたテキストも更新されます
例>app.message = “こんにちは” とするとブラウザに表示された「こんばんは」というテキストが「こんにちは」に書きかわります
このように、Vueのインスタンスによってバインドされたデータはリアクティブなデータになるという特徴がありました
では、データのバインディングはテキストにのみ有効なのでしょうか
実は、HTMLのタグの属性にもデータのバインドをすることができるのです
v-bindディレクティブを使って属性へのバインドを実行しましょう
上記のコードによってHTMLのタグの要素であるtitleにデータをバインディングすることができます
その際に使われているのがv-bindと呼ばれる、Vue特有の属性になります
v-bindはディレクティブと呼ばれます
v-bind以外にもディレクティブはいくつか存在し、すべてv-の接頭辞ではじまります
これコードの場合は、titleという属性に対してmessageプロパティの内容を紐づけています
titleという属性はその要素をマウスオーバーをすることで説明が表示されるという働きをします
ここではmessageに
‘あなたがこのページを読み込んだのは ‘ + new Date().toLocaleString() + ‘です。’
という内容を設定しているので、マウスオーバーすることで、読み込んだ時点の日時が表示されるようになっています
このようにv属性と呼ばれるディレクティブを使用することで、DOMに対して特定の動作ができることになります
コメント