Vue.jsでTodoアプリ作ってみよう！

今回はVue.jsでTodoアプリを作ってみます
早速やっていきましょう～！
なお超基礎的な知識として下記の記事に書いてることを前提でお話します！
https://qiita.com/takepon_it/items/f89e0e3023a3070dbce6
#1.画面を作ろう
今回はTodoリストの機能を作りたいだけなので見た目は簡素な物でいきます！
https://unpkg.com/vue
を読み込むのを忘れないでください！

```index.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Todoアプリ</title>
        <link rel="stylesheet" href="style.css">
        <script src="https://unpkg.com/vue"></script>

    </head>
    <body>
        <div class="container">
            <h1>Todoアプリ</h1>
        </div>
        <div id="app">
            <div>
                <input type="text" placeholder="テキスト入力してね">
                <button type="button">追加</button>
                <ul>
                </ul>
            </div>
        </div>
        <script src="main.js"></script>
    </body>
</html>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579434/6cecc35e-9832-e144-741d-2a8713315b5e.png)

こんな感じですね！

#2.コンポーネントを作ろう！
早速タスクを追加する機能を追加していきましょう！

まずコンポーネントを定義していきます
コンポーネントは**Vue.component**を使うことで定義することできます！


ToDo の要素を todo-item というコンポーネントとして定義してみましょう！
それと合わせて既にここでタスクを追加した際のhtmlも作っておきましょう！
テンプレートをtemplateオプションに渡せばできます！

```main.js
Vue.component('todo-item', {
    props: {
        todo: {
            type: Object,
            required: true
        }
    },
    //htmlの挿入
    template: '<div>' +
        '<input type="checkbox" v-model="todo.completed">' +
        '<span>{{todo.text}}</span>' +
        '</div>'
});
```

取り合えずこれでtodo-itemというコンポーネントを作れました！


#3.タスクを保持するデータを作ろう！
次にテキストボックスの値を**input**という名前で保存しよう！
では今から**data**に**input**を入れていくよ～

```main.js
var vm = new Vue({
    el: '#app',
    data: {
        input: '',
        //タスクを管理する配列
        todos: []
    },
```

タスクを管理する配列として **todos:[]**　も作っとこう！

#4.テキストとデータをくっつけよう！
早速テキストボックスと**input**を**v-model**を使ってくっつけよう！

v-modelはinput要素にv-modelという属性をつけることで、データとinput要素の入力値をくっつけることができます！

追加ボタンの上のテキストボックスの所を

```index.html
<input type="text" v-model="input"　placeholder="テキスト入力してね">
```

にしてみましょう！　早速次にいきましょう！

#5.タスクを追加するインスタンスメソッドを作ろう！
本題のTodoを追加するための機能を作っていきましょう！
addTodoというメソッドを作ろう！
インスタンスメソッドを作るにはmethodsオプションを使用したらできるよ

```main.js
 methods: {
        //Todo追加関数
        addTodo: function () {
            this.todos.push(
                {
                    completed: false,
                    text: this.input
                })
            this.input = ''
        }
    }
```

これを追加してください！
配列へのpushやそういったものは割愛させて頂きます

#6.タスクを追加する処理を書いていこう！
そしたらボタンをクリックしたらタスクを追加できるようにしたいので
ボタンとメソッドを紐づける必要があります！
これをするには
`v-on:click`
これを使って、ボタンが押されるのを監視し、ボタンが押された時に先ほどのaddTodoメソッドを実行できるようにしよう！

```index.html
<button type="button" v-on:click="addTodo">追加</button>
```
こうですね！

#7.タスクを削除する機能を作ろう！
タスクを追加したら、それを遂行した時の為に当然削除っていう機能も欲しいですよね？
こちらを今から実装していきたいと思います！

冒頭で作成したtempleteオプションに続けて記述したいと思います

```main.js
 //htmlの挿入
    template: '<div>' +
        '<input type="checkbox" v-model="todo.completed">' +
        '<span>{{todo.text}}</span>' +
        '<button type="button" v-on:click="onclickRemove">削除</button>' +
        '</div>',
```
最終的にはこうですね！
しかしこれだけではなv-onオプションを使っている所を見て頂きたいのですが
**onclickRemove**とあります
実際に削除ボタンを押されたときの処理をまだ書いていないので今から書いていきましょう。

```main.js

    methods: {
        onclickRemove: function () {
            this.$emit('remove')
        }
    }
```
こちらを始めのインスタンスメソッドに追記します
$emitでカスタムイベントの**remove**を発動します！
そして最後に

```index.html
 <li v-for="(todo, index) in todos">
 <todo-item v-bind:todo="todo" v-on:remove="todos.splice(index,1)"></todo-item>
</li>
```
ul要素の中に上記を追記してください
**v-for**で要素を繰り返し表示します、この場合はtodos配列の中に格納されているタスクを表示させる為ですね
**v-bind**でデータを属性の値に紐付けします。

以上をもってTodoアプリの完成です！！！！！！

#8.最後に

プログラミング初心者の割には頑張れた気がします
この調子でQiitaとか使ってアウトプットしていきたいな・・・