はじめてのVue.js(v-on, v-if, v-bind, props)

# はじめに
業務でVue.jsに触れる機会があったので、[Vue.jsのチュートリアル](https://jp.vuejs.org/)で学んだ内容をまとめました。

https://jp.vuejs.org/

## 学んだこと
- Vue.jsを使ってHelloVue！の表示
- Buttonの実装
- 条件分岐の実装
- Buttonと条件分岐の組み合わせ
- ループ処理の実装
- コンポーネント化
- 値の受け渡しにpropsを使ってみる

## Vue.jsのメリット

- HTML要素を部品化できる
    - コピペの駆逐
    - メンテナンスが楽になる
- 学習コストが低い

# 学習に必要なスキル
* HTML
* CSS
* JavaScript

## インストール
Vue が使えるように下記を```<head>```内に記載します.
```vuejs:環境構築.html
!-- 開発バージョン、便利なコンソールの警告が含まれています -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
```

## Hello Vue！を表示してみる

下記のコードを書いてあげると画面にHello Vue!が表示されます。
```<body>```タグ内で{{}}を使って、Vueで表示したい箇所を囲ってあげます。

```<script>```タグ内にVue.jsのコードを書いていきます。
```el```で要素を指定
```data```に表示したい値を記載する

```vuejs:環境構築.html
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- 開発バージョン、便利なコンソールの警告が含まれています -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">{{ message }}</div>
  </body>

  <script>
    var app = new Vue({
      el: "#app",
      data: {
        message: "Hello Vue!",
      },
    });
  </script>
</html>
```

![スクリーンショット 2022-08-23 18.40.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/3333af62-284d-a8b7-def8-a25371f1525a.png)


## Buttonを実装してみる
カウントアップのコードを実装してみました。
buttonイベントを定義するときは、```v-on:click```を使います。

```vuejs:環境構築.html
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- 開発バージョン、便利なコンソールの警告が含まれています -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">{{ message }}</div>

    <div id="app-2">
      <p>{{ count }}</p>
      <button v-on:click="CountUp">Count Up</button>
    </div>
  </body>

  <script>
    var app = new Vue({
      el: "#app",
      data: {
        message: "Hello Vue!",
      },
    });

    var app2 = new Vue({
      el: "#app-2",
      data: {
        count: 0,
      },
      methods: {
        CountUp: function () {
          this.count += 1;
        },
      },
    });
  </script>
</html>

```

![スクリーンショット 2022-08-23 18.55.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/c6d542f0-0758-ece2-7d46-feee8d0bd3eb.png)

## 条件分岐を書いてみる
if文を記載するときは、```v-if```を使います。
elseは```v-else```と書きます。

```vuejs:環境構築.html
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- 開発バージョン、便利なコンソールの警告が含まれています -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">{{ message }}</div>

    <div id="app-2">
      <p>{{ count }}</p>
      <button v-on:click="CountUp">Count Up</button>
    </div>

    <div id="app3">
      <p v-if="seen">Now you see me</p>
      <p v-else="seen">Now you don't</p>
    </div>
  </body>

  <script>
    var app = new Vue({
      el: "#app",
      data: {
        message: "Hello Vue!",
      },
    });

    var app2 = new Vue({
      el: "#app-2",
      data: {
        count: 0,
      },
      methods: {
        CountUp: function () {
          this.count += 1;
        },
      },
    });

    var app3 = new Vue({
      el: "#app3",
      data: {
        seen: true,
      },
    });
  </script>
</html>

```

![スクリーンショット 2022-08-23 19.54.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/836c288a-3127-b12c-d796-7ffe7f1cba63.png)

### Buttonと条件分岐の組み合わせ
これまでのおさらいとして、buttonとifを組み合わせたコードを書いてみます。
Buttonが押されると文字が変わるコードを書いててみます。

```vuejs:環境構築.html
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- 開発バージョン、便利なコンソールの警告が含まれています -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">{{ message }}</div>

    <div id="app-2">
      <p>{{ count }}</p>
      <button v-on:click="CountUp">Count Up</button>
    </div>

    <div id="app3">
      <p v-if="seen">Now you see me</p>
      <p v-else="seen">Now you don't</p>
      <button v-on:click="change">表示切り替え</button>
    </div>
  </body>

  <script>
    var app = new Vue({
      el: "#app",
      data: {
        message: "Hello Vue!",
      },
    });

    var app2 = new Vue({
      el: "#app-2",
      data: {
        count: 0,
      },
      methods: {
        CountUp: function () {
          this.count += 1;
        },
      },
    });

    var app3 = new Vue({
      el: "#app3",
      data: {
        seen: true,
      },
      methods: {
        change: function () {
          this.seen = !this.seen;
        },
      },
    });
  </script>
</html>

```
表示切り替えButtonを押すと文字が変わりました。
![スクリーンショット 2022-08-23 20.02.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/ae388c4f-0021-0136-6ddf-5cb52b971fa3.png)

## 属性の設定　

class設定等、属性の値を変更する際は、```v-bind```を使います。

```vuejs:環境構築.html
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- 開発バージョン、便利なコンソールの警告が含まれています -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <style>
      .blue {
        color: blue;
      }
      .red {
        color: red;
      }
    </style>
    <div id="app">{{ message }}</div>

    <div id="app-2">
      <p>{{ count }}</p>
      <button v-on:click="CountUp">Count Up</button>
    </div>

    <div id="app3">
      <p v-if="seen">Now you see me</p>
      <p v-else="seen">Now you don't</p>
      <button v-on:click="change">表示切り替え</button>
    </div>

    <div id="app4">
      <p v-bind:class="class1">あいうえお</p>
      <!-- 省略記法 -->
      <p :class="class1">あいうえお</p>
    </div>
  </body>

  <script>
    var app = new Vue({
      el: "#app",
      data: {
        message: "Hello Vue!",
      },
    });

    var app2 = new Vue({
      el: "#app-2",
      data: {
        count: 0,
      },
      methods: {
        CountUp: function () {
          this.count += 1;
        },
      },
    });

    var app3 = new Vue({
      el: "#app3",
      data: {
        seen: true,
      },
      methods: {
        change: function () {
          this.seen = !this.seen;
        },
      },
    });

    var app4 = new Vue({
      el: "#app4",
      data: {
        class1: "blue",
      },
    });
  </script>
</html>

```

![スクリーンショット 2022-08-23 20.14.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/7016e874-a2a3-4290-02a0-f5cb8e46ecbf.png)

## ループ処理を書いてみる
ループ処理を書くときは、```v-for```を使います。

```vuejs:環境構築.html
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- 開発バージョン、便利なコンソールの警告が含まれています -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <style>
      .blue {
        color: blue;
      }
      .red {
        color: red;
      }
    </style>
    <div id="app">{{ message }}</div>

    <div id="app-2">
      <p>{{ count }}</p>
      <button v-on:click="CountUp">Count Up</button>
    </div>

    <div id="app3">
      <p v-if="seen">Now you see me</p>
      <p v-else="seen">Now you don't</p>
      <button v-on:click="change">表示切り替え</button>
    </div>

    <div id="app4">
      <p v-bind:class="class1">あいうえお</p>
      <!-- 省略記法 -->
      <p :class="class1">あいうえお</p>
    </div>

    <div id="app5">
      <p v-for="todo in todos">{{todo.text}}</p>
    </div>
  </body>

  <script>
    var app = new Vue({
      el: "#app",
      data: {
        message: "Hello Vue!",
      },
    });

    var app2 = new Vue({
      el: "#app-2",
      data: {
        count: 0,
      },
      methods: {
        CountUp: function () {
          this.count += 1;
        },
      },
    });

    var app3 = new Vue({
      el: "#app3",
      data: {
        seen: true,
      },
      methods: {
        change: function () {
          this.seen = !this.seen;
        },
      },
    });

    var app4 = new Vue({
      el: "#app4",
      data: {
        class1: "blue",
      },
    });

    var app5 = new Vue({
      el: "#app5",
      data: {
        todos: [
          { text: "あいうえお" },
          { text: "かきくけこ" },
          { text: "さしすせそ" },
        ],
      },
    });
  </script>
</html>
```

![スクリーンショット 2022-08-23 20.19.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/1cba7f82-706a-de59-bb63-050079b64e4a.png)

## コンポーネント化してみよう

htmlをコンポーネントとして扱い、再利用することができます。
下記のように```Vue.component```と書いてあげるだけで、templateの箇所をコンポーネント化できます。

```vuejs
Vue.component("template1", {
      template: "<button>ぼたん</button>",
    });
```


```vuejs:環境構築.html
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- 開発バージョン、便利なコンソールの警告が含まれています -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <style>
      .blue {
        color: blue;
      }
      .red {
        color: red;
      }
    </style>
    <div id="app">{{ message }}</div>

    <div id="app-2">
      <p>{{ count }}</p>
      <button v-on:click="CountUp">Count Up</button>
    </div>

    <div id="app3">
      <p v-if="seen">Now you see me</p>
      <p v-else="seen">Now you don't</p>
      <button v-on:click="change">表示切り替え</button>
    </div>

    <div id="app4">
      <p v-bind:class="class1">あいうえお</p>
      <!-- 省略記法 -->
      <p :class="class1">あいうえお</p>
    </div>

    <div id="app5">
      <p v-for="todo in todos">{{todo.text}}</p>
    </div>
  </body>

  <div id="app6">
    <ul>
      <template1></template1>
      <template1></template1>
      <template1></template1>
    </ul>
  </div>

  <script>
    var app = new Vue({
      el: "#app",
      data: {
        message: "Hello Vue!",
      },
    });

    var app2 = new Vue({
      el: "#app-2",
      data: {
        count: 0,
      },
      methods: {
        CountUp: function () {
          this.count += 1;
        },
      },
    });

    var app3 = new Vue({
      el: "#app3",
      data: {
        seen: true,
      },
      methods: {
        change: function () {
          this.seen = !this.seen;
        },
      },
    });

    var app4 = new Vue({
      el: "#app4",
      data: {
        class1: "blue",
      },
    });

    var app5 = new Vue({
      el: "#app5",
      data: {
        todos: [
          { text: "あいうえお" },
          { text: "かきくけこ" },
          { text: "さしすせそ" },
        ],
      },
    });

    Vue.component("template1", {
      template: "<button>ぼたん</button>",
    });

    new Vue({ el: "#app6" });
  </script>
</html>

```

![スクリーンショット 2022-08-23 20.32.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/6c906474-f4f6-81ae-f753-86696277ba93.png)

## 値の受け渡しにpropsを使ってみる

propsを使って先程のボタンの中身を変更したいと思います。
先程書いたcomponentの中にpropsを書いてあげるだけです。

```vuejs:環境構築.html
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- 開発バージョン、便利なコンソールの警告が含まれています -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <style>
      .blue {
        color: blue;
      }
      .red {
        color: red;
      }
    </style>
    <div id="app">{{ message }}</div>

    <div id="app-2">
      <p>{{ count }}</p>
      <button v-on:click="CountUp">Count Up</button>
    </div>

    <div id="app3">
      <p v-if="seen">Now you see me</p>
      <p v-else="seen">Now you don't</p>
      <button v-on:click="change">表示切り替え</button>
    </div>

    <div id="app4">
      <p v-bind:class="class1">あいうえお</p>
      <!-- 省略記法 -->
      <p :class="class1">あいうえお</p>
    </div>

    <div id="app5">
      <p v-for="todo in todos">{{todo.text}}</p>
    </div>
  </body>

  <div id="app6">
    <ul>
      <template1 prop1="１番目"></template1>
      <template1 prop1="2番目"></template1>
      <template1 prop1="3番目"></template1>
    </ul>
  </div>

  <script>
    var app = new Vue({
      el: "#app",
      data: {
        message: "Hello Vue!",
      },
    });

    var app2 = new Vue({
      el: "#app-2",
      data: {
        count: 0,
      },
      methods: {
        CountUp: function () {
          this.count += 1;
        },
      },
    });

    var app3 = new Vue({
      el: "#app3",
      data: {
        seen: true,
      },
      methods: {
        change: function () {
          this.seen = !this.seen;
        },
      },
    });

    var app4 = new Vue({
      el: "#app4",
      data: {
        class1: "blue",
      },
    });

    var app5 = new Vue({
      el: "#app5",
      data: {
        todos: [
          { text: "あいうえお" },
          { text: "かきくけこ" },
          { text: "さしすせそ" },
        ],
      },
    });

    Vue.component("template1", {
      props: ["prop1"],
      template: "<button>{{prop1}}</button>",
    });

    new Vue({ el: "#app6" });
  </script>
</html>

```

![スクリーンショット 2022-08-23 20.39.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/53b7d306-6878-a44f-0f69-a73c65eed224.png)

# おわりに
普段、Reactを使ってコードを書いてますが、Reactと比べてVue.jsは、初心者でもとっつきやすいフレームワークだと感じました。Vue.jsの公式のドキュメントもとてもわかりやすく書いてあるので良かったです。