1-
2- <!doctype html>
1+ <!DOCTYPE html>
32< html data-framework ="vue ">
43 < head >
5- < meta charset ="utf-8 ">
4+ < meta charset ="utf-8 " / >
65 < title > LeanTodo • Vue.js</ title >
7- < link rel ="stylesheet " href ="https://unpkg.com/todomvc-app-css/index.css ">
6+ < link rel ="stylesheet " href ="https://unpkg.com/todomvc-app-css/index.css " / >
87 < style >
9- [v-cloak ] { display : none; }
8+ [v-cloak ] {
9+ display : none;
10+ }
1011 .userinfo {
1112 position : absolute;
1213 bottom : -46px ;
3233 < body >
3334 < section class ="todoapp ">
3435 < h1 > LeanTodo</ h1 >
35- < form action ="# " id ="login " v-on:submit.prevent ="login " v-if ="!user " v-cloak >
36- < input v-model ="username " autofocus required class ="new-todo " placeholder ="Username ">
37- < input type ="password " v-model ="password " required class ="new-todo " placeholder ="Password ">
36+ < form
37+ action ="# "
38+ id ="login "
39+ v-on:submit.prevent ="login "
40+ v-if ="!user "
41+ v-cloak
42+ >
43+ < input
44+ v-model ="username "
45+ autofocus
46+ required
47+ class ="new-todo "
48+ placeholder ="Username "
49+ />
50+ < input
51+ type ="password "
52+ v-model ="password "
53+ required
54+ class ="new-todo "
55+ placeholder ="Password "
56+ />
3857 < div class ="control ">
39- < input type ="submit " value ="Login " class ="new-todo " id ="login-button ">
40- < input type ="button " @click ="signup " value ="Signup " class ="new-todo ">
58+ < input
59+ type ="submit "
60+ value ="Login "
61+ class ="new-todo "
62+ id ="login-button "
63+ />
64+ < input
65+ type ="button "
66+ @click ="signup "
67+ value ="Signup "
68+ class ="new-todo "
69+ />
4170 </ div >
4271 </ form >
4372 < template v-if ="user " v-cloak >
4473 < header class ="header ">
45- < input class ="new-todo "
74+ < input
75+ class ="new-todo "
4676 v-if ="user "
47- autofocus autocomplete ="off "
77+ autofocus
78+ autocomplete ="off "
4879 placeholder ="What needs to be done? "
4980 v-model ="newTodo "
50- @keyup.enter ="addTodo ">
81+ @keyup.enter ="addTodo "
82+ />
5183 </ header >
5284 < section class ="main " v-show ="todos.length ">
53- < input class ="toggle-all " type ="checkbox " v-model ="allDone ">
85+ < input class ="toggle-all " type ="checkbox " v-model ="allDone " / >
5486 < ul class ="todo-list ">
55- < li v-for ="todo in filteredTodos "
87+ < li
88+ v-for ="todo in filteredTodos "
5689 class ="todo "
5790 :key ="todo.objectId "
58- :class ="{ completed: todo.done, editing: todo == editedTodo } ">
91+ :class ="{ completed: todo.done, editing: todo == editedTodo } "
92+ >
5993 < div class ="view ">
60- < input class ="toggle " type ="checkbox " v-model ="todo.done " @change ="doneEdit(todo) ">
94+ < input
95+ class ="toggle "
96+ type ="checkbox "
97+ v-model ="todo.done "
98+ @change ="doneEdit(todo) "
99+ />
61100 < label @dblclick ="editTodo(todo) "> {{ todo.content }}</ label >
62101 < button class ="destroy " @click ="removeTodo(todo) "> </ button >
63102 </ div >
64- < input class ="edit " type ="text "
103+ < input
104+ class ="edit "
105+ type ="text "
65106 v-model ="todo.content "
66107 v-todo-focus ="todo == editedTodo "
67108 @blur ="doneEdit(todo) "
68109 @keyup.enter ="doneEdit(todo) "
69- @keyup.esc ="cancelEdit(todo) ">
110+ @keyup.esc ="cancelEdit(todo) "
111+ />
70112 </ li >
71113 </ ul >
72114 </ section >
@@ -75,25 +117,51 @@ <h1>LeanTodo</h1>
75117 < strong > {{ remaining }}</ strong > {{ remaining | pluralize }} left
76118 </ span >
77119 < ul class ="filters ">
78- < li > < a href ="#/all " :class ="{ selected: visibility == 'all' } "> All</ a > </ li >
79- < li > < a href ="#/active " :class ="{ selected: visibility == 'active' } "> Active</ a > </ li >
80- < li > < a href ="#/completed " :class ="{ selected: visibility == 'completed' } "> Completed</ a > </ li >
120+ < li >
121+ < a href ="#/all " :class ="{ selected: visibility == 'all' } "> All</ a >
122+ </ li >
123+ < li >
124+ < a href ="#/active " :class ="{ selected: visibility == 'active' } "
125+ > Active</ a
126+ >
127+ </ li >
128+ < li >
129+ < a
130+ href ="#/completed "
131+ :class ="{ selected: visibility == 'completed' } "
132+ > Completed</ a
133+ >
134+ </ li >
81135 </ ul >
82- < button class ="clear-completed " @click ="removeCompleted " v-show ="todos.length > remaining ">
136+ < button
137+ class ="clear-completed "
138+ @click ="removeCompleted "
139+ v-show ="todos.length > remaining "
140+ >
83141 Clear completed
84142 </ button >
85143 </ footer >
86144 < p class ="info userinfo ">
87- Logged in as {{user.username}} (< a @click =' logout ' > Logout</ a > )
145+ Logged in as {{user.username}} (< a @click =" logout " > Logout</ a > )
88146 </ p >
89147 </ template >
90148 </ section >
91149 < footer class ="info ">
92150 < p > Double-click to edit a todo</ p >
93- < p > fork from < a href ="https://vuejs.org/v2/examples/todomvc.html "> Vue.js TodoMVC</ a > / Powered by < a href ="https://leancloud.cn "> LeanCloud</ a > </ p >
151+ < p >
152+ fork from
153+ < a href ="https://vuejs.org/v2/examples/todomvc.html "> Vue.js TodoMVC</ a >
154+ / Powered by < a href ="https://leancloud.cn "> LeanCloud</ a >
155+ </ p >
94156 </ footer >
95- < a href ="https://github.com/leancloud/leantodo-vue "> < img style ="position: absolute; top: 0; right: 0; border: 0; " src ="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67 " alt ="Fork me on GitHub " data-canonical-src ="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png "> </ a >
96- < script src ="https://unpkg.com/leancloud-storage@^3.0.0-beta.3/dist/av-live-query-min.js "> </ script >
157+ < a href ="https://github.com/leancloud/leantodo-vue "
158+ > < img
159+ style ="position: absolute; top: 0; right: 0; border: 0; "
160+ src ="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67 "
161+ alt ="Fork me on GitHub "
162+ data-canonical-src ="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png "
163+ /> </ a >
164+ < script src ="../../dist/av-live-query-min.js "> </ script >
97165 < script src ="https://unpkg.com/vue/dist/vue.js "> </ script >
98166 < script src ="app.js "> </ script >
99167 </ body >
0 commit comments