Vue.js入門の方はこちら

タイトルにある通りVue.js入門ということで、今からVue.jsを学び始める方向けに、実際にVue.jsを使うとどんなことができるのかを掻い摘んで解説していきます。

今回は「Vueの基本的な使い方」、「Vue.jsの可能性を広げるディレクティブ」の二本構成で解説に入りたいと思います。

Vue.js導入

ここではVue.jsを扱う上で最低限必要な記述を説明しています。

<!-- 2の処理 -->
<div id="app">
  {{ hello }}
</div>

<!-- 1の処理 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<!-- 3の処理 -->
<script>
  new Vue({
    el: "#app",
    data: {
      hello: "こんにちは"
    }
  })
</script>

基本的な導入の流れです。

1. VueのCDNを読み込みます。
2. id="app"のdivタグ内がVue.jsの適用範囲になります。そしてマスタッシュ記号 {{ }} 内のhelloには、Vueインスタンスのdataで登録されたhelloの値を取得します。
3. Vueのインスタンスを生成します。elはVue.jsの適用範囲とするidを指定します。dataにはhtmlと連携するデータをオブジェクトに格納できます。

この場合ページには「こんにちは」と表示されます。

ディレクティブ

ディレクティブとは、接頭辞 v- が付いたVue.jsの特別な属性のことを指します。
ディレクティブを設定することで様々な機能を追加できます。

今回は主要なディレクティブを厳選して実例を交えながら解説していきます。

v-on イベント処理

ここではv-onを利用してボタンを押すとカウントアップされるような機能を実装していきます。

<div id="app">
  <p>{{ number }}</p>
  <button v-on:click="countUp">カウントアップ</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>
  new Vue({
    el: "#app",
    data: {
      number: 0,
    },
    methods: {
      countUp: function() {
        this.number = this.number + 1
      }
    }
  })
</script>

v-onを利用すると様々なイベントを設定ことができます。
今回はボタンを押してカウントアップさせる機能なので、クリックイベントを使用します。
v-on:click="countUp"をbuttonタグの属性として追加することで、Vueインスタンスに登録されたcountUpメソッドを実行します。
Vueインスタンス側にcountUpメソッドを登録するには、methodのオブジェクト内に定義してあげる必要があります。
countUpメソッドの処理の内容としては、this.numberで現在のnumberの値を取得できるので、ここでは現在の値に1を足し合わせています。

また、v-onは省略できてv-on:click="countUp"を@click="countUp"と書くこともできます。

v-if 条件分岐

ここではv-ifを利用して条件分岐の処理を実装します。

<div id="app">
  <p>{{ number }}</p>
  <button v-on:click="countUp">カウントアップ</button>
  <p v-if="number">trueだと表示されて、falseだと非表示になります。</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>
  new Vue({
    el: "#app",
    data: {
      number: 0,
    },
    methods: {
      countUp: function() {
        this.number = this.number + 1
      }
    }
  })
</script>

v-ifの値にはnumberの値をブーリアン形式で取得します。
初期値は0になっているので、この場合はfalseを値として返すため<p v-if="number">trueだと表示されて、falseだと非表示になります。</p>は非表示になります。
numberがカウントアップされるとtrueを値として返すため<p v-if="number">trueだと表示されて、falseだと非表示になります。</p>は表示にされます。

v-for 繰り返し処理

ここではv-forを利用してリストを表示します。

<div id="app">
  <ul>
    <li v-for="pref in prefs">{{ pref.name }}</li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>
  new Vue({
    el: "#app",
    data: {
      prefs: [
        { name: "北海道" },
        { name: "青森" },
        { name: "宮城" },
        { name: "秋田" },
        { name: "岩手" },
        { name: "山形" },
        { name: "福島" },
      ],
    }
  })
</script>

v-forは繰り返したい要素に設定します。今回はリストを表示したいので、liタグに属性を設定しましょう。
また予めprefsに配列でデータを格納してあげます。

v-for="pref in prefs"の処理ですが、prefsは定義されている値の数だけ繰り返し処理が実行されます。そしてprefには繰り返し一回毎の値が入っています。

マスタッシュ記号 {{ }} 内にはpref.nameとして都道府県の名前を表示してあげます。

v-bind HTML属性との連携

ここではv-bindを利用してhtml属性とVueのデータを紐付ける処理を実行します。
Vue側からhtml属性に値を渡してあげます。

<style>
  .red {
    color: red;
  }
</style>

<div id="app">
  <p v-bind:class="color">クラス名をデータ側から指定できます</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>
  new Vue({
    el: "#app",
    data: {
      color: "red"
    }
  })
</script>

v-bindを利用するとVueインスタンスのデータとhtmlの属性を連動できます。
v-bind:class="color"とすると、Vueインスタンスのcolorの値とpタグのクラス属性の値が連動します。
したがってpタグのclass属性にredが追加され、テキストが赤色になります。

ここまで学習してきた流れでいくとv-bind:class="{{ color }}"と書けばVueインスタンスのcolorの値が取得できそうですが、この記述ではエラーになってしまいます。
なぜかというと、マスタッシュ記号 {{ }} は属性の値として使用できないとVueのルールで定められているからです。

また、v-bindは省略できてv-bind:class="color"を:class="color"と書くこともできます。

v-model 双方向バインド

ここではv-modelを利用してhtmlとVueのデータの双方向の連携を実現します。

<style>
  .red {
    color: red;
  }
  .blue {
    color: blue;
  }
  .green {
    color: green;
  }
</style>

<div id="app">
  <p v-bind:class="color">データの値をhtml側から操作できます</p>
  <input type="text" v-model="color">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>
  new Vue({
    el: "#app",
    data: {
      color: "" // ブランクにしておきます
    }
  })
</script>

v-modelはhtmlとVueのデータの双方向の連携が実現できます。このディレクティブはVueの醍醐味と言っても過言ではありません。
主にformのinput要素などで使われます。

inputタグにv-model="color"属性を設定すると、input要素に入力したテキストの値をVueインスタンスのcolorの値として操作することができます。
inputタグにredを入力するとVueインスタンスのcolorの値がredになり、pタグのクラスにredが渡されテキストが赤色に変化します。

以上になります。
今回は主要なディレクティブを厳選して紹介しましたが、他にも様々なディレクティブやVue.js独自に用意されたタグなどがありますので、この際に勉強してみてはいかがでしょうか。
それではドロンとさせていただきます。