はじめてのVue.js - 基礎編

### はじめに
Vue.jsを学び始めたので、基礎の部分を忘れないようにアウトプットした内容です。
また初めてVue.jsを学び始めた方にもお役に立てればと思います。

今回は、下記の流れについて書いていきます。
API接続・データ表示・登録・更新・削除

### 前提
- Vue.jsの環境があること
- APIが用意されていること
- axiosがインストールされていること

### APIの内容
``` bash:api/task
{
  tasks: [
    0: {
      id: 1,
      name: "タスク1",
      status: 0,
      created_at: "2019-05-23 12:00:00",
      updated_at: null
    }
  ]
}
```

### API接続
今回はaxios使用してAPI接続を行う。

``` App.vue
<script>
import axios from 'axios'

export default {
    data () {
        return {
           datas: null
        }
    },
    mounted () {
        axios
            .get('{APIのURL}')
            .then(response => (this.datas = response.data.tasks))
    }
}
</script>
```

複数のAPI接続を行いたい場合はaxiosの部分を下記のように書くと複数のAPI接続ができる。

``` bash:複数API接続
mounted () {
   axios.get('{1個目のAPI}').then(response => ({格納したい変数名} = {responseの内容}));
   axios.get('{2個目のAPI}').then(response => ({格納したい変数名} = {responseの内容}));
}
```
## API接続 - 解説
上記の処理の流れは、
1. getメソッドでAPIのURLからの値を取得
2. response.data.tasksで取得したレスポンスを辿った値をthis.datasに格納
3. .thenで結果を受け取り
※axios は Promise オブジェクトを返すので「.done()」「.catch()」も書く場合があります。 

### データ表示
APIから受け取った値をfor文で回して表示する方法。

``` App.vue
<template>
    <div>
        <li v-for="(data, index) in datas">
            <span>{{data.name}}</span>
        </li>
    </div>
</template>

```
## データ表示 - 解説
v-forのdataはValueのことを指す
この場合のdataの中身は下記の値が入っているので、data.nameを指定することで「タスク１」が表示される

``` bash
id: 1,
name: "タスク1",
status: 0,
created_at: "2019-05-23 12:00:00",
updated_at: null
```

v-forのindexはKeyのことを指す
この場合は配列のキーを表示するので、「０」が表示される


### 登録
「登録」ボタンを押下すると配列に「test」という値を登録する方法。

``` App.vue
<template>
    <div>
        <li v-for="(data, index) in datas">
            <span>{{data.name}}</span>
　　　　　　　//今回追加した場所
　　　　　　　<button v-on:click="add">登録</button>
        </li>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    data () {
        return {
            datas: null
        }
    },

    mounted () {
        axios
            .get('{APIのURL}')
            .then(response => (this.datas = response.data.tasks))
    },

    //今回追加した場所
    methods: {
        add: function () {
            this.datas.push({'name' : 'test'})
        }
    }
}
</script>
```
## 登録 - 解説
``` bash
<button v-on:click="add">登録</button>
```
で「登録」ボタンを押下するとaddの処理が実行
methodsのaddの中で実行した処理が実行される

```
this.datas.push({'name' : 'test'})
```
でdatasの中の配列に対して値を追加

``` bash:api/task
{
  tasks: [
    0: {
      id: 1,
      name: "タスク1",
      status: 0,
      created_at: "2019-05-23 12:00:00",
      updated_at: null
    },
　　//今回追加した場所
    1: {
      id: 2,
      name: "test",
      status: 0,
      created_at: "2019-05-23 14:00:00",
      updated_at: null
    }
  ]
}
```


### 更新
配列の情報を更新する方法。

``` App.vue
<template>
    <div>
        <li v-for="(data, index) in datas">
            <span>{{data.name}}</span>
　　　　　　　<button v-on:click="add">登録</button>
            //今回追加した場所
            <button v-on:click="update(index)">更新</button>
        </li>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    data () {
        return {
            datas: null
        }
    },

    mounted () {
        axios
            .get('{APIのURL}')
            .then(response => (this.datas = response.data.tasks))
    },

    methods: {
        add: function () {
            this.datas.push({'name' : 'test'})
        },

        //今回追加した場所
        update: function () {
            this.datas.splice(index, 1, {'name' : 'aaaaaa'})
        },
    }
}
</script>

```
## 更新 - 解説
``` bash
<button v-on:click="update(index)">更新</button>
```
で「更新」ボタンを押下するとupdateの処理が実行
methodsのupdateの中で実行した処理が実行される
引数で値をmethodsのupdateの中に送ることができるため、indexにはKeyが格納されている

```
this.datas.splice(index, 1, {'name' : 'aaaaaa'})
```
でdatasの中の1番目の入れるのnameの値を「aaaaaa」に変更
※spliceの第二引数は、０：追加のみ・１：書き換え

``` bash:api/task
{
  tasks: [
    0: {
      id: 1,
      name: "タスク1",
      status: 0,
      created_at: "2019-05-23 12:00:00",
      updated_at: null
    },
    1: {
      id: 2,
      name: "aaaaaa", //今回書き換わった値
      status: 0,
      created_at: "2019-05-23 14:00:00",
      updated_at: null
    }
  ]
}
```


### 削除

``` App.vue
<template>
    <div>
        <li v-for="(data, index) in datas">
            <span>{{data.name}}</span>
　　　　　　　<button v-on:click="add">登録</button>
　　　　　　　<button v-on:click="update(index)">更新</button>
            //今回追加した場所
            <button v-on:click="delete(index)">削除</button>
        </li>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    data () {
        return {
            datas: null
        }
    },

    mounted () {
        axios
            .get('{APIのURL}')
            .then(response => (this.datas = response.data.tasks))
    },

    methods: {
        add: function () {
            this.datas.push({'name' : 'test'})
        },

        update: function () {
            this.datas.splice(index, 1, {'name' : 'aaaaaa'})
        },

        //今回追加した場所
        delete: function (index) {
            this.datas.splice(index, 1)
        }
    }
}
</script>
```

## 削除 - 解説
``` bash
<button v-on:click="delete(index)">削除</button>
```
で「削除」ボタンを押下するとdeleteの処理が実行
methodsのdeleteの中で実行した処理が実行される
引数で値をmethodsのdeleteの中に送ることができるため、indexにはKeyが格納されている

```
this.datas.splice(index, 1)
```
でdatasの中の1番目配列を削除

``` bash:api/task
{
  tasks: [
    0: {
      id: 1,
      name: "タスク1",
      status: 0,
      created_at: "2019-05-23 12:00:00",
      updated_at: null
    }
    //今回削除した場所
  ]
}
```