【Vue.js】いつ" : "（v-bind）をつけるのか問題

vue.jsを用いて開発を進める中、":"をつけるかどうかで悩む機会があり、調べて自分なりに理解したので備忘録としてまとめます

:はv-bind:の略です。
v-bindとは、主にVue.jsのタグの中で属性やコンポーネントのpropsと一緒に使用され、右辺をJSの式として評価して結びつけてくれる仕組みです。
JSの中身が変更されると、v-bindによって要素に紐づけられた属性やpropsが自動的に変更を反映してくれます。

例えばpropsを渡す時、

<Child :data="item.value">
// :data="" は　v-bind:data="" の略称

とすることで、""の中身がJSとして評価され、動的な値を渡すことができます。
このとき、:がなければ右辺はただの文字列となります。

この考え方により、v-bindをつけるかつけないかを判別できます。

• placeholderのような、内容が変更されない値にv-bindをつける必要はない

<input placeholder="入力して下さい" ~~ >  //　⭕️　

<input :placeholder="'入力してください'"> 
// 🔺　構文として間違いじゃないけど、:をつける意味がない

• booleanを直接渡す場合でも、JSとして（文字列以外のリテラルとして）評価したい場合はv-bindが必要

<Child :hasHoge="true" />  //　⭕️　追記：指摘をもらった変数名を修正しました

// 上記でv-bindがない場合、"true"という文字列として送られてしまう（Boolean ではない点に注意）。

おわりに

Vue.jsの序盤に出てくる概念なだけに、かえって曖昧なまま進めてきた人もいるかと思います（筆者も）。お役に立てていれば幸いです。
いかがでしたでしょうか。