Skip to content

T
todomvc
Commit 5c05b747 authored by Evan You's avatar Evan You
Browse files
Options

update Vue.js implementation to 0.11.3

parent a1e91120
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 7893 additions and 4558 deletions
examples/vue/bower.json
View file @ 5c05b747
{ {
"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 @ 5c05b747
This diff is collapsed.
examples/vue/index.html
View file @ 5c05b747
...@@ -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 @ 5c05b747
...@@ -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 @ 5c05b747
...@@ -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 @ 5c05b747
# 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)._
......
learn.json
View file @ 5c05b747
...@@ -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