2tech今回からv-属性ディレクティブについて解説していきたいと思います。Vueではテンプレート構文として特別な属性(ディレクティブ)を用意していて、必ずv-から始まります。v-text="count"></div></template>これは上のcountと全く同じ意味になります。v-textは{{}}があるので基本的にあまり使いませんが、こういうv-から始まる独自の属性がいろいろあります。setup>からデータを引き出すと<h1>タグが適用されて表示されます。便利なのですが、セキュリティー上の問題もあります。このmessageの内容がユーザーからもらった情報(SNSのアプリなどで投稿機能がある)場合、悪意のあるユーザーが変なHTMLコードを書いていたら全てに適用されてしまいパスワードやクレジットカード情報など機密情報は漏洩してしまうリスクがあります。v-htmlを使う時の値はユーザーからもらったデータではない信頼できるデータのみを指定しましょう。dashboard</a></template>※v-bindディレクティブは超重要ですまず、このようにクリックするとZennのダッシュボードに飛ぶリンクを作ります。setup>内でref関数で文字列を定義します。dashboard</a></template>これだとうまく遷移できません。}}"こういうURLが指定されたと認識をしてしまいます。{{}}は属性の値では使えないということです。この場合にv-bindを使用します。dashboard</a></template>hrefの前にv-bind:を持ってきて、JavaScriptのようにデータを入れれば動的に使うことができます。これはidの属性でも使えます。dashboard</a></template>このようにid設定もv-bind:で動的に変えることができます。属性であればどんなものでもv-bind:をつけることで動的に値を設定することができます。簡単にいうと、基本的に普通の文字のところでは{{}}を使い、属性値ではv-bind:ディレクティブを使うという考え方でいいと思います。このv-bind:は使用頻度が高いため:で省略できます。dashboard</a></template>これでも同様に使用できますし、ESLintの方ではこちらが推奨されています。(コードの可読性を重要視しているのか?)あと、v-bind:ディレクティブの属性名と属性値の変数や定数が同じ場合はイコール以下を省略できます。dashboard</a></template>そして、この値にundefinedやnullを入れた場合はその属性が消えて存在しなくなり、他にも特定の属性にfalseを入れると消えるというものもあります(Boolean属性)。HTMLの話になりますが、値を取らなくてもいい属性がBoolean属性にあたります。ボタンタグのdisabled属性ですが、これはBoolean属性なので値を取らなくてOKです。これは存在するだけでボタンが使えなくなるという属性になります。disabled>Button</button></template>このdisabled属性に対してv-bind:ディレクティブでnullやundefinedを指定した時はdisabled属性は消えるということです。実際にundefinedを指定したらdisabledが消えてボタンが現れて使えるということです。:disabled="undefined">Button</button></template>Boolean属性にはfalse以外にも0や-0、NaNも使用できます。それ以外のtrueなどを入れた場合にdisabled属性が付くということになります。:disabled="''">Button</button>の時は消えません。disabled属性は残るので注意してください。今、このタグは2つの属性に対してv-bind:ディレクティブを適用させています。dashboard</a>ですが、v-bind:ディレクティブには一気に複数の属性に対して適用させることもできます。v-bind="{}"でオブジェクトのような書き方ですね。dashboard</a>見比べるとオブジェクトの書き方の方がわかりやすいかと思います。:disabled="''">Button</button></template>これでv-bind:ディレクティブの説明は以上です。次回はv-onディレクティブの説明をしていきます。nyan_pro主にフロント、サーバーの自分がわからないところを重点的に噛み砕いて発信していきます。復習かねて基本から書いていきますが、現在実務で使っている中級のところはX(Twitter)にて発信していきます。バッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフトカードが還元されます。バッジを贈るDiscussionnyan_pro主にフロント、サーバーの自分がわからないところを重点的に噛み砕いて発信していきます。復習かねて基本から書いていきますが、現在実務で使っている中級のところはX(Twitter)にて発信していきます。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。