Help us understand the problem. What is going on with this article?

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

こんな感じですね!

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という名前で保存しよう!
では今からdatainputを入れていくよ~

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

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

4.テキストとデータをくっつけよう!

早速テキストボックスとinputv-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とか使ってアウトプットしていきたいな・・・

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした