update Vue.js implementation to 0.11.3

5c05b747 · Evan You · a1e91120 · 5c05b747 · 5c05b747 · 5c05b747
Commit 5c05b747 authored Dec 02, 2014 by Evan You
7 changed files
--- a/examples/vue/bower.json
+++ b/examples/vue/bower.json
 {
  "name": "todomvc-vue",
  "dependencies": {
-    "vue": "~0.10.0",
+    "vue": "~0.11.3",
    "todomvc-common": "~0.3.0"
  }
 }
--- a/examples/vue/bower_components/vue/vue.js
+++ b/examples/vue/bower_components/vue/vue.js
--- a/examples/vue/index.html
+++ b/examples/vue/index.html
@@ -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}})

--- a/examples/vue/js/app.js
+++ b/examples/vue/js/app.js
@@ -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
--- a/examples/vue/js/routes.js
+++ b/examples/vue/js/routes.js
@@ -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';
 		}
 	});


--- a/examples/vue/readme.md
+++ b/examples/vue/readme.md
 # 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)._


--- a/learn.json
+++ b/learn.json
@@ -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"
 			}]
 		}]
 	},