はじめてのVue.js

# 概要

- [公式](https://vuejs.org/)のGET STARTEDを参考に、やりたいことベースでどうコードに落とし込むかまとめてみました
- 自分の興味や必要になったものを随時追加していきます
- 実際の動作を確認されたい場合は[こちら](https://rhirabay.github.io/first-vuejs/src/html/main)をご覧ください🙇‍♂️

# 1. 基本の基

```html
<div id="app_1">
    {{ message }}
</div>

<script>
    var app_1 = new Vue({
        el: '#app_1',
        data: {
            message: 'Hello Vue!'
        },
        methods: {
            hello: function() {
                console.log('Hello Vue!');
            }
        }
    });
</script>
```

- Vueオブジェクトを利用する
- `el`フィールドでレンダリングの対象DOMを指定
- `data`フィールドでレンダリングするデータを`key: value`で定義する
- DOMの内部に`{{key}}`の形式で記述をすると`data`ないのkeyに該当するvalueがレンダリングされる
- 後述のイベント等で使用できる関数を`methods`フィールドで定義できる
- dataやmethodsの参照方法は以下の通り
  - 自分自身のdata： `this.message`
  - 自分自身のmethods: `this.hello()`
  - 外部からdata: `app_1.message`
  - 外部からmethods: `app_1.hello()`

# 2. 制御構文

## 2-1. 条件分岐

### 2-1-1. 単一エレメントの出し分け

```html
<div id="app_2_1_1">
    <p v-if="condition">Condition: true</p>
    <p v-else="condition">Condition: false</p>
</div>

<script>
    var app_2_1_1 = new Vue({
        el: '#app_2_1_1',
        data: {
            condition: true
        }
    });
</script>
```

- `v-if`を用いる
- 属性には真偽値になるような値や条件式を設定する
- `v-else`を用いると`else`構文と同じ働きをしてくれる

### 2-1-2. 複数エレメントの出し分け

```html
<div id="app_2_1_2">
    <template v-if="condition">
        <p>multiple element</p>
        <p>multiple element</p>
    </template>
</div>

<script>
    var app_2_1_2 = new Vue({
        el: '#app_2_1_2',
        data: {
            condition: true
        }
    });
</script>
```

- 単位エレメントとの違いは、出し分けるエレメントを`<template>`タグで囲うこと  

### 2-1-3. 文字列比較

```html
<div id="app_2_1_3">
    <p v-if="word === 'A'">The word is A</p>
    <p v-else>The word is not A</p>
</div>

<script>
    var app_2_1_3 = new Vue({
        el: '#app_2_1_3',
        data: {
            word: 'A'
        }
    });
</script>
```

- `v-if`の中身は真偽値になれば良いので文字列比較もできる
- 文字列は`'`で囲うことを忘れずに


## 2-2. ループ

### 2-2-1. 配列

```html
<div id="app_2_2_1">
    <ul>
        <li v-for="item in items">{{item}}</li>
    </ul>

    <ul>
        <li v-for="(item, index) in items">{{index}} - {{value}}</li>
    </ul>
</div>

<script>
    var app_2_2_1 = new Vue({
        el: '#app_2_2_1',
        data: {
            items: ['A', 'B', 'C']
        }
    });
</script>
```

- `v-for`を使用
- `item in items`で`items`から要素をひとつずつ取り出し`item`に格納
- `{{item}}`と記述することでレンダリングされる
- 要素番号も取得したい場合は`(item, index) in items`と記述
  - itemが先なので注意

### 2-2-2. Map(連想配列)

```html
<div id="app_2_2_2">
    <ul>
        <li v-for="value in items">{{value}}</li>
    </ul>

    <ul>
        <li v-for="(value, key) of items">{{key}} : {{value}}</li>
    </ul>
</div>

<script>
    var app_2_2_2 = new Vue({
        el: '#app_2_2_2',
        data: {
            items: {
                'A': 'Apple',
                'B': 'Banana',
                'C': 'Cat'
            }
        }
    });
</script>
```

- 配列と同じ使い方をした場合は`key: value`のうち`value`のみが取り出される
- `key`も取得したい場合は`(value, key) in items`と記述
  - valueが先なので注意
- `in`と`of`はどちらでも良いっぽい
  - 公式ドキュメントでも基本`in`だけどJavascriptの構文に合わせるために`of`も使えるよみたいな描かれ方をしている 

### 2-2-3. 複数要素のループ

```html
<div id="app_2_2_3">
    <table>
        <template v-for="(item, index) in items">
            <tr>
                <td>{{index}}</td>
                <td>{{item}}</td>
            </tr>
        </template>
    </table>
</div>

<script>
    var app_2_2_3 = new Vue({
        el: '#app_2_2_3',
        data: {
            items: ['A', 'B', 'C']
        }
    });
</script>
```

- ループさせるエレメントが複数になる場合は、v-if同様に`<template>`タグで囲う

# 3. ユーザー入力

## 3-1. 入力値をレンダリング

```html
<div id="app_3_1">
    <input type="text" v-model="message">
    <p>The input message is {{message}}</p>
</div>

<script>
    var app_3_1 = new Vue({
        el: '#app_3_1',
        data: {
            message: "default"
        }
    });
</script>
```

# 4. イベント

## 4-1. click

```html
<div id="app_4_1">
    <button v-on:click="method1">ボタン</button>
</div>

<script>
    var app_4_1 = new Vue({
        el: '#app_4_1',
        methods: {
            method1: function(event) {
                alert('Button was clicked');
            }
        }
    });
</script>
```