ToDoList(Vue示例)

---

以下代码片段来自 https://jsfiddle.net/yyx990803/4dr2fLb7/只是为了纯手打一遍。

HTML

<section class="todoapp">
  <header class="header">
    <h1>todos</h1>
    <input class="new-todo"
      autofocus autocomplete="off"
      placeholder="What needs to be done?"
      v-model="newTodo"
      @keyup.enter="addTodo">
  </header>
  <section class="main" v-show="todos.length" v-cloak>
    <input class="toggle-all" type="checkbox" v-model="allDone">
    <ul class="todo-list">
      <li v-for="todo in filteredTodos"
        class="todo"
        :key="todo.id"
        :class="{ completed: todo.completed, editing: todo == editedTodo }">
        <div class="view">
          <input class="toggle" type="checkbox" v-model="todo.completed">
          <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
          <button class="destroy" @click="removeTodo(todo)"></button>
        </div>
        <input class="edit" type="text"
          v-model="todo.title"
          v-todo-focus="todo == editedTodo"
          @blur="doneEdit(todo)"
          @keyup.enter="doneEdit(todo)"
          @keyup.esc="cancelEdit(todo)">
      </li>
    </ul>
  </section>
  <footer class="footer" v-show="todos.length" v-cloak>
    <span class="todo-count">
      <strong>{{ remaining }}</strong> {{ remaining | pluralize }} left
    </span>
    <ul class="filters">
      <li><a href="#/all" :class="{ selected: visibility == 'all' }">All</a></li>
      <li><a href="#/active" :class="{ selected: visibility == 'active' }">Active</a></li>
      <li><a href="#/completed" :class="{ selected: visibility == 'completed' }">Completed</a></li>
    </ul>
    <button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
      Clear completed
    </button>
  </footer>
</section>
<footer class="info">
  <p>Double-click to edit a todo</p>
  <p>Written by <a href="http://evanyou.me">Evan You</a></p>
  <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>

JavaScript

// Full sepc-compliant TodoMVC with localStorage persistence
// and hash-based routing in ~120 effective lines of JavaScript

// localStorage persistence
var STORAGE_KEY = 'todos-vuejs-2.0'
var todoStorage = {
    fetch: function() {
        var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
        todos.forEach(function (todo, index) {
            todos.id = index
        })
        todoStorage.uid = todos.length
        return todos
    },
    save: function(todos) {
        localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
    }
}

//visibility filters
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
        })
    }
}

// app Vue instance
var app = new Vue({
    // app initial state
    data: {
        todos: todoStorage.fetch(),
        newTodo: '',
        eiditedTodo: null,
        visibility: 'all'
    },
// watch todos change for localStorage persistence
watch: {
    todos: {
        handler: function(todos) {
            todoStorage.save(todos)
        },
        deep:true
        }
    },

// computed properties
// http://vuejs.org/guide/computed.html
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
                })
            }
        }
    },
filters: {
    pluralize: function(n) {
        return n === 1 ? 'item' : 'items'
        }
    },

// methods that implement data logic
// note there's no DOM manipulation here at all.
methods: {
    addTodo: function() {
        var value = this.newTodo && this.newTodo.trim()
        if(!value) {
            return
        }
        this.todos.push({
            id: todoStorage.uid++,
            title: value,
            complete: false
        })
        this.newTodo = ''
    },

    removeTodo: function(todo) {
        this.todos.splice(this.todos.indexOf(todo), 1)
    },

    editTodo: function（todo) {
        this.beforeEditCache = todo.title
        this.editedTodo = todo
    },

    doneEdit: function(todo) {
        if(!this.editedTodo) {
            return
        }
        this.editTodo = null
        todo.title = todo.title.trim()
        if(!todo.title) {
            this.removeTodo(todo)
        }
    },

    cancelEdit: function(todo) {
        this.eidtedTodo = null
        todo.title = this.beforeEditCache
    },

    removeCompleted: function() {
        this.todos = filters.active(this.todos)
    }
},

// a custom directive to wait for the DOM to be updated
// before focusing on the input field.
directive: {
    'todo-focus': function(el, binding) {
        if(binding.value) {
            el.focus()
            }
        }
    }
})

// handle routing
function onHashChange() {
    var visibility = window.location.hash.replace(/#/?/, '')
    if (filters[visibility]) {
        app.visibility = visibility
    } else {
        window.location.hash = ''
        app.visibiliy = 'all'
    }
}

window.addEventListener('hashchange', onHashChange)
onHashChange()

// mount
app.$mount('.todoapp')

CSS

[v-cloak] { display: none; }

总结：看懂65%
Repost: 2017.11.07 80%