Vue.jsのTODOアプリ

Vue.js HTML/CSS

Vue.jsの勉強でTODOアプリを作りました。

hayashiyoshino.github.io

 

 

機能としては、以下のような非常にシンプルなものです。

・入力されたものがリスト表示されます。

・実行したものにチェックを入れるとリストに打ち消し線が入ります。

・削除ボタンを押すと、アラートで確認した後削除されます。

 

 

ディレクティブやデータバインディングなど、もっと複雑なアプリでも必要となりそうなので、しっかり使いこなせるようにしたいと思います！！

 

コード

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>vue_sample</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h2>TODO　LIST</h2>
    </header>
    <div class="wrapper">
        <div id="app">
            <form v-on:submit.prevent>
                <input type="text" v-model="newItem">
                <button v-on:click="addItem" class="addbotton">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 v-on:click="deleteItem(index)">Delete</button>
                </li>
            </ul>
        </div>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script src="index.js"></script>
</body>
</html>

 

index.js

var app = new Vue({
    el: '#app',
    data: {
        newItem: '',
        todos: []
    },
    methods: {
        addItem: function (event) {
            if (this.newItem == "") return;
                var todo = {
                     item: this.newItem,
                     isDone: false
                };
            this.todos.push(todo);
            this.newItem = "";
        },
        deleteItem: function(index) {
            alert((index+1) + "番のメモを削除します。よろしいですか？");
            this.todos.splice(index, 1);
        }
    }
})

 

style.css

#app ul {
    list-style: none;
    transform: translateZ(0);
}

#app li>span.done {
    text-decoration: line-through;
}

.wrapper {
    margin-right: auto; /* 1 */
    margin-left: auto; /* 1 */
    max-width: 960px; /* 2 */
    padding-right: 10px; /* 3 */
    padding-left: 10px; /* 3 */
}

header {
    height: 40px;
    width:100%;
    margin-bottom: 20px;
    padding-left: 10px;
    padding-top:10px;
    background-color: #ffc0cb;
}

h2{
    font-size:28px;
}


input[type=text]{
    border:0;
    padding:10px;
    font-size:1.3em;
    font-family:Arial, sans-serif;
    color:#aaa;
    border:solid 1px #ccc;
    margin:0 0 20px;
    width:300px;
}

.addbotton {
    border:solid 1px #ccc;
    padding:11px 30px;
    margin:0 0 20px;
    font-family:Arial, sans-serif;
    font-size:1.2em;
    text-transform:uppercase;
    font-weight:bold;
    color:#333;
    cursor:pointer;
}