update syntax for v-ref & v-el

Author: yyx990803

src/compiler/compile.js

@@ -12,7 +12,6 @@ var componentDef = require('../directives/component')
 var bindRE = /^:|^v-bind:/
 var onRE = /^@/
 var argRE = /:(.*)$/
-var nodeRefRE = /^\$\$\./
 
 // terminal directives
 var terminalDirectives = [
@@ -613,15 +612,6 @@ function compileDirectives (attrs, options) {
       })
     } else
 
-    if (nodeRefRE.test(name)) {
-      value = _.camelize(name.replace(nodeRefRE, ''))
-      dirs.push({
-        name: 'el',
-        descriptors: [newDirParser.parse(value)],
-        def: options.directives.el
-      })
-    } else
-
     // attribute bindings
     if (bindRE.test(name)) {
       var attributeName = name.replace(bindRE, '')

src/deprecations.js

@@ -83,8 +83,17 @@ if (process.env.NODE_ENV !== 'production') {
 
     V_REF: function () {
       warn(
-        'v-ref will no longer be a directive in 1.0.0; Use the "$.id" special ' +
-        'syntax instead. See https://github.com/yyx990803/vue/issues/1292 for details.'
+        'v-ref will no longer take an attribute value in 1.0.0. Use "v-ref:id" syntax ' +
+        'instead. Also, refs will be registered under vm.$refs instead of vm.$.' +
+        newBindingSyntaxLink
+      )
+    },
+
+    V_EL: function () {
+      warn(
+        'v-el will no longer take an attribute value in 1.0.0. Use "v-el:id" syntax ' +
+        'instead. Also, nodes will be registered under vm.$els instead of vm.$$.' +
+        newBindingSyntaxLink
       )
     },
 

src/directives/el.js

@@ -6,8 +6,15 @@ module.exports = {
   priority: 1500,
 
   bind: function () {
+    var id = this.arg
+      ? _.camelize(this.arg)
+      : this.expression
+    if (process.env.NODE_ENV !== 'production' &&
+        !this.arg && id) {
+      _.deprecation.V_EL()
+    }
     if (!this._isDynamicLiteral) {
-      this.update(this.expression)
+      this.update(id)
     }
   },
 

src/directives/ref.js

@@ -15,7 +15,7 @@ module.exports = {
     // If we get here, it means this is a `v-ref` on a
     // child, because parent scope `v-ref` is stripped in
     // `v-component` already.
-    var ref = this.expression
+    var ref = this.arg || this.expression
     var context = this.vm._scope || this.vm._context
     context.$[ref] = this.vm
 

src/util/dom.js

@@ -79,7 +79,7 @@ exports.getBindAttr = function (node, name) {
   return val
 }
 
-var refRE = /^\$\./
+var refRE = /^v-ref:/
 exports.findRef = function (node) {
   if (node.hasAttributes()) {
     var attrs = node.attributes

src/vue.js

@@ -66,6 +66,22 @@ Object.defineProperty(p, '$data', {
   }
 })
 
+/**
+ * 1.0.0-alpha for 0.12 compat
+ */
+
+Object.defineProperty(p, '$els', {
+  get: function () {
+    return this.$$
+  }
+})
+
+Object.defineProperty(p, '$refs', {
+  get: function () {
+    return this.$
+  }
+})
+
 /**
  * Mixin internal instance methods
  */

test/unit/specs/directives/el_spec.js

@@ -47,16 +47,16 @@ if (_.inBrowser) {
         data: {
           ok: true
         },
-        template: '<div $$.test-el v-if="ok" id="test"></div>'
+        template: '<div v-el:test-el v-if="ok" id="test"></div>'
       })
-      expect(vm.$$.testEl).toBeTruthy()
-      expect(vm.$$.testEl.id).toBe('test')
+      expect(vm.$els.testEl).toBeTruthy()
+      expect(vm.$els.testEl.id).toBe('test')
       vm.ok = false
       _.nextTick(function () {
-        expect(vm.$$.testEl).toBeNull()
+        expect(vm.$els.testEl).toBeNull()
         vm.ok = true
         _.nextTick(function () {
-          expect(vm.$$.testEl.id).toBe('test')
+          expect(vm.$els.testEl.id).toBe('test')
           done()
         })
       })

test/unit/specs/directives/prop_spec.js

@@ -195,7 +195,7 @@ if (_.inBrowser) {
         data: {
           b: 'B'
         },
-        template: '<test $.child :b*="b"></test>',
+        template: '<test v-ref:child :b*="b"></test>',
         components: {
           test: {
             props: ['b'],

test/unit/specs/directives/ref_spec.js

@@ -26,10 +26,10 @@ if (_.inBrowser) {
         data: {
           ref: 'test2'
         },
-        template: '<test $.test-ref></test><test2 v-ref="{{ref}}"></test2>'
+        template: '<test v-ref:test-ref></test><test2 v-ref="{{ref}}"></test2>'
       })
-      expect(vm.$.testRef).toBeTruthy()
-      expect(vm.$.testRef.$options.id).toBe('test')
+      expect(vm.$refs.testRef).toBeTruthy()
+      expect(vm.$refs.testRef.$options.id).toBe('test')
       expect(vm.$.test2).toBeTruthy()
       expect(vm.$.test2.$options.id).toBe('test2')
     })
@@ -39,7 +39,7 @@ if (_.inBrowser) {
         el: el,
         components: components,
         data: { test: 'test' },
-        template: '<component :is="test" $.test></component>'
+        template: '<component :is="test" v-ref:test></component>'
       })
       expect(vm.$.test.$options.id).toBe('test')
       vm.test = 'test2'
@@ -57,7 +57,7 @@ if (_.inBrowser) {
       var vm = new Vue({
         el: el,
         data: { view: 'one' },
-        template: '{{$.test.value}}<component :is="view" $.test></component>',
+        template: '{{$refs.test.value}}<component :is="view" v-ref:test></component>',
         components: {
           one: {
             id: 'one',
@@ -96,7 +96,7 @@ if (_.inBrowser) {
         el: el,
         template:
           '<div>' +
-            '<comp $.out>{{$.out.msg}}</comp>' +
+            '<comp v-ref:out>{{$refs.out.msg}}</comp>' +
           '</div>',
         components: {
           comp: {