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に入門しやすいのではないかと思うので、この記事をぜひ参考にしてみてください！