update Vue.js to 1.0

examples/vue/index.html

@@ -11,18 +11,18 @@
 		<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" v-on="keyup:addTodo | key 'enter'">
+				<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 class="todo" v-repeat="todo: filteredTodos" v-class="completed: todo.completed, editing: todo == editedTodo">
+					<li class="todo" v-for="todo in filteredTodos" :class="{completed: todo.completed, editing: todo == editedTodo}">
 						<div class="view">
 							<input class="toggle" type="checkbox" v-model="todo.completed">
-							<label v-on="dblclick: editTodo(todo)">{{todo.title}}</label>
-							<button class="destroy" v-on="click: removeTodo(todo)"></button>
+							<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" v-on="blur: doneEdit(todo), keyup: doneEdit(todo) | key 'enter', keyup: cancelEdit(todo) | key 'esc'">
+						<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>
@@ -31,11 +31,11 @@
 					<strong v-text="remaining"></strong> {{remaining | pluralize 'item'}} left
 				</span>
 				<ul class="filters">
-					<li><a href="#/all" v-class="selected: visibility == 'all'">All</a></li>
-					<li><a href="#/active" v-class="selected: visibility == 'active'">Active</a></li>
-					<li><a href="#/completed" v-class="selected: visibility == 'completed'">Completed</a></li>
+					<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" v-on="click:removeCompleted" v-show="todos.length > remaining">
+				<button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
 					Clear completed
 				</button>
 			</footer>

examples/vue/js/app.js

@@ -25,7 +25,7 @@
 		// the root element that will be compiled
 		el: '.todoapp',
 
-		// app state data
+		// app initial state
 		data: {
 			todos: todoStorage.fetch(),
 			newTodo: '',
@@ -33,25 +33,11 @@
 			visibility: 'all'
 		},
 
-		// ready hook, watch todos change for data persistence
-		ready: function () {
-			this.$watch('todos', function (todos) {
-				todoStorage.save(todos);
-			}, { deep: true });
-		},
-
-		// a custom directive to wait for the DOM to be updated
-		// before focusing on the input field.
-		// http://vuejs.org/guide/directives.html#Writing_a_Custom_Directive
-		directives: {
-			'todo-focus': function (value) {
-				if (!value) {
-					return;
-				}
-				var el = this.el;
-				setTimeout(function () {
-					el.focus();
-				}, 0);
+		// watch todos change for localStorage persistence
+		watch: {
+			todos: {
+				deep: true,
+				handler: todoStorage.save
 			}
 		},
 
@@ -117,6 +103,21 @@
 			removeCompleted: function () {
 				this.todos = filters.active(this.todos);
 			}
+		},
+
+		// a custom directive to wait for the DOM to be updated
+		// before focusing on the input field.
+		// http://vuejs.org/guide/custom-directive.html
+		directives: {
+			'todo-focus': function (value) {
+				if (!value) {
+					return;
+				}
+				var el = this.el;
+				Vue.nextTick(function () {
+					el.focus();
+				});
+			}
 		}
 	});
 

examples/vue/package.json

@@ -2,7 +2,7 @@
   "private": true,
   "dependencies": {
     "director": "^1.2.0",
-    "vue": "^0.12.8",
+    "vue": "^1.0.1",
     "todomvc-common": "^1.0.1",
     "todomvc-app-css": "^2.0.0"
   }

examples/vue/readme.md

@@ -6,6 +6,7 @@ It provides data-driven, nestable view components with a simple and flexible API
 > _[Vue.js - vuejs.org](http://vuejs.org)_
 
 ## Learning Vue.js
+
 The [Vue.js website](http://vuejs.org/) is a great resource to get started.
 
 Here are some links you may find helpful:
@@ -18,8 +19,8 @@ Here are some links you may find helpful:
 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)
+* [Vue.js on Gitter](https://gitter.im/vuejs/vue)
+* [Vue.js Forum](http://forum.vuejs.org)
 
 _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)._