index.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  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>{{ remaining }}</strong> {{ remaining | pluralize }} 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. if (window.location.hash === '#test') {
  61. localStorage.clear()
  62. }
  63. var now = window.performance && window.performance.now
  64. ? function () { return window.performance.now() }
  65. : Date.now
  66. var metrics = { beforeLoad: now() }
  67. </script>
  68. <!-- end testing/bench -->
  69. <script src="../../dist/vue.js"></script>
  70. <script>metrics.afterLoad = now()</script>
  71. <script src="node_modules/director/build/director.js"></script>
  72. <script src="js/store.js"></script>
  73. <script>metrics.beforeRender = now()</script>
  74. <script src="js/app.js"></script>
  75. <script src="js/routes.js"></script>
  76. <script>metrics.afterRender = now()</script>
  77. <script src="perf.js"></script>
  78. </body>
  79. </html>