index.html 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>任务清单</title>
  8. <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  9. <link rel="stylesheet" href="./index.css" />
  10. </head>
  11. <body>
  12. <div id="app">
  13. <section class="todoapp">
  14. <header class="header">
  15. <h1>todos</h1>
  16. <input
  17. autofocus="autofocus"
  18. autocomplete="off"
  19. placeholder="输入您要完成的任务?"
  20. class="new-todo"
  21. />
  22. </header>
  23. <section class="main">
  24. <input id="toggle-all" type="checkbox" class="toggle-all" />
  25. <label for="toggle-all"></label>
  26. <ul class="todo-list">
  27. <li class="todo">
  28. <div class="view">
  29. <input type="checkbox" class="toggle" />
  30. <label>吃饭</label>
  31. <button class="destroy"></button>
  32. </div>
  33. <input type="text" class="edit" />
  34. </li>
  35. </ul>
  36. </section>
  37. <footer class="footer">
  38. <span class="todo-count"><strong>0</strong> items left </span>
  39. <ul class="filters">
  40. <li><a href="#/all" class="selected">All</a></li>
  41. <li><a href="#/active" class="">Active</a></li>
  42. <li><a href="#/completed" class="">Completed</a></li>
  43. </ul>
  44. <button class="clear-completed">Clear completed</button>
  45. </footer>
  46. </section>
  47. <footer class="info">
  48. <p>就是玩儿</p>
  49. </footer>
  50. </div>
  51. <script>
  52. new Vue({
  53. el: '#app',
  54. data: {},
  55. });
  56. </script>
  57. </body>
  58. </html>