HTMLとCSSは書けるJavaScript初心者が、覚えたてのVue.jsの基本ディレクティブについて解説した記事です！
Vue.js興味あるけど何から覚えればいいの？という方の参考になればうれしいです。
Vue.jsとは
Vue.jsは、データの変更に応じて自動的にDOMを更新し、表示や動作を変えることができるJavaScriptフレームワークです。データを変更すると自動的にUIに反映され、DOMを操作する必要がほとんどありません。
そのため、HTMLテンプレート内で条件分岐や動的なコンテンツの制御が可能になります。
私のようなJavaScript初心者にとっては、馴染みのあるHTMLの書き方でプログラミングっぽいことができるので、取っつきやすいのではないかと思います！
最初に覚えるべき2つのディレクティブ機能
ディレクティブを使えば、HTML要素に特定の動作を追加することができます。
Vue.js初心者が最初に覚えるべき2つのディレクティブについて説明します。
1．条件によってコンテンツを出しわける（v-if）
条件によって要素の表示を切り替えたい、ということありませんか？
例えば、在庫の有無で表示を切り替えたいとか。
そんな時に、v-ifのディレクティブが使えます。
v-if="条件式"
以下は商品の在庫の有無で、金額部分の表示を切り替える場合の記述例です。
<!-- 在庫の有無で表示テキストを切り替える -->
<div id="sample">
<!-- 在庫がない場合 -->
<p v-if="stock === 0" class="price_outofstock">売り切れ</p>
<!-- 在庫がある場合 -->
<p v-else class="price">{{price}}円</p>
</div>
<script>
new Vue({
el: '#sample',
data: {
stock: 0, // 在庫数をここで設定
price: 2500 // 商品の価格をここで設定
}
});
</script>
上記では、ストックが0の場合（v-if="stock === 0"）は売り切れ、それ以外（v-else）は金額を表示、という条件分岐を行っています。
scriptタグ内のpriceが更新されると、HTMLの{{price}}円も更新されます。
■v-ifとv-showの違い
v-ifの他にv-showという種類もあります。
どちらも表示・非表示を切り替えるディレクティブですが、条件に一致しない場合、v-ifの要素はそもそもDOMにレンダリングされないのに対し、v-showの要素はdisplay: noneで非表示になります。
はじめからDOMに存在することが前提の要素をv-ifで出しわけてしまうと不具合の元なので、そんなときはv-showを使うと安心です。
また、v-showだとtemplateタグが使えないので注意です。
2．属性を動的に変える（v-bind:）
この条件に合致するときだけここのスタイルを変えたい、ということありませんか？
例えば、必須項目がすべて入力されたときにボタンの色をグレーから緑に変えたいとか。
vue.jsなら、バインディング機能で動的にスタイルを変更できます。
v-bind:属性名="条件式"
以下は条件によってdisabled属性をつけ、ボタンの色を動的に変える場合の記述例です。
<!-- disabledの有無でボタンの色を変える -->
<!-- ※「isFormComplete」は関数例です -->
<div id="app">
<!-- ボタンのスタイルを動的に変更 -->
<button
v-bind:disabled="!isFormComplete"
class="form_button"
type="button"
>
<span>この内容で申し込む</span>
</button>
</div>
<style>
/* ボタンのスタイル */
.form_button {
margin: 20px auto 40px;
padding: 20px;
position: relative;
text-align: center;
width: 100%;
}
/* ボタンが無効な状態 */
.form_button[disabled] {
background: gray;
cursor: no-drop;
}
/* ボタンが有効な状態 */
.form_button:not([disabled]) {
background: green;
}
</style>
※isFormCompleteは関数の例で、関数の記述は割愛しています。
v-bind:部分で、!isFormComplete（フォーム入力が完了していない）場合に、ボタンにdisabled属性がつけるという動作を行っています。（!は否定の意味です）
すべてが入力されるとdisabledが外れ、ボタンが有効化されます。
それらがDOMに出力されると以下のような記述になります。
<!-- ボタンが無効な状態 -->
<button class="form_button" type="button" disabled>
<span>この内容で申し込む</span>
</button>
<!-- ボタンが有効な状態 -->
<button class="form_button" type="button">
<span>この内容で申し込む</span>
</button>
これはクラス名でも同様のことが可能です。
以下は条件によって動的にクラスをつける場合の記述例です。
<!-- クラスをつけてボタンの色を変える -->
<button
v-bind:class="{ 'disabled-button': !isFormComplete }"
class="form_button"
type="button"
>
<span>この内容で申し込む</span>
</button>
<style>
/* ボタンのスタイル */
.form_button {
margin: 20px auto 40px;
padding: 20px;
position: relative;
text-align: center;
width: 100%;
background: green;
}
/* ボタンが無効な状態 */
.disabled-button {
background: gray;
cursor: no-drop;
}
</style>
こちらの場合、v-bind:の条件に一致する場合と.disabled-buttonのクラスが動的に入ります。
Vue.jsは仕組みがわかるとかなり便利！
Vue.jsは見た目がわかりやすい一方で、JavaScriptのデータが更新されると画面も更新されるリアクティブな仕組みなので、それを理解するのがかなり難しいです。
HTML要素とデータの依存関係をちゃんと理解・整理できるようになると、かなり便利なフレームワークなのではないかと思います！（私はまだ勉強中です…）
初心者の方は、ぱっと見わかりやすいディレクティブから覚えると、Vue.jsに入門しやすいのではないかと思うので、この記事をぜひ参考にしてみてください！