【Vue.js】Vue.js最初の一歩

#はじめに
最近Vue.jsを勉強しています。
自分の備忘を兼ねて、初歩的な内容を書いていきます。
#基本

```html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>Sample</title>
        <meta name="description" content="sample">
        <!-- Vue.jsをインストール -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    </head>

    <body>
        <!-- Vue.jsを適用する場所 -->
        <div id="app">

        </div>

        <script>
            //最初にVueクラスをインスタンス化
            new Vue({

                //elオプション：Vueを適用する場所を指定
                el: '#app',

                //dataオプション：Vueで使用するデータを用意する
                data: {
                    message: 'Hello Vue!'
                }
            });
        </script>
    </body>
</html>
```

まず`Vue`クラスをインスタンス化します。
そして、`el`オプションにより、Vueを適用する場所を指定します。今回は`app`というidを持つ`div`要素に対して適用するので、`el: '#app'`としています。
最後に、`data`オプションで、使用するデータを用意します。「プロパティ:値」のように記述するので、今回は`'Hello Vue!'`という文字列を`message`プロパティにセットしたことになります。
このデータを表示させてみます。
HTML内で`{{プロパティ名}}`のように記述すると、該当するプロパティの値が呼び出され、表示されます。

```html

    <body>
        <div id="app">
            <!-- messageデータを呼び出し -->
            {{message}}
        </div>
        
        <!-- Vue適用範囲外なので呼び出されない -->
        {{message}}

        <script>
            new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue!'
                }
            });
        </script>
    </body>
```

結果
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912003/7051d271-e4d8-e089-f45e-bf0e3abd6090.png" width=20%>
`message`プロパティの値が呼び出され、表示されました。
2段目はVueが適用される`div`要素の外なので、データが呼び出されず、そのまま表示されています。
#v-forディレクティブ
Vueでは、ディレクティブというものを使って、表示に関する様々な制御を行えます。
v-forディレクティブは、for文のような繰り返し処理を行います。

```html
    <body>
        <div id="app">
            
            <ul>
                <!-- 配列itemsから要素itemを繰り返し取り出す -->
                <li v-for="item in items">
                    
                    <!-- 取り出したitemのname属性を表示 -->
                    {{item.name}}
                </li>
            </ul>
        </div>

        <script>
            new Vue({
                el: '#app',
                data: {
                    //表示する要素を格納した配列
                    items: [
                        {name: 'item1'},
                        {name: 'item2'},
                        {name: 'item3'}
                    ]
                }
            });
        </script>
    </body>
```

まず`data`オプションで、複数の要素を格納した配列を用意しておきます。
次に繰り返し表示したいHTML要素のタグに`v-for="item in items"`といった記述を追加します。
そしてその要素の中に`{{item.name}}`と記述します。
これで、配列の要素を繰り返し取り出し、それらを次々に表示させています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912003/bf38d549-2c9c-158f-c1cb-a1b0865dbbac.png" width=20%>
状況によってリストの内容が変化する場合等に便利そうですね。
#v-onディレクティブ
v-onディレクティブはイベント制御を行うことができます。

```html
    <body>
        <div id="app">
            <!-- クリックしたらcountを1増加させる -->
            <button v-on:click="count += 1">ボタン</button>
            {{count}}

        </div>

        <script>
            new Vue({
                el: '#app',
                data: {
                    //ボタンが押されるたびに1ずつ増える
                    count: 0
                }
            });
        </script>
    </body>
```

ボタンに`v-on:click="count += 1"`と記述することにより、クリックすると変数`count`を1増加させるという処理を付加できます。
変数`count`は画面に表示されているので。増加していく様子を見ることができます。
#v-ifディレクティブ
v-ifディレクティブを使うと、条件によって表示させる内容を変化させることができます。

```html
    <body>
        <div id="app">
            <button v-on:click="count += 1">ボタン</button>
            {{count}}

            <!-- 条件によって表示内容を変化させる -->
            <div v-if="count % 2 === 0">偶数</div>
            <div v-else>奇数</div>
        </div>

        <script>
            new Vue({
                el: '#app',
                data: {
                    //ボタンが押されるたびに1ずつ増える
                    count: 0
                }
            });
        </script>
    </body>
```

`div`タグに`v-if="count % 2 === 0"`と記述することで、この条件を満たす場合に要素が表示されるようにしました。
これにより、`count`が偶数か奇数かを判定して表示するようにしています。ボタンを押すたびに表示が切り替わります。
#v-showディレクティブ
v-ifディレクティブと似ています。記載内容がtrueなら要素が表示されます。

```html
    <body>
        <div id="app">
            <button v-on:click="show = !show">ボタン</button>
            {{show}}

            <!-- 値がtrueなら表示される -->
            <div v-show="show">表示</div>
            <!-- 値がtrueでなければ表示される -->
            <div v-show="!show">非表示</div>
        </div>

        <script>
            new Vue({
                el: '#app',
                data: {
                    show: true
                }
            });
        </script>
    </body>
```

ボタンを押すと、`show`について、`true`・`false`の切り替えが行われます。
これにより、表示される要素が切り替わります。
#おわりに
Vue.jsは、HTMLを自在に操作できて便利そうですが、なかなか奥が深いようです。頑張って勉強を続けます。
(参考)
この本で勉強しています。
[Webデザインの現場で使えるVue-jsの教科書](https://www.amazon.co.jp/Webデザインの現場で使えるVue-jsの教科書-廣末-丈士/dp/4274225402)