这家伙很懒~

my_todoMVC

Javascript2015-11-04 11:40
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="todo.css">
    <title>mySimple-todoMVC</title>
</head>
<body class="Absolute-Center">
    <h1 style="margin-left: 40px">todos</h1>
    <div class="todoapp">
        <input type="checkbox" v-model="allDone">
        <input type="text" v-model="newTodo" autofocus
            placeholder="To be done!"
            @keyup.enter="addTodo">
        <ul class="todos" v-show="todos.length">
            <li class="todo" v-for="todo in filteredTodos">
                <input type="checkbox" v-model="todo.completed">
                <input type="text" v-model="todo.title">
                <button @click="removeTodo(todo)">×</button>
            </li>
        </ul>
        <ul class="filters">
            <li class="fl btn">{{todos.length}} items left</li>
            <li class="fl btn"><a href="#/all" :class="{selected: visibility == 'all'}">All</a></li>
            <li class="fl btn"><a href="#/active" :class="{selected: visibility == 'active'}">Active</a></li>
            <li class="fl btn"><a href="#/completed" :class="{selected: visibility == 'completed'}">Completed</a></li>
            <li class="fl btn" @click="clearCompleted()"><a href="#">clearCompleted</a></li>
        </ul>
    </div>
    <script src="../../dist/vue.js"></script>
    <script src="node_modules/director/build/director.js"></script>
    <script src="js/store.js"></script>
    <script src="js/app.js"></script>
    <script src="js/routes.js"></script>
</body>
</html>

-

(function (exports) {

    'use strict';

    var filters = {
        all: function (todos) {
            return todos;
        },
        active: function (todos) {
            return todos.filter(function (todo) {
                return !todo.completed;
            });
        },
        completed: function (todos) {
            return todos.filter(function (todo) {
                return todo.completed;
            });
        }
    };

    exports.app = new Vue({

        el: '.todoapp',

        data: {
            todos: todoStorage.fetch(),
            newTodo: '',
            visibility: 'active'
        },

        watch: {
            todos: {
                handler: function (todos) {//editer
                  todoStorage.save(todos);
                },
                deep: true
            }
        },

        methods: {
            addTodo: function () {
                var value = this.newTodo && this.newTodo.trim();
                if(!value) {
                    return;
                }
                this.todos.push({title: value, completed: false});
                this.newTodo = '';
            },
            removeTodo: function (todo) {
                this.todos.$remove(todo);
            },
            clearCompleted: function () {
                this.todos = filters.active(this.todos);                
            }
        },

        computed: {

            filteredTodos: function () {
                return filters[this.visibility](this.todos);
            },

            remaining: function () {
                return filters.active(this.todos).length;
            },

            allDone: {
                get: function () {
                    return this.remaining === 0;
                },
                set: function (value) {
                    this.todos.forEach(function (todo) {
                        todo.completed = value;
                    });
                }
            }
        }
    });

})(window);

-

body {
    margin: 0;
    padding: 0;
}

button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 100%;
    vertical-align: baseline;
    font-family: inherit;
    font-weight: inherit;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

body {
    font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 1.4em;
    background: #f5f5f5;
    color: #4d4d4d;
    min-width: 230px;
    max-width: 550px;
    margin: 0 auto;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    font-smoothing: antialiased;
    font-weight: 300;
}

button,
input[type="checkbox"] {
    outline: none;
}

.hidden {
    display: none;
}
button {
    font-size: 25px;
    background: #eee;
    padding: 0 8px;
    display: none;
}
button:hover {
    background: black;
    color: red;
}
.fl {
    float: left;
}
li {
    list-style: none;
}
.todos {
    margin-left: -41px;
}
.filters {
    margin: 30px -200px;
}
.todo {
    width: 190px;
    height: 30px;
    line-height: 30px;
    background: #e5e5e5;
    margin-top: 5px;
}
.todo:hover button {
    display: inline;
}
a {
    font-size: 16px;
    padding: 10px 15px;
    border: 1px solid transparent;
    margin-left: 10px;
    text-decoration: none;
    color: black;
}
a:hover {
    color: #ff6160;
    border-color: rgba(175, 47, 47, 0.1);
}
a.selected {
    color: #ff6160;
    border-color: rgba(175, 47, 47, 0.2);
}
.Absolute-Center {
  margin: 0 500px;
}
评论(2)
  • 邢文亮: 头像找回来啦,另外给你编辑了下样式,以前的老样式太丑啦🤣2年4个月前
  • luckymore: @邢文亮 哈哈哈😃9个月前
还可输入200个字