【Vue.js】TODO管理リストの作成

#はじめに
こんにちは！　松本　佑大（まつもと　ゆうだい）と申します！
今回はTODO管理リストの作成についてアウトプットしていきます！

#Vueインスタンスとテンプレートの準備

```HTML:HTML
<div id="app">
  <h2>TODOリスト</h2>
  <form>
    <input type="text">
    <button>Add</button>
  </form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
```

```Vur.js
var app = new Vue({
  el:'#app'
})

```
![スクリーンショット 2021-10-12 22.02.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2114750/b2e28c97-c533-2047-9dea-8523ffa0acf0.png)


まず最初に型となる部分を作成します。


#inputを双方向データバインディング、buttonの処理

次にinputを双方向データバインディング、buttonをクリックすると処理が働く部分を記述します。

```HTML:HTML
<div id="app">
  <h2>TODOリスト</h2>
  <form v-on:submit.prevent>
    <input type="text" v-model="newItem">
    <button v-on:click="addItem">
      Add
    </button>
  </form>
  <pre>{{ $data }}</pre>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
```

```Vur.js
var app = new Vue({
  el:'#app',
    data:{
     newItem: ''
    }
    methods:{
     addItem: function(event){
    }
})

```

![スクリーンショット 2021-10-12 22.06.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2114750/47c78c9e-8041-1399-196f-479d3886ed23.png)

`input`に入力された文字を双方向データバインディングするために`v-model="newItem"`(任意)を記述。
Vue.jsと紐付けるためにdataオプションを作成し、中に`newItem:'' `を作成する。（``の中にテキストと同じ文字が入る）

また、任意だが  `<pre>{{ $data }}</pre>`　を記述しておくと画面にdataの部分が出力されるので、正常に処理が動いているか確認がとりやすくなる。

次に`button`をクリックしたときに処理が発生する仕組みを作る。
テキスト側
`v-on:click="addItem"`ボタンをクリックしたら`addItem`が発生。

Vue.js側
    `methods:{
     addItem: function(event){
    }`
`methods`メソッドを作成し、addItemイベントを記述。（今は空）

![スクリーンショット 2021-10-12 22.07.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2114750/d5538ff0-5b42-9108-08f6-0995de56784c.png)


このとき、クリックをすると上記のようにエラーが発生するため、`form`タグに`v-on:submit.prevent`
を記述し、エラーを防ぐ。

#タスクの追加

変更点はVue.jsのみになります。

```Vur.js

var app = new Vue({
var app = new Vue({
  el: '#app',
  data: {
    newItem: '',
    todos: []
  },
  methods: {
    addItem: function(event) {
    
    if(this.newItem == '') return ;
    //⏫もしnewItemが空だったら処理を止める。
    //未入力の場合処理を行わないということ
      var todo = {
        item: this.newItem
      };
      this.todos.push(todo);
      //⏫配列todosにtodoを追加する。
      //todoの中身はnewItemだから結果newItemと同じ文字が記述される。
      this.newItem = '';
      //⏫todoがpushされたとき、newItem（テキストボックス）は空になる。
    }
  }
})

```

![スクリーンショット 2021-10-12 22.53.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2114750/6299f2f8-93f8-0f58-dee4-f69607327b2c.png)

#リスト表示、タスクの完了/未完了の管理

```HTML:HTML
    <ul>
    <li v-for="todo in todos">
      <input type="checkbox" v-model="todo.isDone">
     <!--⏫チェックボックスの表示-->　<!--⏫todo.isDoneと双方向バインディング-->
      <span>{{ todo.item }}</span>
    </li>
  </ul>

```

```Vue.js
var app = new Vue({
  el: '#app',
  data: {
    newItem: '',
    todos: []
  },
  methods: {
    addItem: function(event) {
    
    if(this.newItem == '') return ;
      var todo = {
        item: this.newItem,
        isDone:true
      //tureならチェックボックスにチェックが入る
      //falseならチェックボックスにチェックが入らない
      };
      this.todos.push(todo);
      this.newItem = '';
     
    }
  }
})

```

![スクリーンショット 2021-10-12 23.10.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2114750/11cd8205-021f-6d2c-0b1d-340d35e0e685.png)

#最後に
今回はTODO管理アプリ制作に挑戦しました！
今回の記事を読んで気になったこと、間違い等あればコメント等頂けると幸いです。

今後ともQiitaにてアウトプットしていきます！

最後までご愛読ありがとうございました！