fix examples

Author: yyx990803

examples/grid/index.html

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

examples/modal/index.html

@@ -28,8 +28,9 @@
             <div class="modal-footer">
               <slot name="footer">
                 default footer
-                <button class="modal-default-button"
-                  on-click="show = false">
+                <button
+                  class="modal-default-button"
+                  @click="show = false">
                   OK
                 </button>
               </slot>
@@ -55,9 +56,9 @@
 
     <!-- app -->
     <div id="app">
-      <button id="show-modal" on-click="showModal = true">Show Modal</button>
+      <button id="show-modal" @click="showModal = true">Show Modal</button>
       <!-- use the modal component, pass in the prop -->
-      <modal bind-show@="showModal">
+      <modal :show@="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 on-click="remove(stat)">X</button>
+        <button @click="remove(stat)">X</button>
       </div>
       <form id="add">
         <input name="newlabel" v-model="newLabel">
-        <button on-click="add">Add a Stat</button>
+        <button @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"
-					on-keyup-enter="addTodo">
+					@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"
-						:class="{completed: todo.completed, editing: todo == editedTodo}">
+						v-class="{completed: todo.completed, editing: todo == editedTodo}">
 						<div class="view">
 							<input class="toggle" type="checkbox" v-model="todo.completed">
-							<label on-dblclick="editTodo(todo)">{{todo.title}}</label>
-							<button class="destroy" 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"
-							on-blur="doneEdit(todo)"
-							on-keyup-enter="doneEdit(todo)"
-							on-keyup-esc="cancelEdit(todo)">
+							@blur="doneEdit(todo)"
+							@keyup:enter="doneEdit(todo)"
+							@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" :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>
+					<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>
 				</ul>
-				<button class="clear-completed" on-click="removeCompleted" v-show="todos.length > remaining">
+				<button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
 					Clear completed
 				</button>
 			</footer>

examples/tree/index.html

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