Vue.js入門の方はこちら

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

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

#Vue.js導入

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

```html
<!-- 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`を利用してボタンを押すとカウントアップされるような機能を実装していきます。

[![Image from Gyazo](https://i.gyazo.com/31f281bdf99cf6dbf43328f4818da2a8.gif)](https://gyazo.com/31f281bdf99cf6dbf43328f4818da2a8)

```html
<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`を利用して条件分岐の処理を実装します。

[![Image from Gyazo](https://i.gyazo.com/11e484a5af4c0d3a2b4693b04213ed08.gif)](https://gyazo.com/11e484a5af4c0d3a2b4693b04213ed08)

```html
<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`を利用してリストを表示します。

[![Image from Gyazo](https://i.gyazo.com/8f33b00397ad721c30dcdb92d387e6ce.png)](https://gyazo.com/8f33b00397ad721c30dcdb92d387e6ce)

```html
<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属性に値を渡してあげます。

[![Image from Gyazo](https://i.gyazo.com/2f553dd116444297fb230820ef241fc5.png)](https://gyazo.com/2f553dd116444297fb230820ef241fc5)

```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のデータの双方向の連携を実現します。

[![Image from Gyazo](https://i.gyazo.com/f916afad649fff1c301ef58da14e7c51.gif)](https://gyazo.com/f916afad649fff1c301ef58da14e7c51)

```html

<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独自に用意されたタグなどがありますので、この際に勉強してみてはいかがでしょうか。
それではドロンとさせていただきます。