Commit 2522a26d authored by Sindre Sorhus's avatar Sindre Sorhus

Merge pull request #1081 from vuejs/master

Update Vue.js implementation to use latest version & move from labs to first tab
parents a1e91120 82153218
{
"name": "todomvc-vue",
"dependencies": {
"vue": "~0.10.0",
"vue": "~0.11.3",
"todomvc-common": "~0.3.0"
}
}
This diff is collapsed.
......@@ -4,6 +4,7 @@
<meta charset="utf-8">
<title>Vue.js • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<style> [v-cloak] { display: none; } </style>
</head>
<body>
<section id="todoapp">
......@@ -11,7 +12,7 @@
<h1>todos</h1>
<input id="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" v-model="newTodo" v-on="keyup:addTodo | key enter">
</header>
<section id="main" v-show="todos.length">
<section id="main" v-show="todos.length" v-cloak>
<input id="toggle-all" type="checkbox" v-model="allDone">
<ul id="todo-list">
<li class="todo" v-repeat="todos | filterTodos" v-class="completed: completed, editing: this == editedTodo">
......@@ -24,14 +25,14 @@
</li>
</ul>
</section>
<footer id="footer" v-show="todos.length">
<footer id="footer" v-show="todos.length" v-cloak>
<span id="todo-count">
<strong v-text="remaining"></strong> {{remaining | pluralize item}} left
</span>
<ul id="filters">
<li><a href="#/all" v-class="selected:filter=='all'">All</a></li>
<li><a href="#/active" v-class="selected:filter=='active'">Active</a></li>
<li><a href="#/completed" v-class="selected:filter=='completed'">Completed</a></li>
<li><a href="#/all" v-class="selected: activeFilter == 'all'">All</a></li>
<li><a href="#/active" v-class="selected: activeFilter == 'active'">Active</a></li>
<li><a href="#/completed" v-class="selected: activeFilter == 'completed'">Completed</a></li>
</ul>
<button id="clear-completed" v-on="click:removeCompleted" v-show="todos.length > remaining">
Clear completed ({{todos.length - remaining}})
......
......@@ -4,36 +4,35 @@
'use strict';
var filters = {
all: function () {
return true;
},
active: function (todo) {
return !todo.completed;
},
completed: function (todo) {
return todo.completed;
}
};
var app = exports.app = new Vue({
exports.app = new Vue({
// the root element that will be compiled
el: '#todoapp',
// data
// app state data
data: {
todos: todoStorage.fetch(),
newTodo: '',
editedTodo: null,
filter: 'all'
activeFilter: 'all',
filters: {
all: function () {
return true;
},
active: function (todo) {
return !todo.completed;
},
completed: function (todo) {
return todo.completed;
}
}
},
// ready hook, watch todos change for data persistence
ready: function () {
this.$watch('todos', function (todos) {
todoStorage.save(todos);
});
}, true);
},
// a custom directive to wait for the DOM to be updated
......@@ -51,23 +50,24 @@
}
},
// a custom filter that filters the displayed todos array
filters: {
filterTodos: function (todos) {
return todos.filter(filters[this.filter]);
return todos.filter(this.filters[this.activeFilter]);
}
},
// computed property
// computed properties
// http://vuejs.org/guide/computed.html
computed: {
remaining: function () {
return this.todos.filter(filters.active).length;
return this.todos.filter(this.filters.active).length;
},
allDone: {
$get: function () {
get: function () {
return this.remaining === 0;
},
$set: function (value) {
set: function (value) {
this.todos.forEach(function (todo) {
todo.completed = value;
});
......@@ -114,11 +114,9 @@
},
removeCompleted: function () {
this.todos = this.todos.filter(filters.active);
this.todos = this.todos.filter(this.filters.active);
}
}
});
app.filters = filters;
})(window);
\ No newline at end of file
......@@ -8,14 +8,14 @@
Object.keys(app.filters).forEach(function (filter) {
router.on(filter, function () {
app.filter = filter;
app.activeFilter = filter;
});
});
router.configure({
notfound: function () {
window.location.hash = '';
app.filter = 'all';
app.activeFilter = 'all';
}
});
......
# Vue.js TodoMVC Example
> Vue.js is an intuitive, fast and composable MVVM library for building interactive web interfaces. It provides efficient data bindings with a simple and flexible API.
> Vue.js is a library for building interactive web interfaces.
It provides data-driven, nestable view components with a simple and flexible API.
> _[Vue.js - vuejs.org](http://vuejs.org)_
......@@ -13,11 +14,12 @@ Here are some links you may find helpful:
* [API Reference](http://vuejs.org/api/)
* [Examples](http://vuejs.org/examples/)
* [Building Larger Apps with Vue.js](http://vuejs.org/guide/application.html)
* [Performance Comparison](http://vuejs.org/perf/)
Get help from other Vue.js users:
* [Vue.js on Twitter](https://twitter.com/vuejs)
* [Vue.js on Gitter](https://gitter.im/yyx990803/vue)
* [Vue.js discussion repo](https://github.com/vuejs/Discussion/issues)
_If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._
......
......@@ -126,6 +126,9 @@
<li class="routing">
<a href="examples/flight/" data-source="http://twitter.github.com/flight" data-content="Flight is a lightweight, component-based JavaScript framework that maps behavior to DOM nodes. Twitter uses it for their web applications.">Flight</a>
</li>
<li class="routing">
<a href="examples/vue/" data-source="http://vuejs.org" data-content="Vue.js provides the benefits of MVVM data binding and a composable component system with an extremely simple and flexible API.">Vue.js</a>
</li>
</ul>
</div>
<div class="js-app-list" data-app-list="ctojs">
......@@ -272,9 +275,6 @@
<li>
<a href="examples/componentjs/" data-source="http://componentjs.com" data-content="ComponentJS is a stand-alone MPL-licensed Open Source library for JavaScript, providing a powerful run-time Component System for hierarchically structuring the User-Interface (UI) dialogs of complex HTML5-based Rich Clients (aka Single-Page-Apps) — under maximum applied Separation of Concerns (SoC) architecture principle, through optional Model, View and Controller component roles, with sophisticated hierarchical Event, Service, Hook, Model, Socket and Property mechanisms, and fully independent and agnostic of the particular UI widget toolkit.">ComponentJS</a>
</li>
<li>
<a href="examples/vue/" data-source="http://vuejs.org" data-content="Vue.js provides the benefits of MVVM data binding and a composable component system with an extremely simple and flexible API.">Vue.js</a>
</li>
<li>
<a href="examples/react-backbone/" data-source="http://facebook.github.io/react/" data-content="This React example integrates Backbone for its model and router. It is a showcase of third-party library integration for developers wishing to use React together with a different JavaScript framework.">React + <br>Backbone.js</a>
</li>
......
......@@ -2221,11 +2221,11 @@
"name": "Twitter",
"url": "http://twitter.com/vuejs"
}, {
"name": "Google+ Community",
"url": "https://plus.google.com/communities/112229843610661683911"
"name": "Gitter Channel",
"url": "https://gitter.im/yyx990803/vue"
}, {
"name": "IRC Channel: #vuejs",
"url": "http://freenode.net/faq.shtml#whatwhy"
"name": "Discussions on GitHub",
"url": "https://github.com/vuejs/Discussion/issues"
}]
}]
},
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment