fix examples

examples/grid/index.html

@@ -14,7 +14,7 @@
         <thead>
           <tr>
             <th v-for="key in columns"
-              on-click="sortBy(key)"
+              @click="sortBy(key)"
               :class="{active: sortKey == key}">
               {{key | capitalize}}
               <span class="arrow"

examples/modal/index.html

@@ -29,7 +29,7 @@
               <slot name="footer">
                 default footer
                 <button class="modal-default-button"
-                  on-click="show = false">
+                  @click="show = false">
                   OK
                 </button>
               </slot>
@@ -55,9 +55,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,7 +14,7 @@
 					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">
@@ -24,15 +24,15 @@
 						: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>
@@ -45,7 +45,7 @@
 					<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" 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

@@ -29,8 +29,8 @@
       <li>
         <div
           :class="{bold: isFolder}"
-          on-click="toggle"
-          on-dblclick="changeType">
+          @click="toggle"
+          @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>