Inicio Explorar Axuda
Rexistro Iniciar sesión
vuejs
/
vue
réplica de https://github.com/vuejs/vue.git
2
0
Fork 0
Ficheiros Incidencias 0 Wiki
Explorar o código

update examples to use on- and bind- syntax

Evan You %!s(int64=10) %!d(string=hai) anos
pai
d951cc0390
achega
f0c20d6912
Modificáronse 8 ficheiros con 60 adicións e 34 borrados
Dividir vista Mostrar estatísticas de Diff
  1. 3 3
      examples/grid/index.html
  2. 3 3
      examples/modal/index.html
  3. 4 4
      examples/svg/index.html
  4. 11 11
      examples/todomvc/index.html
  5. 5 3
      examples/tree/index.html
  6. 12 5
      src/compiler/compile.js
  7. 8 5
      src/directive.js
  8. 14 0
      src/directives/on.js

+ 3 - 3
examples/grid/index.html
Ver ficheiro 

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

+ 3 - 3
examples/modal/index.html
Ver ficheiro 

@@ -9,7 +9,7 @@
 
   <body>
 
     <!-- template for the modal component -->
 
     <script type="x/template" id="modal-template">
 
-      <div class="modal-mask" v-show="show" v-transition="modal">
 
+      <div class="modal-mask" v-show="show" transition="modal">
 
         <div class="modal-wrapper">
 
           <div class="modal-container">
 
 
@@ -29,7 +29,7 @@
 
               <slot name="footer">
 
                 default footer
 
                 <button class="modal-default-button"
 
-                  v-on="click: show = false">
 
+                  on-click="show = false">
 
                   OK
 
                 </button>
 
               </slot>
 
@@ -55,7 +55,7 @@
 
 
     <!-- app -->
 
     <div id="app">
 
-      <button id="show-modal" v-on="click: showModal = true">Show Modal</button>
 
+      <button id="show-modal" on-click="showModal = true">Show Modal</button>
 
       <!-- use the modal component, pass in the prop -->
 
       <modal show="{{@showModal}}">
 
         <!--

+ 4 - 4
examples/svg/index.html
Ver ficheiro 

@@ -11,7 +11,7 @@
 
     <!-- template for the polygraph component. -->
 
     <script type="text/x-template" id="polygraph-template">
 
       <g>
 
-        <polygon v-attr="points:points"></polygon>
 
+        <polygon bind-points="points"></polygon>
 
         <circle cx="100" cy="100" r="80"></circle>
 
         <axis-label
 
           v-for="stat in stats"
 
@@ -24,7 +24,7 @@
 
 
     <!-- template for the axis label component. -->
 
     <script type="text/x-template" id="axis-label-template">
 
-      <text v-attr="x:point.x, y:point.y">{{stat.label}}</text>
 
+      <text bind-x="point.x" bind-y="point.y">{{stat.label}}</text>
 
     </script>
 
 
     <!-- demo root element -->
 
@@ -38,11 +38,11 @@
 
         <label>{{stat.label}}</label>
 
         <input type="range" v-model="stat.value" min="0" max="100">
 
         <span>{{stat.value}}</span>
 
-        <button v-on="click:remove(stat)">X</button>
 
+        <button on-click="remove(stat)">X</button>
 
       </div>
 
       <form id="add">
 
         <input name="newlabel" v-model="newLabel">
 
-        <button v-on="click:add">Add a Stat</button>
 
+        <button on-click="add">Add a Stat</button>
 
       </form>
 
       <pre id="raw">{{stats | json}}</pre>
 
     </div>

+ 11 - 11
examples/todomvc/index.html
Ver ficheiro 

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

+ 5 - 3
examples/tree/index.html
Ver ficheiro 

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

+ 12 - 5
src/compiler/compile.js
Ver ficheiro 

