vue.jsを初めて学ぶ ③ [レンダリング]

## 前回へのリンク
[vue.jsを初めて学ぶ ① [hello world]](https://qiita.com/uechikohei/items/4e44380848d29bf3fd6a)
[vue.jsを初めて学ぶ ② [テンプレート構文]](https://qiita.com/uechikohei/items/dd857da50a3f0237c22b)

---

# 目次

[1. v-ifを使用した、条件付きレンダリング](#条件付きレンダリング)

[2. v-forを使用した、リストレンダリング](#リストレンダリング)


<!-- 1 -->
---

# 条件付きレンダリング

## 1. v-if

要素を消す
切り替えが高頻度だと、処理が重くなる
要素を削除しているため

切り替えが頻繁ではない時は、v-if

## 2. v-show
cssベースで消す

初期表示が遅い
表示してからdisplay noneしているため

とても頻繁に切り替える時は、v-show

<!-- 2 -->
---

# リストレンダリング

## 1. v-forとは

- **リストレンダリング**を可能にする。

## 2. 配列から取り出す

```text:index.html
  <div id = "app">
    <ul>
      <li v-for="fruit in fruits">
        {{fruit}} 
      </li>
    </ul>
  </div>
```
1. <font color="green">**v-for**</font> の使い方 <br>
   `(引数) in 配列名`
2. <font color="green">**{{ }}**</font> 二重括弧内に引数を入れる。
3. <font color="green">**index, value**</font> の2つの要素を持っていることをチェック。

```text:index.js
    new Vue ({
      el: '#app',
      data: {
        fruits: ['りんご','ばなな','チェリー']
      }
    })
```

1. 変数fruitsに代入。<br>配列形式で<font color="green">**｛value｝**</font>を作成。

## 3. オブジェクトから取り出す
```text:index.html
<div id = "app">
    <ul>
      <li v-for="(value,key,index) in object"> 
        {{index}}{{key}}{{value}}
      </li>
    </ul>
  </div>
```

1. <font color="green">**v-for**</font> の使い方 <br>
   `(引数) in オブジェクト名`
2. <font color="green">**{{ }}**</font> 二重括弧内に引数を入れる。
3. <font color="green">**key, value, index**</font> の３つの要素を持っていることをチェック。

```text:index.js
    new Vue ({
      el: '#app',
      data: {
        object: {
          firstName: '太郎',
          lastName: '田中',
          age: 21
        }
      }
    })
```

1. 変数objectに代入。<br>オブジェクト形式で<font color="green">**｛key: value｝**</font>を作成。

## 4. <template>タグを利用する

- <div>タグより、要素が残らない<template>タグを使うとスッキリ。

```text:index.html<template>タグ使用
  <div id = "app">
    <ul>
      <template v-for="(value, index) in fruits">
        <li>
            ({{index}}){{value}}
        </li>
        <hr>
      </template>
    </ul>
  </div>
```

![スクリーンショット 2020-10-28 15.15.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/4729d6fb-708f-77c0-1e8a-dac5aa8fa769.png)


```text:index.html<div>タグ使用
  <div id = "app">
    <ul>
      <div v-for="(value, index) in fruits">
        <li>
            ({{index}}){{value}}
        </li>
        <hr>
      </div>
    </ul>
  </div>
```
![スクリーンショット 2020-10-28 15.14.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/2dc23b33-fd1c-d6c9-638f-db53df657f14.png)

**div タグより、スッキリして見えますね！**

## 5. inとofの分類

**ofは、javascriptのイテレーター構文**
<font color="red">**ofが使われていても間違ってはいない！**</font>
**Vue.jsでは、基本的にinを使用する**


## 6. v-forレンダリング時に、必須のキー属性

- v-forのリストレンダリング時、<br><font color="red">**必ずキー属性を使用**</font>

- キー属性とは、<font color="red">**templateタグで使用できない**</font>

- <font color="green">**v-for**</font>は、<br><font color="red">**要素の移動を最小限に抑えるアルゴリズムを使用**し可能な限り同じタイプの**要素を再利用**しようとする性質があるから。</font>

```text:index.html
  <div id = "app">
    <ul>
      <div v-for="fruit in fruits">
        <p>{{fruit}}</p>
        <input type="text">
      </div>
    </ul>
    <button v-on:click="remove">先頭削除</button>
  </div>
```

```text:index.js
    new Vue ({
      el: '#app',
      data: {
        fruits: ['いちご','ばなな','キウィ']
      },
      methods: {
        remove: function() {
          this.fruits.shift()
        }
      }
    })
```

1. 3つのテキストボックス内に入力し、先頭削除ボタンをクリック。
2. 先頭が削除された時、テキストボックス内の文字列がずれてしまう。
3. これは<font color="red">**Vue.jsが効率の良いアルゴリズムでレンダリング**</font>した結果。
4. 要するに効率を優先する事で、ズレが起きてしまう

**どうすれば良い？？**

## 7. <font color="red">**レンダリング時、キー属性を指定する！**</font>

```text:index.html
  <div id = "app">
    <ul>
      <div v-for="fruit in fruits" key="fruit">
        <p>{{fruit}}</p>
        <input type="text">
      </div>
    </ul>
    <button v-on:click="remove">先頭削除</button>
  </div>
```

```text:index.js
    new Vue ({
      el: '#app',
      data: {
        fruits: ['いちご','ばなな','キウィ']
      },
      methods: {
        remove: function() {
          this.fruits.shift()
        }
      }
    })
```

**<font color="green">key</font>として、毎回レンダリングで代入される<font color="green">変数fruit</font>を指定**

<font color="red">**keyとして、indexは指定できない。ズレが生じる**</font>