update examples for new syntax

Author: yyx990803

examples/grid/index.html

@@ -14,11 +14,11 @@
         <thead>
           <tr>
             <th v-for="key in columns"
-              @click="sortBy(key)"
-              v-class="{active: sortKey == key}">
+              v-on:click="sortBy(key)"
+              v-bind:class="{active: sortKey == key}">
               {{key | capitalize}}
               <span class="arrow"
-                v-class="reversed[key] ? 'dsc' : 'asc'">
+                v-bind:class="reversed[key] ? 'dsc' : 'asc'">
               </span>
             </th>
           </tr>

examples/modal/index.html

@@ -30,7 +30,7 @@
                 default footer
                 <button
                   class="modal-default-button"
-                  @click="show = false">
+                  v-on:click="show = false">
                   OK
                 </button>
               </slot>
@@ -56,9 +56,9 @@
 
     <!-- app -->
     <div id="app">
-      <button id="show-modal" @click="showModal = true">Show Modal</button>
+      <button id="show-modal" v-on:click="showModal = true">Show Modal</button>
       <!-- use the modal component, pass in the prop -->
-      <modal :show&="showModal">
+      <modal :show.sync="showModal">
         <!--
           you can use custom content here to overwrite
           default content

examples/svg/index.html

@@ -38,11 +38,11 @@
         <label>{{stat.label}}</label>
         <input type="range" v-model="stat.value" min="0" max="100">
         <span>{{stat.value}}</span>
-        <button @click="remove(stat)">X</button>
+        <button v-on:click="remove(stat)">X</button>
       </div>
       <form id="add">
         <input name="newlabel" v-model="newLabel">
-        <button @click="add">Add a Stat</button>
+        <button v-on:click="add">Add a Stat</button>
       </form>
       <pre id="raw">{{stats | json}}</pre>
     </div>

examples/todomvc/index.html

@@ -14,25 +14,25 @@ <h1>todos</h1>
 					autofocus autocomplete="off"
 					placeholder="What needs to be done?"
 					v-model="newTodo"
-					@keyup:enter="addTodo">
+					v-on: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-for="todo in filteredTodos"
-						v-class="{completed: todo.completed, editing: todo == editedTodo}">
+						v-bind:class="{completed: todo.completed, editing: todo == editedTodo}">
 						<div class="view">
 							<input class="toggle" type="checkbox" v-model="todo.completed">
-							<label @dblclick="editTodo(todo)">{{todo.title}}</label>
-							<button class="destroy" @click="removeTodo(todo)"></button>
+							<label v-on:dblclick="editTodo(todo)">{{todo.title}}</label>
+							<button class="destroy" v-on:click="removeTodo(todo)"></button>
 						</div>
 						<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)">
+							v-on:blur="doneEdit(todo)"
+							v-on:keyup.enter="doneEdit(todo)"
+							v-on:keyup.esc="cancelEdit(todo)">
 					</li>
 				</ul>
 			</section>
@@ -41,11 +41,11 @@ <h1>todos</h1>
 					<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" v-bind:class="{selected: visibility == 'all'}">All</a></li>
+					<li><a href="#/active" v-bind:class="{selected: visibility == 'active'}">Active</a></li>
+					<li><a href="#/completed" v-bind:class="{selected: visibility == 'completed'}">Completed</a></li>
 				</ul>
-				<button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
+				<button class="clear-completed" v-on:click="removeCompleted" v-show="todos.length > remaining">
 					Clear completed
 				</button>
 			</footer>

examples/tree/index.html

@@ -28,7 +28,7 @@
     <script type="text/x-template" id="item-template">
       <li>
         <div
-          v-class="{bold: isFolder}"
+          v-bind:class="{bold: isFolder}"
           v-on:click="toggle"
           v-on:dblclick="changeType">
           {{model.name}}
@@ -40,7 +40,7 @@
             v-for="model in model.children"
             :model="model">
           </item>
-          <li @click="addChild">+</li>
+          <li v-on:click="addChild">+</li>
         </ul>
       </li>
     </script>