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