diff --git a/examples/grid/index.html b/examples/grid/index.html index 106d783a8..09e9fa0f3 100644 --- a/examples/grid/index.html +++ b/examples/grid/index.html @@ -14,11 +14,11 @@ + on-click="sortBy(key)" + bind-class="{active: sortKey == key}"> {{key | capitalize}} + bind-class="reversed[key] ? 'dsc' : 'asc'"> diff --git a/examples/modal/index.html b/examples/modal/index.html index 5d85f44ed..9c2cad3c7 100644 --- a/examples/modal/index.html +++ b/examples/modal/index.html @@ -9,7 +9,7 @@ @@ -38,11 +38,11 @@ {{stat.value}} - +
- + 
{{stats | json}}
diff --git a/examples/todomvc/index.html b/examples/todomvc/index.html index 74a9b3c0c..5bccf6987 100644 --- a/examples/todomvc/index.html +++ b/examples/todomvc/index.html @@ -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'">
@@ -41,11 +41,11 @@ {{remaining | pluralize 'item'}} left - diff --git a/examples/tree/index.html b/examples/tree/index.html index c94be2459..5d72a39ea 100644 --- a/examples/tree/index.html +++ b/examples/tree/index.html @@ -27,15 +27,17 @@ diff --git a/src/compiler/compile.js b/src/compiler/compile.js index d06ec261f..58e45a716 100644 --- a/src/compiler/compile.js +++ b/src/compiler/compile.js @@ -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) diff --git a/src/directive.js b/src/directive.js index 17766c417..4fe5c3aec 100644 --- a/src/directive.js +++ b/src/directive.js @@ -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') { diff --git a/src/directives/on.js b/src/directives/on.js index d4ecef8fe..e5db629b9 100644 --- a/src/directives/on.js +++ b/src/directives/on.js @@ -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) {