index.html 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <!doctype html>
  2. <html data-framework="vue">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Vue.js • TodoMVC</title>
  6. <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
  7. <style> [v-cloak] { display: none; } </style>
  8. </head>
  9. <body>
  10. <section class="todoapp">
  11. <header class="header">
  12. <h1>todos</h1>
  13. <input class="new-todo"
  14. autofocus autocomplete="off"
  15. placeholder="What needs to be done?"
  16. v-model="newTodo"
  17. @keyup.enter="addTodo">
  18. </header>
  19. <section class="main" v-show="todos.length" v-cloak>
  20. <input class="toggle-all" type="checkbox" v-model="allDone">
  21. <ul class="todo-list">
  22. <li class="todo"
  23. v-for="todo in filteredTodos"
  24. :class="{completed: todo.completed, editing: todo == editedTodo}">
  25. <div class="view">
  26. <input class="toggle" type="checkbox" v-model="todo.completed">
  27. <label @dblclick="editTodo(todo)">{{todo.title}}</label>
  28. <button class="destroy" @click="removeTodo(todo)"></button>
  29. </div>
  30. <input class="edit" type="text"
  31. v-model="todo.title"
  32. v-todo-focus="todo == editedTodo"
  33. @blur="doneEdit(todo)"
  34. @keyup.enter="doneEdit(todo)"
  35. @keyup.esc="cancelEdit(todo)">
  36. </li>
  37. </ul>
  38. </section>
  39. <footer class="footer" v-show="todos.length" v-cloak>
  40. <span class="todo-count">
  41. <strong v-text="remaining"></strong> {{remaining | pluralize 'item'}} left
  42. </span>
  43. <ul class="filters">
  44. <li><a href="#/all" :class="{selected: visibility == 'all'}">All</a></li>
  45. <li><a href="#/active" :class="{selected: visibility == 'active'}">Active</a></li>
  46. <li><a href="#/completed" :class="{selected: visibility == 'completed'}">Completed</a></li>
  47. </ul>
  48. <button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
  49. Clear completed
  50. </button>
  51. </footer>
  52. </section>
  53. <footer class="info">
  54. <p>Double-click to edit a todo</p>
  55. <p>Written by <a href="http://evanyou.me">Evan You</a></p>
  56. <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
  57. </footer>
  58. <!-- testing/benchmark only -->
  59. <script>
  60. var isPhantom = navigator.userAgent.indexOf('PhantomJS') > -1
  61. if (isPhantom) {
  62. localStorage.clear()
  63. } else {
  64. var now = window.performance && window.performance.now
  65. ? function () { return window.performance.now() }
  66. : Date.now
  67. var metrics = { beforeLoad: now() }
  68. }
  69. </script>
  70. <!-- end testing/bench -->
  71. <script src="../../dist/vue.js"></script>
  72. <script>metrics.afterLoad = now()</script>
  73. <script src="node_modules/director/build/director.js"></script>
  74. <script src="js/store.js"></script>
  75. <script>metrics.beforeRender = now()</script>
  76. <script src="js/app.js"></script>
  77. <script src="js/routes.js"></script>
  78. <script>metrics.afterRender = now()</script>
  79. <script src="perf.js"></script>
  80. </body>
  81. </html>