Browse Source
* fix root v-else not rendering in production and switched examples to minified vue for better prod coverage * add dev build comment to examples * convert tabs to spaces in todomvc example for consistencydev
Chris Fritz
8 years ago
committed by
Evan You
Evan You
14 changed files with 99 additions and 79 deletions
@ -1,68 +1,69 @@ |
|||
<!doctype html> |
|||
<html data-framework="vue"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<title>Vue.js • TodoMVC</title> |
|||
<link rel="stylesheet" href="https://unpkg.com/todomvc-app-css/index.css"> |
|||
<script src="https:unpkg.com/director/build/director.js"></script> |
|||
<style>[v-cloak] { display: none; }</style> |
|||
</head> |
|||
<body> |
|||
<section class="todoapp"> |
|||
<header class="header"> |
|||
<h1>todos</h1> |
|||
<input class="new-todo" |
|||
autofocus autocomplete="off" |
|||
placeholder="What needs to be done?" |
|||
v-model="newTodo" |
|||
@keyup.enter="addTodo"> |
|||
</header> |
|||
<section class="main" v-show="todos.length" v-cloak> |
|||
<input class="toggle-all" type="checkbox" v-model="allDone"> |
|||
<ul class="todo-list"> |
|||
<li v-for="todo in filteredTodos" |
|||
class="todo" |
|||
:key="todo.id" |
|||
:class="{ completed: todo.completed, editing: todo == editedTodo }"> |
|||
<div class="view"> |
|||
<input class="toggle" type="checkbox" v-model="todo.completed"> |
|||
<label @dblclick="editTodo(todo)">{{ todo.title }}</label> |
|||
<button class="destroy" @click="removeTodo(todo)"></button> |
|||
</div> |
|||
<input class="edit" type="text" |
|||
v-model="todo.title" |
|||
v-todo-focus="todo == editedTodo" |
|||
@blur="doneEdit(todo)" |
|||
@keyup.enter="doneEdit(todo)" |
|||
@keyup.esc="cancelEdit(todo)"> |
|||
</li> |
|||
</ul> |
|||
</section> |
|||
<footer class="footer" v-show="todos.length" v-cloak> |
|||
<span class="todo-count"> |
|||
<strong>{{ remaining }}</strong> {{ remaining | pluralize }} left |
|||
</span> |
|||
<ul class="filters"> |
|||
<li><a href="#/all" :class="{ selected: visibility == 'all' }">All</a></li> |
|||
<li><a href="#/active" :class="{ selected: visibility == 'active' }">Active</a></li> |
|||
<li><a href="#/completed" :class="{ selected: visibility == 'completed' }">Completed</a></li> |
|||
</ul> |
|||
<button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining"> |
|||
Clear completed |
|||
</button> |
|||
</footer> |
|||
</section> |
|||
<footer class="info"> |
|||
<p>Double-click to edit a todo</p> |
|||
<p>Written by <a href="http://evanyou.me">Evan You</a></p> |
|||
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p> |
|||
</footer> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<title>Vue.js • TodoMVC</title> |
|||
<link rel="stylesheet" href="https://unpkg.com/todomvc-app-css/index.css"> |
|||
<script src="https:unpkg.com/director/build/director.js"></script> |
|||
<style>[v-cloak] { display: none; }</style> |
|||
</head> |
|||
<body> |
|||
<section class="todoapp"> |
|||
<header class="header"> |
|||
<h1>todos</h1> |
|||
<input class="new-todo" |
|||
autofocus autocomplete="off" |
|||
placeholder="What needs to be done?" |
|||
v-model="newTodo" |
|||
@keyup.enter="addTodo"> |
|||
</header> |
|||
<section class="main" v-show="todos.length" v-cloak> |
|||
<input class="toggle-all" type="checkbox" v-model="allDone"> |
|||
<ul class="todo-list"> |
|||
<li v-for="todo in filteredTodos" |
|||
class="todo" |
|||
:key="todo.id" |
|||
:class="{ completed: todo.completed, editing: todo == editedTodo }"> |
|||
<div class="view"> |
|||
<input class="toggle" type="checkbox" v-model="todo.completed"> |
|||
<label @dblclick="editTodo(todo)">{{ todo.title }}</label> |
|||
<button class="destroy" @click="removeTodo(todo)"></button> |
|||
</div> |
|||
<input class="edit" type="text" |
|||
v-model="todo.title" |
|||
v-todo-focus="todo == editedTodo" |
|||
@blur="doneEdit(todo)" |
|||
@keyup.enter="doneEdit(todo)" |
|||
@keyup.esc="cancelEdit(todo)"> |
|||
</li> |
|||
</ul> |
|||
</section> |
|||
<footer class="footer" v-show="todos.length" v-cloak> |
|||
<span class="todo-count"> |
|||
<strong>{{ remaining }}</strong> {{ remaining | pluralize }} left |
|||
</span> |
|||
<ul class="filters"> |
|||
<li><a href="#/all" :class="{ selected: visibility == 'all' }">All</a></li> |
|||
<li><a href="#/active" :class="{ selected: visibility == 'active' }">Active</a></li> |
|||
<li><a href="#/completed" :class="{ selected: visibility == 'completed' }">Completed</a></li> |
|||
</ul> |
|||
<button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining"> |
|||
Clear completed |
|||
</button> |
|||
</footer> |
|||
</section> |
|||
<footer class="info"> |
|||
<p>Double-click to edit a todo</p> |
|||
<p>Written by <a href="http://evanyou.me">Evan You</a></p> |
|||
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p> |
|||
</footer> |
|||
|
|||
<script> |
|||
// for testing |
|||
if (navigator.userAgent.indexOf('PhantomJS') > -1) localStorage.clear() |
|||
</script> |
|||
<script src="../../dist/vue.js"></script> |
|||
<script src="app.js"></script> |
|||
</body> |
|||
<script> |
|||
// for testing |
|||
if (navigator.userAgent.indexOf('PhantomJS') > -1) localStorage.clear() |
|||
</script> |
|||
<!-- Delete ".min" for console warnings in development --> |
|||
<script src="../../dist/vue.min.js"></script> |
|||
<script src="app.js"></script> |
|||
</body> |
|||
</html> |
|||
|
|||
Loading…
Reference in new issue