support new child component ref syntax

src/directives/internal/component.js

@@ -25,7 +25,7 @@ module.exports = {
       this.keepAlive = this.param('keep-alive') != null
 
       // check ref
-      this.ref = this.param('ref')
+      this.ref = _.findRef(this.el)
       var refs = (this._scope || this.vm).$
       if (this.ref && !refs.hasOwnProperty(this.ref)) {
         _.defineReactive(refs, this.ref, null)

src/directives/public/for.js

@@ -46,7 +46,7 @@ module.exports = {
     this.idKey = this.param('track-by')
 
     // check ref
-    this.ref = this.param('ref')
+    this.ref = _.findRef(this.el)
 
     // check for transition stagger
     var stagger = +this.param('stagger')

src/util/dom.js

@@ -294,3 +294,24 @@ exports.createAnchor = function (content, persist) {
     ? document.createComment(content)
     : document.createTextNode(persist ? ' ' : '')
 }
+
+/**
+ * Find a component ref attribute that starts with $.
+ *
+ * @param {Element} node
+ * @return {String|undefined}
+ */
+
+var refRE = /^\$\./
+exports.findRef = function (node) {
+  if (node.hasAttributes()) {
+    var attrs = node.attributes
+    for (var i = 0, l = attrs.length; i < l; i++) {
+      var name = attrs[i].name
+      if (refRE.test(name)) {
+        node.removeAttribute(name)
+        return _.camelize(name.replace(refRE, ''))
+      }
+    }
+  }
+}

test/unit/specs/directives/internal/prop_spec.js

@@ -16,7 +16,7 @@ if (_.inBrowser) {
         data: {
           b: 'B'
         },
-        template: '<test bind-b="b" ref="child"></test>',
+        template: '<test bind-b="b" $.child></test>',
         components: {
           test: {
             props: ['b'],
@@ -73,7 +73,7 @@ if (_.inBrowser) {
             a: 'A'
           }
         },
-        template: '<test bind-testt@="test" bind-bb@="b" bind-a@=" test.a " ref="child"></test>',
+        template: '<test bind-testt@="test" bind-bb@="b" bind-a@=" test.a " $.child></test>',
         components: {
           test: {
             props: ['testt', 'bb', 'a'],
@@ -123,7 +123,7 @@ if (_.inBrowser) {
         data: {
           b: 'B'
         },
-        template: '<test bind-b*="b" ref="child"></test>',
+        template: '<test bind-b*="b" $.child></test>',
         components: {
           test: {
             props: ['b'],
@@ -145,7 +145,7 @@ if (_.inBrowser) {
         data: {
           b: 'B'
         },
-        template: '<test bind-b@=" b + \'B\'" ref="child"></test>',
+        template: '<test bind-b@=" b + \'B\'" $.child></test>',
         components: {
           test: {
             props: ['b'],

test/unit/specs/directives/internal/ref_spec.js

@@ -26,12 +26,12 @@ if (_.inBrowser) {
         data: {
           ref: 'test2'
         },
-        template: '<test ref="test"></test><test2 bind-ref="ref"></test2>'
+        template: '<test $.test></test><test2 $.test-case></test2>'
       })
       expect(vm.$.test).toBeTruthy()
       expect(vm.$.test.$options.id).toBe('test')
-      expect(vm.$.test2).toBeTruthy()
-      expect(vm.$.test2.$options.id).toBe('test2')
+      expect(vm.$.testCase).toBeTruthy()
+      expect(vm.$.testCase.$options.id).toBe('test2')
     })
 
     it('with dynamic component', function (done) {
@@ -39,7 +39,7 @@ if (_.inBrowser) {
         el: el,
         components: components,
         data: { test: 'test' },
-        template: '<component bind-is="test" ref="test"></component>'
+        template: '<component bind-is="test" $.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 bind-is="view" ref="test"></component>',
+        template: '{{$.test.value}}<component bind-is="view" $.test></component>',
         components: {
           one: {
             id: 'one',
@@ -96,7 +96,7 @@ if (_.inBrowser) {
         el: el,
         template:
           '<div>' +
-            '<comp ref="out">{{$.out.msg}}</comp>' +
+            '<comp $.out>{{$.out.msg}}</comp>' +
           '</div>',
         components: {
           comp: {

test/unit/specs/directives/public/for/for_ref_spec.js

@@ -12,7 +12,7 @@ describe('v-for + ref', function () {
     var vm = new Vue({
       el: el,
       data: { items: [1, 2, 3, 4, 5] },
-      template: '<test v-for="item in items" bind-item="item" ref="test"></test>',
+      template: '<test v-for="item in items" bind-item="item" $.test></test>',
       components: {
         test: {
           props: ['item']
@@ -41,7 +41,7 @@ describe('v-for + ref', function () {
           b: 2
         }
       },
-      template: '<test v-for="item in items" bind-item="item" ref="test"></test>',
+      template: '<test v-for="item in items" bind-item="item" $.test></test>',
       components: {
         test: {
           props: ['item']
@@ -65,10 +65,10 @@ describe('v-for + ref', function () {
   it('nested', function () {
     var vm = new Vue({
       el: el,
-      template: '<c1 ref="c1"></c1>',
+      template: '<c1 $.c1></c1>',
       components: {
         c1: {
-          template: '<div v-for="n in 2" ref="c2"></div>'
+          template: '<div v-for="n in 2" $.c2></div>'
         }
       }
     })

test/unit/specs/misc_spec.js

@@ -34,7 +34,7 @@ describe('Misc', function () {
     var spy1 = jasmine.createSpy('attached')
     var spy2 = jasmine.createSpy('detached')
     var el = document.createElement('div')
-    el.innerHTML = '<outer ref="outter"><inner></inner></outer>'
+    el.innerHTML = '<outer $.outter><inner></inner></outer>'
     document.body.appendChild(el)
 
     var vm = new Vue({