hoist el

src/compiler/compile.js

@@ -87,11 +87,25 @@ function linkAndCapture (linker, vm) {
   var originalDirCount = vm._directives.length
   linker()
   var dirs = vm._directives.slice(originalDirCount)
+  var dir
   for (var i = 0, l = dirs.length; i < l; i++) {
-    if (dirs[i].name === 'component') dirs[i]._bind()
+    dir = dirs[i]
+    if (dir.name === 'if' ||
+        dir.name === 'for' ||
+        dir.name === 'repeat') {
+      dir._bind()
+    }
   }
   for (var i = 0, l = dirs.length; i < l; i++) {
-    if (dirs[i].name !== 'component') dirs[i]._bind()
+    dir = dirs[i]
+    if (dir.name === 'component' ||
+        dir.name === 'el') {
+      dir._bind()
+    }
+  }
+  for (var i = 0, l = dirs.length; i < l; i++) {
+    dir = dirs[i]
+    if (!dir._bound) dir._bind()
   }
   return dirs
 }
@@ -544,6 +558,8 @@ function compileDirectives (attrs, options) {
           _.deprecation.V_ON()
         } else if (dirName === 'attr') {
           _.deprecation.V_ATTR()
+        } else if (dirName === 'el') {
+          _.deprecation.V_EL()
         }
 
       }
@@ -556,6 +572,16 @@ function compileDirectives (attrs, options) {
       }
     } else
 
+    // speical case for el
+    if (name === 'el' || name === 'bind-el') {
+      dirs.push({
+        name: 'el',
+        arg: bindRE.test(name),
+        descriptors: [newDirParser.parse(value)],
+        def: options.directives.el
+      })
+    } else
+
     // attribute bindings
     if (bindRE.test(name)) {
       var attributeName = name.replace(bindRE, '')

src/directives/component.js

@@ -41,8 +41,9 @@ module.exports = {
         _.deprecation.V_REF()
       }
       this.ref = ref || this.param('ref')
-      if (this.ref) {
-        _.defineReactive((this._scope || this.vm).$, this.ref, null)
+      var refs = (this._scope || this.vm).$
+      if (this.ref && !refs.hasOwnProperty(this.ref)) {
+        _.defineReactive(refs, this.ref, null)
       }
 
       if (this.keepAlive) {

src/directives/el.js

@@ -1,15 +1,24 @@
+var _ = require('../util')
+
 module.exports = {
 
   isLiteral: true,
+  priority: 1000,
 
   bind: function () {
-    if (process.env.NODE_ENV !== 'production') {
-      require('../util').deprecation.V_EL()
+    var scope = this._scope || this.vm
+    var refs = scope.$$
+    var id = this.id = this.arg // bind-el ?
+      ? scope.$eval(this.expression)
+      : this.expression
+    if (refs.hasOwnProperty(id)) {
+      refs[id] = this.el
+    } else {
+      _.defineReactive(refs, id, this.el)
     }
-    this.vm.$$[this.expression] = this.el
   },
 
   unbind: function () {
-    delete this.vm.$$[this.expression]
+    (this._scope || this.vm).$$[this.id] = null
   }
 }

test/unit/specs/directives/el_spec.js

@@ -13,12 +13,12 @@ if (_.inBrowser) {
     it('normal', function () {
       var vm = new Vue({
         el: el,
-        template: '<div v-el="test" id="test"></div>'
+        template: '<div el="test" id="test"></div>'
       })
       expect(vm.$$.test).toBeTruthy()
       expect(vm.$$.test.id).toBe('test')
       vm._directives[0]._teardown()
-      expect(vm.$$.test).toBeUndefined()
+      expect(vm.$$.test).toBeNull()
     })
 
     it('with v-repeat', function (done) {