@@ -513,7 +513,7 @@ function makeTerminalNodeLinkFn (el, dirName, value, options, def) {
 
 function compileDirectives (attrs, options) {
 
   var i = attrs.length
 
   var dirs = []
 
-  var attr, name, value, dir, dirName, dirDef, descriptor, arg
 
+  var attr, name, value, dir, dirName, dirDef, arg
 
   while (i--) {
 
     attr = attrs[i]
 
     name = attr.name
 
@@ -550,7 +550,6 @@ function compileDirectives (attrs, options) {
 
 
     // attribute bindings
 
     if (bindRE.test(name)) {
 
-      descriptor = newDirParser.parse(value)
 
       var attributeName = name.replace(bindRE, '')
 
       if (attributeName === 'style' || attributeName === 'class') {
 
         dirName = attributeName
 
@@ -561,22 +560,30 @@ function compileDirectives (attrs, options) {
 
       dirs.push({
 
         name: dirName,
 
         arg: arg,
 
-        descriptors: [descriptor],
 
+        descriptors: [newDirParser.parse(value)],
 
         def: options.directives[dirName]
 
       })
 
     } else
 
 
     // event handlers
 
     if (onRE.test(name)) {
 
-      descriptor = newDirParser.parse(value)
 
       dirs.push({
 
         name: 'on',
 
         arg: name.replace(onRE, ''),
 
-        descriptors: [descriptor],
 
+        descriptors: [newDirParser.parse(value)],
 
         def: options.directives.on
 
       })
 
     } else
 
 
+    // transition
 
+    if (name === 'transition') {
 
+      dirs.push({
 
+        name: 'transition',
 
+        descriptors: [newDirParser.parse(value)],
 
+        def: options.directives.transition
 
+      })
 
+    } else
 
+
 
     // TODO: remove this in 1.0.0
 
     if (config.interpolate) {
 
       dir = collectAttrDirective(name, value, options)

+ 8 - 5
src/directive.js
Ver ficheiro 

@@ -58,18 +58,21 @@ function Directive (name, el, vm, descriptor, def, host, scope, frag, arg) {
 
  */
 
 
 Directive.prototype._bind = function (def) {
 
+  var name = this.name
 
   if (
 
-    (this.name !== 'cloak' || this.vm._isCompiled) &&
 
+    (name !== 'cloak' || this.vm._isCompiled) &&
 
     this.el && this.el.removeAttribute
 
   ) {
 
     this.el.removeAttribute(config.prefix + this.name)
 
     // 1.0.0: remove bind/on
 
-    if (this.name === 'attr') {
 
+    if (name === 'attr') {
 
       this.el.removeAttribute('bind-' + this.arg)
 
-    } else if (this.name === 'class' || this.name === 'style') {
 
-      this.el.removeAttribute('bind-' + this.name)
 
-    } else if (this.name === 'on') {
 
+    } else if (name === 'class' || name === 'style') {
 
+      this.el.removeAttribute('bind-' + name)
 
+    } else if (name === 'on') {
 
       this.el.removeAttribute('on-' + this.arg)
 
+    } else if (name === 'transition') {
 
+      this.el.removeAttribute(name)
 
     }
 
   }
 
   if (typeof def === 'function') {

+ 14 - 0
src/directives/on.js
Ver ficheiro 

@@ -1,4 +1,5 @@
 
 var _ = require('../util')
 
+var keyFilter = require('../filters').key
 
 
 module.exports = {
 
 
@@ -6,6 +7,14 @@ module.exports = {
 
   priority: 700,
 
 
   bind: function () {
 
+    // 1.0.0 key filter
 
+    var rawArg = this.arg
 
+    var keyIndex = rawArg.indexOf(':')
 
+    if (keyIndex > -1) {
 
+      this.arg = rawArg.slice(0, keyIndex)
 
+      this.key = rawArg.slice(keyIndex + 1)
 
+    }
 
+
 
     // deal with iframes
 
     if (
 
       this.el.tagName === 'IFRAME' &&
 
@@ -28,6 +37,11 @@ module.exports = {
 
       )
 
       return
 
     }
 
+
 
+    if (this.key) {
 
+      handler = keyFilter(handler, this.key)
 
+    }
 
+
 
     this.reset()
 
     var scope = this._scope || this.vm
 
     this.handler = function (e) {