vue.jsで簡単なtodoアプリを作る

# この記事の目的

vue.jsの勉強のために以下の仕様のtodoアプリを作成する。

* formからsubmitするとtodoに表示される
* deleteで消せる

# v-forでループ処理する

```javascript:main.js
(function(){
  'use strict';
  var vm = new Vue({
    el: '#app',
    data: {
      todos: [
        'task 1',
        'task 2',
        'task 3'
      ]
    }
  });
})();

```

main.jsにtodosというプロパティをもって直書きでまずtaskを３つ入れる。これをループで３つとも表示するために

```html:index.html
<!DOCTYPE>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Myvueapp</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="todo in todos">
        {{ todo }}
      </li>
    </ul>
    <p>
      <input type="text" v-model="name" />
    </p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="js/main.js"></script>
</body>
</html>
```

v-for="todo in todosと記述し、todosの要素をtodoとしてあるだけループするようにする。

# submitでtodo追加

![イメージ (1)-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193389/0556e64c-1689-d0fb-9bfc-77f88f93f0f9.jpeg)

```javascript:main.js
(function(){
  'use strict';
  var vm = new Vue({
    el: '#app',
    data: {
      newItem: '',
      todos: [
        'task 1',
        'task 2',
        'task 3'
      ]
    },
    methods: {
      addItem: function(){
        this.todos.push(this.newItem);
        this.newItem = '';
      }
    }
  });
})();

```

```html:index.html
<!DOCTYPE>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Myvueapp</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="todo in todos">
        {{ todo }}
      </li>
    </ul>
    <form v-on:submit.prevent=addItem>
      <input type="text" v-model="newItem" />
      <input type="submit" value="Add" />
    </form>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="js/main.js"></script>
</body>
</html>
```

* v-onでsubmit時にaddItemを発火
* addItem関数でtodosの配列にnewItemを入れる
* その後値をリセットするために空の値を代入

# todoの削除

```javascript:main.js
(function(){
  'use strict';
  var vm = new Vue({
    el: '#app',
    data: {
      newItem: '',
      todos: [
        'task 1',
        'task 2',
        'task 3'
      ]
    },
    methods: {
      addItem: function(){
        this.todos.push(this.newItem);
        this.newItem = '';
      },
      deleteItem:function(index){
        if(confirm('are you sure?')){
          this.todos.splice(index, 1);
        }
      }
    }
  });
})();
```

```html:index.html
<!DOCTYPE>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Myvueapp</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="(todo, index) in todos">
        {{ todo }}
        <span @click="deleteItem">☓</span>
      </li>
    </ul>
    <form v-on:submit.prevent=addItem>
      <input type="text" v-model="newItem" />
      <input type="submit" value="Add" />
    </form>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="js/main.js"></script>
</body>
</html>
```

* v-forでindexを受け取る
    * https://jp.vuejs.org/v2/guide/list.html#v-for-%E3%81%A7%E9%85%8D%E5%88%97%E3%81%AB%E8%A6%81%E7%B4%A0%E3%82%92%E3%83%9E%E3%83%83%E3%83%94%E3%83%B3%E3%82%B0%E3%81%99%E3%82%8B
* @click="deleteItem"で関数を発火
* ダイアログで確認してokならspliceで削除。
    * http://www.htmq.com/js/array_splice.shtml
    * 第一引数・・・追加・削除する位置（配列の要素数より大きい値を指定すると配列の末尾となる。負の数値を指定すると配列の末尾から引いた位置となる）
    * 第二引数・・・削除する要素の数