Vue3 v-bindディレクティブの使い方  属性のデータバインドについて

前回までテキストについてのデータとバインディングをして画面に表示する方法について学びました

scriptに書かれたmessageというプロパティと14行目の{{message}}が26行目でインスタンスが作成されるときにバインドされ、「こんばんは」と表示されるようになりました

また、データはリアクティブであり、データが更新されると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に対して特定の動作ができることになります

コメント

タイトルとURLをコピーしました