Skip to content

T
todomvc
Commit 2522a26d authored by Sindre Sorhus's avatar Sindre Sorhus
Browse files
Options

Merge pull request #1081 from vuejs/master 

Update Vue.js implementation to use latest version & move from labs to first tab
parents a1e91120 82153218
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 7896 additions and 4561 deletions
examples/vue/bower.json
View file @ 2522a26d
{ {
"name": "todomvc-vue", "name": "todomvc-vue",
"dependencies": { "dependencies": {
"vue": "~0.10.0", "vue": "~0.11.3",
"todomvc-common": "~0.3.0" "todomvc-common": "~0.3.0"
} }
} }
examples/vue/bower_components/vue/vue.js
View file @ 2522a26d
This diff is collapsed.
examples/vue/index.html
View file @ 2522a26d
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Vue.js • TodoMVC</title> <title>Vue.js • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css"> <link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<style> [v-cloak] { display: none; } </style>
</head> </head>
<body> <body>
<section id="todoapp"> <section id="todoapp">
...@@ -11,7 +12,7 @@ ...@@ -11,7 +12,7 @@
<h1>todos</h1> <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"> <input id="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" v-model="newTodo" v-on="keyup:addTodo | key enter">
</header> </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"> <input id="toggle-all" type="checkbox" v-model="allDone">
<ul id="todo-list"> <ul id="todo-list">
<li class="todo" v-repeat="todos | filterTodos" v-class="completed: completed, editing: this == editedTodo"> <li class="todo" v-repeat="todos | filterTodos" v-class="completed: completed, editing: this == editedTodo">
...@@ -24,14 +25,14 @@ ...@@ -24,14 +25,14 @@
</li> </li>
</ul> </ul>
</section> </section>
<footer id="footer" v-show="todos.length"> <footer id="footer" v-show="todos.length" v-cloak>
<span id="todo-count"> <span id="todo-count">
<strong v-text="remaining"></strong> {{remaining | pluralize item}} left <strong v-text="remaining"></strong> {{remaining | pluralize item}} left
</span> </span>
<ul id="filters"> <ul id="filters">
<li><a href="#/all" v-class="selected:filter=='all'">All</a></li> <li><a href="#/all" v-class="selected: activeFilter == 'all'">All</a></li>
<li><a href="#/active" v-class="selected:filter=='active'">Active</a></li> <li><a href="#/active" v-class="selected: activeFilter == 'active'">Active</a></li>
<li><a href="#/completed" v-class="selected:filter=='completed'">Completed</a></li> <li><a href="#/completed" v-class="selected: activeFilter == 'completed'">Completed</a></li>
</ul> </ul>
<button id="clear-completed" v-on="click:removeCompleted" v-show="todos.length > remaining"> <button id="clear-completed" v-on="click:removeCompleted" v-show="todos.length > remaining">
Clear completed ({{todos.length - remaining}}) Clear completed ({{todos.length - remaining}})
......
examples/vue/js/app.js
View file @ 2522a26d
...@@ -4,36 +4,35 @@ ...@@ -4,36 +4,35 @@
'use strict'; 'use strict';
var filters = { exports.app = new Vue({
all: function () {
return true;
},
active: function (todo) {
return !todo.completed;
},
completed: function (todo) {
return todo.completed;
}
};
var app = exports.app = new Vue({
// the root element that will be compiled // the root element that will be compiled
el: '#todoapp', el: '#todoapp',
// data // app state data
data: { data: {
todos: todoStorage.fetch(), todos: todoStorage.fetch(),
newTodo: '', newTodo: '',
editedTodo: null, 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 hook, watch todos change for data persistence
ready: function () { ready: function () {
this.$watch('todos', function (todos) { this.$watch('todos', function (todos) {
todoStorage.save(todos); todoStorage.save(todos);
}); }, true);
}, },
// a custom directive to wait for the DOM to be updated // a custom directive to wait for the DOM to be updated
...@@ -51,23 +50,24 @@ ...@@ -51,23 +50,24 @@
} }
}, },
// a custom filter that filters the displayed todos array
filters: { filters: {
filterTodos: function (todos) { 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 // http://vuejs.org/guide/computed.html
computed: { computed: {
remaining: function () { remaining: function () {
return this.todos.filter(filters.active).length; return this.todos.filter(this.filters.active).length;
}, },
allDone: { allDone: {
$get: function () { get: function () {
return this.remaining === 0; return this.remaining === 0;
}, },
$set: function (value) { set: function (value) {
this.todos.forEach(function (todo) { this.todos.forEach(function (todo) {
todo.completed = value; todo.completed = value;
}); });
...@@ -114,11 +114,9 @@ ...@@ -114,11 +114,9 @@
}, },
removeCompleted: function () { removeCompleted: function () {
this.todos = this.todos.filter(filters.active); this.todos = this.todos.filter(this.filters.active);
} }
} }
}); });
app.filters = filters;
})(window); })(window);
\ No newline at end of file
examples/vue/js/routes.js
View file @ 2522a26d
...@@ -8,14 +8,14 @@ ...@@ -8,14 +8,14 @@
Object.keys(app.filters).forEach(function (filter) { Object.keys(app.filters).forEach(function (filter) {
router.on(filter, function () { router.on(filter, function () {
app.filter = filter; app.activeFilter = filter;
}); });
}); });
router.configure({ router.configure({
notfound: function () { notfound: function () {
window.location.hash = ''; window.location.hash = '';
app.filter = 'all'; app.activeFilter = 'all';
} }
}); });
......
examples/vue/readme.md
View file @ 2522a26d
# Vue.js TodoMVC Example # 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)_ > _[Vue.js - vuejs.org](http://vuejs.org)_
...@@ -13,11 +14,12 @@ Here are some links you may find helpful: ...@@ -13,11 +14,12 @@ Here are some links you may find helpful:
* [API Reference](http://vuejs.org/api/) * [API Reference](http://vuejs.org/api/)
* [Examples](http://vuejs.org/examples/) * [Examples](http://vuejs.org/examples/)
* [Building Larger Apps with Vue.js](http://vuejs.org/guide/application.html) * [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: Get help from other Vue.js users:
* [Vue.js on Twitter](https://twitter.com/vuejs) * [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)._ _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)._
......
index.html
View file @ 2522a26d
...@@ -126,6 +126,9 @@ ...@@ -126,6 +126,9 @@
<li class="routing"> <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> <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>
<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> </ul>
</div> </div>
<div class="js-app-list" data-app-list="ctojs"> <div class="js-app-list" data-app-list="ctojs">
...@@ -272,9 +275,6 @@ ...@@ -272,9 +275,6 @@
<li> <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> <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>
<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> <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> <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> </li>
......
learn.json
View file @ 2522a26d
...@@ -2221,11 +2221,11 @@ ...@@ -2221,11 +2221,11 @@
"name": "Twitter", "name": "Twitter",
"url": "http://twitter.com/vuejs" "url": "http://twitter.com/vuejs"
}, { }, {
"name": "Google+ Community", "name": "Gitter Channel",
"url": "https://plus.google.com/communities/112229843610661683911" "url": "https://gitter.im/yyx990803/vue"
}, { }, {
"name": "IRC Channel: #vuejs", "name": "Discussions on GitHub",
"url": "http://freenode.net/faq.shtml#whatwhy" "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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7