| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 |
- <!doctype html>
- <html data-framework="vue">
- <head>
- <meta charset="utf-8">
- <title>Vue.js • TodoMVC</title>
- <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
- <style> [v-cloak] { display: none; } </style>
- </head>
- <body>
- <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 class="todo"
- v-for="todo in filteredTodos"
- :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 v-text="remaining"></strong> {{remaining | pluralize 'item'}} 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>
- <!-- testing/benchmark only -->
- <script>
- var isPhantom = navigator.userAgent.indexOf('PhantomJS') > -1
- if (isPhantom) {
- localStorage.clear()
- } else {
- var now = window.performance && window.performance.now
- ? function () { return window.performance.now() }
- : Date.now
- var metrics = { beforeLoad: now() }
- }
- </script>
- <!-- end testing/bench -->
- <script src="../../dist/vue.js"></script>
- <script>metrics.afterLoad = now()</script>
- <script src="node_modules/director/build/director.js"></script>
- <script src="js/store.js"></script>
- <script>metrics.beforeRender = now()</script>
- <script src="js/app.js"></script>
- <script src="js/routes.js"></script>
- <script>metrics.afterRender = now()</script>
- <script src="perf.js"></script>
- </body>
- </html>
|