Vue.js 基礎

# 概要

- Vue.jsのコードを読むために最低限わかっていたほうが良さそうディレクティブをまとめる

## v-bind

- 「bind」は直訳すると「紐付け」
- htmlタグの中ではマスタッシュ構文が使えない。
- scriptタグ内で定義したオブジェクトの値をaタグのhref属性に設定する時などに使う。
- めっちゃよく使うから省略記法がある。
- 下記の様に記載するとscriptタグ内のオブジェクト（keyに紐づくhttps://qiita.com/miriwo）がhrefに紐付けされる。

```html
<div id="app">
    <a v-bind:href="key">テストリンク</a>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data(){
            return {
                key: 'https://qiita.com/miriwo',
            }
        }
    })
</script>
```

- 下記の様にv-bindは`:`に省略する事ができる。

```html
<div id="app">
    <a :href="key">テストリンク</a>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data(){
            return {
                key: 'https://qiita.com/miriwo',
            }
        }
    })
</script>
```

-下記の様に記載することで条件に一致している場合だけクラスを設定することなどもできる。

```html
<div id="app">
    <a href="#" :class="{条件式がtrueの時に設定したいクラス名: 条件}">テストリンク</a>
</div>
```

## v-show

- 表示非表示を切り替えられるディレクティブ
- 条件式がtrueの時のみ表示される。
- 最初から描画されている。cssのdisplayプロパティをnoneにしたりしなかったりで表示非表示を切り替える。
- 表示非表示の切り替えコストが低い。ページ読み込み時のコストが高い。（最初から描画はされていてcssのプロパティで隠されているだけだから）


```html
<div id="app">
    <div v-show="条件式">
        <a href="#">テストリンク（「条件式」がtrueの場合表示される）</a>
    </div>
</div>
```

## v-if v-else v-else-if

- 条件によって表示非表示を切り替えるときに使う。
- v-ifを記載したタグそのものを表示しないようにできる。
- `v-if="判定式"`の様にタグ内に記載する。
- 最初から描画されていない。条件式がtrueになった時初めて描画される。
- 表示非表示切替時のコストが高い。ページ読み込み時のコストが低い。（trueになってなければ描画されないから）

```html
<div id="app">
    <div v-if="key === 'OK'">テスト文字列</div>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data(){
            return {
                key: 'OK',
            }
        }
    })
</script>
```

## v-show 対　v-if

- 頻繁に表示を切り替える場合 → v-show → 描画のとき大変なだけで表示切り替えにはコストかからないから
- そんなに表示切り替えない場合 → v-if → 表示切り替えにコストは掛かるが、初回描画時にfalseの場合コストが掛からないから。
- ※コストは描画コストのこと
- 参考文献
    - [https://jp.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show](https://jp.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show)

## v-for

- 複数の値を一つづつ表示する際に使う。
- オブジェクトや配列の中身を一個づつ取り出して表示したいときになどに便利
- 配列の中身を順に取り出して表示したいとき。

```html
<div id="app">
    <div v-for="item in itemts">{{ item }}</div>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data(){
            return {
                items: ['test1', 'test2', 'test3']
            }
        }
    })
</script>
```

- オブジェクトの場合

```html
<div id="app">
    <div v-for="item in itemts">{{ item }}</div>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data(){
            return {
                items: {
                    str1: 'test1',
                    str2: 'test2',
                    str3: 'test3'
                }
            }
        }
    })
</script>
```

- 複数のオブジェクトの場合

```html
<div id="app">
    <div v-for="item in itemts" :key="item.id">
        <div>{{ item.id }}</div>
        <div>{{ item.str1 }}</div>
        <div>{{ item.str2 }}</div>
        <div>{{ item.str3 }}</div>
    </div>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data(){
            return {
                items: [
                    {
                        id: 1,
                        str1: 'test1-1',
                        str2: 'test1-2',
                        str3: 'test1-3'
                    },
                    {
                        id: 2,
                        str1: 'test2-1',
                        str2: 'test2-2',
                        str3: 'test2-3'
                    },
                    {
                        id: 3,
                        str1: 'test3-1',
                        str2: 'test3-2',
                        str3: 'test3-3'
                    },
                ],
            }
        }
    })
</script>
```

## v-on

- なにかしらのボタンをクリックすると動作する処理などを書くときに使う。
- `v-on:動作（イベント）="動作によって実行される関数名"`のように記載する。
- 動作（イベント）は下記に記載されているものが使用可能らしい。
    - [https://developer.mozilla.org/ja/docs/Web/Events](https://developer.mozilla.org/ja/docs/Web/Events)

```html
<div id="app">
    <button v-on:click="buttonClicked()">送信</button>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data(){
            return {
            }
        },
        methods: {
            buttonClicked(){
                console.log('送信ボタンがクリックされました')
            }
        }
    })
</script>
```

- 下記の様にv-onは`@`に置き換えることで省略して記載する事ができる。

```html
<div id="app">
    <button @click="buttonClicked()">送信</button>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data(){
            return {
            }
        },
        methods: {
            buttonClicked(){
                console.log('送信ボタンがクリックされました')
            }
        }
    })
</script>
```