Vue.jsでTodoリスト

## DEMO
[デモサイト](https://demo-01.kawausoblog.jp/)
## 完成形
## html

```html
    <div id="app">
      <h2>TODO List</h2>
      <form v-on:submit.prevent>
        <input type="text" v-model="newItem" />
        <button @click="addItem()">Add</button>
      </form>
      <ul>
        <li v-for="(todo, index) in todos">
          <input type="checkbox" v-model="todo.isDone" />
          <span v-bind:class="{done:todo.isDone}">{{todo.item}}</span>
          <button @click="deleteItem(index)">Delete</button>
        </li>
      </ul>
      <pre>
        {{$data}}
      </pre>
    </div>
```
## JavaScript
```javascript
const app = Vue.createApp({
  data: () => ({
    newItem: "",
    todos: [],
  }),
  methods: {
    addItem: function (event) {
      console.log("click");
      if (this.newItem === "") return;
      let todo = {
        item: this.newItem,
        isDone: false,
      };
      this.todos.push(todo);
      this.newItem = "";
    },
    deleteItem: function (index) {
      // console.log("Delete");
      // console.log(index);
      this.todos.splice(index, 1);
    },
  },
});
app.mount("#app");
```

## コード解説
追加ボタンhtml
```html
      <form v-on:submit.prevent>
        <input type="text" v-model="newItem" />
        <button @click="addItem()">Add</button>
      </form>
```
```html
<form v-on:submit.prevent>
```
v-on:submit.prevent
formのデフォルトの処理をやめさせる
```html
<input type="text" v-model="newItem" />
```
```javascript
  data: () => ({
    newItem: "",
    todos: [],
  }),
```
newItemで初期値を空にする、v-modelでデータバインディング
todosで配列を用意する

```html
<button @click="addItem()">Add</button>
```
on:clickでクリックしたときの処理

```javascript
  methods: {
    addItem: function (event) {
      console.log("click");
    },
  },

//コンソールログ
click
```
```javascript
      let todo = {
        item: this.newItem,
      };
```
オブジェクトtodoを作成

```javascript
this.todos.push(todo);
```
detaに用意したtodosにtodoにpushする
```javascript
      if (this.newItem === "") return;
```
入力値が空の時は処理させない

```html
        <li v-for="todo in todos">
          <span>{{todo.item}}</span>
        </li>
```
v-forでtodosをlist表示させる(todo.item)
```html
          <input type="checkbox" v-model="todo.isDone" />
```
処理・未処理を判定させるためにチェックボックスを追加
```javascript
      let todo = {
        item: this.newItem,
        isDone: false,
      };
```
isDoneを追加、初期値false
```html
          <input type="checkbox" v-model="todo.isDone" />
```
v-model="todo.isDone"
チェック時:tlue
未チェック時:false
```html
<span v-bind:class="{done:todo.isDone}">{{todo.item}}</span>
```
v-bind:classでチェック時に.done付与
```css
#app li > span.done {
  text-decoration: line-through;
}
```
チェックが入ってる時(.doneクラス付与時)にitemに横線を引くcss
```javascript
this.newItem = "";
```
Addした後にinputを空にする


```html
<button @click="deleteItem()">Delete</button>
```
Deleteボタン作成

```javascript
    deleteItem: function (index) {
       console.log("Delete");
       console.log(index);
    },
```
引数にindexをとる
indexで何番目のitemがチェックされたかを判断

```html
        <li v-for="(todo, index) in todos">
          <input type="checkbox" v-model="todo.isDone" />
          <span v-bind:class="{done:todo.isDone}">{{todo.item}}</span>
          <button @click="deleteItem(index)">Delete</button>
        </li>
```
 <li v-for="(todo, index) in todos">
v-forの引数にindex追加

```javascript
this.todos.splice(index, 1);
```
spliceで配列から削除させる
index番目を一つ削除

## DEMO
[デモサイト](https://demo-01.kawausoblog.jp/)