syntax update: v-ref, v-el; deprecate v-class & v-style

yyx990803 · yyx990803 · commit 178203d91e53 · 2015-09-19T16:48:56.000-04:00
diff --git a/src/compiler/compile.js b/src/compiler/compile.js
@@ -13,7 +13,6 @@ var onRE = /^v-on:|^@/
 var literalRE = /#$/
 var argRE = /:(.*)$/
 var transitionRE = /^(v-bind:|:)?transition$/
-var nodeRefRE = /^\$\$\./
 
 // terminal directives
 var terminalDirectives = [
@@ -560,14 +559,6 @@ function compileDirectives (attrs, options) {
       })
     } else
 
-    // node ref: $$.xxx
-    if (nodeRefRE.test(name)) {
-      value = _.camelize(name.replace(nodeRefRE, ''))
-      pushDir('el', internalDirectives.el, {
-        literal: true
-      })
-    } else
-
     // event handlers
     if (onRE.test(name)) {
       pushDir('on', publicDirectives.on, {
@@ -579,7 +570,7 @@ function compileDirectives (attrs, options) {
     if (bindRE.test(name)) {
       dirName = name.replace(bindRE, '')
       if (dirName === 'style' || dirName === 'class') {
-        pushDir(dirName, publicDirectives[dirName])
+        pushDir(dirName, internalDirectives[dirName])
       } else {
         pushDir('bind', publicDirectives.bind, {
           arg: dirName
diff --git a/src/directive.js b/src/directive.js
@@ -33,6 +33,7 @@ function Directive (descriptor, vm, el, host, scope, frag) {
   this.descriptor = descriptor
   this.name = descriptor.name
   this.expression = descriptor.expression
+  this.arg = descriptor.arg
   this.filters = descriptor.filters
   this.literal = descriptor.literal
   // private
diff --git a/src/directives/internal/class.js b/src/directives/internal/class.js
diff --git a/src/directives/internal/component.js b/src/directives/internal/component.js
@@ -26,7 +26,7 @@ module.exports = {
 
       // check ref
       this.ref = _.findRef(this.el)
-      var refs = (this._scope || this.vm).$
+      var refs = (this._scope || this.vm).$refs
       if (this.ref && !refs.hasOwnProperty(this.ref)) {
         _.defineReactive(refs, this.ref, null)
       }
diff --git a/src/directives/internal/el.js b/src/directives/internal/el.js
diff --git a/src/directives/internal/index.js b/src/directives/internal/index.js
@@ -1,4 +1,5 @@
-exports.el = require('./el')
+exports.style = require('./style')
+exports['class'] = require('./class')
+exports.component = require('./component')
 exports.prop = require('./prop')
 exports.transition = require('./transition')
-exports.component = require('./component')
diff --git a/src/directives/internal/style.js b/src/directives/internal/style.js
diff --git a/src/directives/public/bind.js b/src/directives/public/bind.js
@@ -23,7 +23,7 @@ module.exports = {
   priority: 850,
 
   update: function (value) {
-    var attr = this.descriptor.arg
+    var attr = this.arg
     if (inputProps[attr] && attr in this.el) {
       if (!this.valueRemoved) {
         this.el.removeAttribute(attr)
diff --git a/src/directives/public/el.js b/src/directives/public/el.js
@@ -0,0 +1,30 @@
+var _ = require('../../util')
+
+module.exports = {
+
+  priority: 1500,
+
+  bind: function () {
+    if (!this.arg) {
+      process.env.NODE_ENV !== 'production' && _.warn(
+        'v-el requires an argument.'
+      )
+      return
+    }
+    var id = this.id = _.camelize(this.arg)
+    var refs = (this._scope || this.vm).$els
+    if (refs.hasOwnProperty(id)) {
+      refs[id] = this.el
+    } else {
+      _.defineReactive(refs, id, this.el)
+    }
+  },
+
+  unbind: function () {
+    if (!this.id) return
+    var refs = (this._scope || this.vm).$els
+    if (refs[this.id] === this.el) {
+      refs[this.id] = null
+    }
+  }
+}
diff --git a/src/directives/public/for.js b/src/directives/public/for.js
@@ -200,7 +200,8 @@ module.exports = {
     var parentScope = this._scope || this.vm
     var scope = Object.create(parentScope)
     // ref holder for the scope
-    scope.$ = {}
+    scope.$refs = {}
+    scope.$els = {}
     // make sure point $parent to parent scope
     scope.$parent = parentScope
     // for two-way binding on alias
@@ -227,7 +228,7 @@ module.exports = {
   updateRef: function () {
     var ref = this.ref
     if (!ref) return
-    var hash = (this._scope || this.vm).$
+    var hash = (this._scope || this.vm).$refs
     var refs
     if (!this.converted) {
       refs = this.frags.map(findVmFromFrag)
@@ -499,7 +500,7 @@ module.exports = {
 
   unbind: function () {
     if (this.ref) {
-      (this._scope || this.vm).$[this.ref] = null
+      (this._scope || this.vm).$refs[this.ref] = null
     }
     if (this.frags) {
       var i = this.frags.length
diff --git a/src/directives/public/index.js b/src/directives/public/index.js
@@ -15,8 +15,10 @@ exports.on = require('./on')
 
 // attributes
 exports.bind = require('./bind')
-exports['class'] = require('./class')
-exports.style = require('./style')
+
+// ref & el
+exports.el = require('./el')
+exports.ref = require('./ref')
 
 // cloak
 exports.cloak = require('./cloak')
diff --git a/src/directives/public/on.js b/src/directives/public/on.js
@@ -40,7 +40,7 @@ module.exports = {
 
   bind: function () {
     // 1.0.0 key filter
-    var rawEvent = this.event = this.descriptor.arg
+    var rawEvent = this.event = this.arg
     var keyIndex = rawEvent.indexOf(':')
     if (keyIndex > -1) {
       this.event = rawEvent.slice(0, keyIndex)
diff --git a/src/directives/public/ref.js b/src/directives/public/ref.js
@@ -0,0 +1,10 @@
+if (process.env.NODE_ENV !== 'production') {
+  module.exports = {
+    bind: function () {
+      require('../../util').warn(
+        'v-ref:' + this.arg + ' must be used on a child ' +
+        'component. Found on <' + this.el.tagName.toLowerCase() + '>.'
+      )
+    }
+  }
+}
diff --git a/src/instance/init.js b/src/instance/init.js
@@ -19,8 +19,8 @@ exports._init = function (options) {
   this.$parent = options._parent
   this.$root = options._root || this
   this.$children = []
-  this.$ = {}           // child vm references
-  this.$$ = {}          // element references
+  this.$refs = {}       // child vm references
+  this.$els = {}        // element references
   this._watchers = []   // all watchers as an array
   this._directives = [] // all directives
 
@@ -74,7 +74,7 @@ exports._init = function (options) {
 
   // set ref
   if (options._ref) {
-    (this._scope || this._context).$[options._ref] = this
+    (this._scope || this._context).$refs[options._ref] = this
   }
 
   // merge options.
diff --git a/src/instance/lifecycle.js b/src/instance/lifecycle.js
@@ -157,8 +157,8 @@ exports._destroy = function (remove, deferCleanup) {
   var ref = this.$options._ref
   if (ref) {
     var scope = this._scope || this._context
-    if (scope.$[ref] === this) {
-      scope.$[ref] = null
+    if (scope.$refs[ref] === this) {
+      scope.$refs[ref] = null
     }
   }
   // remove reference to self on $el
diff --git a/src/util/dom.js b/src/util/dom.js
@@ -302,7 +302,7 @@ exports.createAnchor = function (content, persist) {
  * @return {String|undefined}
  */
 
-var refRE = /^\$\./
+var refRE = /^v-ref:/
 exports.findRef = function (node) {
   if (node.hasAttributes()) {
     var attrs = node.attributes
diff --git a/test/unit/specs/compiler/compile_spec.js b/test/unit/specs/compiler/compile_spec.js
@@ -115,13 +115,13 @@ if (_.inBrowser) {
       var args = vm._bindDir.calls.argsFor(0)
       expect(args[0].name).toBe('class')
       expect(args[0].expression).toBe('a')
-      expect(args[0].def).toBe(publicDirectives.class)
+      expect(args[0].def).toBe(internalDirectives.class)
       expect(args[1]).toBe(el)
       // 2
       args = vm._bindDir.calls.argsFor(1)
       expect(args[0].name).toBe('style')
       expect(args[0].expression).toBe('b')
-      expect(args[0].def).toBe(publicDirectives.style)
+      expect(args[0].def).toBe(internalDirectives.style)
       expect(args[1]).toBe(el)
       // 3
       args = vm._bindDir.calls.argsFor(2)
diff --git a/test/unit/specs/directives/internal/class_spec.js b/test/unit/specs/directives/internal/class_spec.js
@@ -1,5 +1,5 @@
 var _ = require('../../../../../src/util')
-var def = require('../../../../../src/directives/public/class')
+var def = require('../../../../../src/directives/internal/class')
 
 if (_.inBrowser) {
   describe(':class', function () {
diff --git a/test/unit/specs/directives/internal/prop_spec.js b/test/unit/specs/directives/internal/prop_spec.js
@@ -16,7 +16,7 @@ if (_.inBrowser) {
         data: {
           b: 'B'
         },
-        template: '<test v-bind:b="b" $.child></test>',
+        template: '<test v-bind:b="b" v-ref:child></test>',
         components: {
           test: {
             props: ['b'],
@@ -28,7 +28,7 @@ if (_.inBrowser) {
       vm.b = 'BB'
       _.nextTick(function () {
         expect(el.innerHTML).toBe('<test>BB</test>')
-        vm.$.child.b = 'BBB'
+        vm.$refs.child.b = 'BBB'
         expect(vm.b).toBe('BB')
         _.nextTick(function () {
           expect(el.innerHTML).toBe('<test>BBB</test>')
@@ -73,7 +73,7 @@ if (_.inBrowser) {
             a: 'A'
           }
         },
-        template: '<test v-bind:testt&="test" :bb&="b" :a&=" test.a " $.child></test>',
+        template: '<test v-bind:testt&="test" :bb&="b" :a&=" test.a " v-ref:child></test>',
         components: {
           test: {
             props: ['testt', 'bb', 'a'],
@@ -98,14 +98,14 @@ if (_.inBrowser) {
           _.nextTick(function () {
             expect(el.firstChild.textContent).toBe('AAAA BBB AAAA')
             // test two-way
-            vm.$.child.bb = 'B'
-            vm.$.child.testt = { a: 'A' }
+            vm.$refs.child.bb = 'B'
+            vm.$refs.child.testt = { a: 'A' }
             _.nextTick(function () {
               expect(el.firstChild.textContent).toBe('A B A')
               expect(vm.test.a).toBe('A')
-              expect(vm.test).toBe(vm.$.child.testt)
+              expect(vm.test).toBe(vm.$refs.child.testt)
               expect(vm.b).toBe('B')
-              vm.$.child.a = 'Oops'
+              vm.$refs.child.a = 'Oops'
               _.nextTick(function () {
                 expect(el.firstChild.textContent).toBe('Oops B Oops')
                 expect(vm.test.a).toBe('Oops')
@@ -123,7 +123,7 @@ if (_.inBrowser) {
         data: {
           b: 'B'
         },
-        template: '<test :b*="b" $.child></test>',
+        template: '<test :b*="b" v-ref:child></test>',
         components: {
           test: {
             props: ['b'],
@@ -145,7 +145,7 @@ if (_.inBrowser) {
         data: {
           b: 'B'
         },
-        template: '<test :b&=" b + \'B\'" $.child></test>',
+        template: '<test :b&=" b + \'B\'" v-ref:child></test>',
         components: {
           test: {
             props: ['b'],
@@ -158,7 +158,7 @@ if (_.inBrowser) {
       vm.b = 'BB'
       _.nextTick(function () {
         expect(el.innerHTML).toBe('<test>BBB</test>')
-        vm.$.child.b = 'hahaha'
+        vm.$refs.child.b = 'hahaha'
         _.nextTick(function () {
           expect(vm.b).toBe('BB')
           expect(el.innerHTML).toBe('<test>hahaha</test>')
diff --git a/test/unit/specs/directives/internal/style_spec.js b/test/unit/specs/directives/internal/style_spec.js
@@ -1,5 +1,5 @@
 var _ = require('../../../../../src/util')
-var def = require('../../../../../src/directives/public/style')
+var def = require('../../../../../src/directives/internal/style')
 var Vue = require('../../../../../src/vue')
 
 function checkPrefixedProp (prop) {
diff --git a/test/unit/specs/directives/public/bind_spec.js b/test/unit/specs/directives/public/bind_spec.js
@@ -12,10 +12,7 @@ if (_.inBrowser) {
     })
 
     it('normal attr', function () {
-      dir.descriptor = {
-        arg: 'test'
-      }
-
+      dir.arg = 'test'
       dir.update('ok')
       expect(el.getAttribute('test')).toBe('ok')
       dir.update('again')
@@ -30,27 +27,21 @@ if (_.inBrowser) {
 
     it('should set property for input value', function () {
       dir.el = document.createElement('input')
-      dir.descriptor = {
-        arg: 'value'
-      }
+      dir.arg = 'value'
       dir.update('what')
       expect(dir.el.hasAttribute('value')).toBe(false)
       expect(dir.el.value).toBe('what')
       dir.el = document.createElement('input')
       dir.el.type = 'checkbox'
-      dir.descriptor = {
-        arg: 'checked'
-      }
+      dir.arg = 'checked'
       expect(dir.el.checked).toBe(false)
       dir.update(true)
       expect(dir.el.checked).toBe(true)
     })
 
     it('xlink', function () {
       var xlinkNS = 'http://www.w3.org/1999/xlink'
-      dir.descriptor = {
-        arg: 'xlink:special'
-      }
+      dir.arg = 'xlink:special'
       dir.update('ok')
       expect(el.getAttributeNS(xlinkNS, 'special')).toBe('ok')
       dir.update('again')
diff --git a/test/unit/specs/directives/public/el_spec.js b/test/unit/specs/directives/public/el_spec.js
@@ -17,16 +17,16 @@ if (_.inBrowser) {
         data: {
           ok: true
         },
-        template: '<div v-if="ok" $$.test-el id="test"></div>'
+        template: '<div v-if="ok" v-el:test-el 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()
         })
       })
@@ -36,7 +36,7 @@ if (_.inBrowser) {
       var vm = new Vue({
         el: el,
         data: { items: [1, 2] },
-        template: '<div v-for="n in items"><p $$.test>{{n}}</p>{{$$.test.textContent}}</div>'
+        template: '<div v-for="n in items"><p v-el:test>{{n}}</p>{{$els.test.textContent}}</div>'
       })
       expect(vm.$el.textContent).toBe('1122')
     })
diff --git a/test/unit/specs/directives/public/for/for_ref_spec.js b/test/unit/specs/directives/public/for/for_ref_spec.js
diff --git a/test/unit/specs/directives/public/ref_spec.js b/test/unit/specs/directives/public/ref_spec.js
diff --git a/test/unit/specs/instance/init_spec.js b/test/unit/specs/instance/init_spec.js
diff --git a/test/unit/specs/misc_spec.js b/test/unit/specs/misc_spec.js

Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@ module.exports = {`
`26`	`26`
`27`	`27`	`// check ref`
`28`	`28`	`this.ref = _.findRef(this.el)`
`29`		`- var refs = (this._scope \|\| this.vm).$`
	`29`	`+ var refs = (this._scope \|\| this.vm).$refs`
`30`	`30`	`if (this.ref && !refs.hasOwnProperty(this.ref)) {`
`31`	`31`	`_.defineReactive(refs, this.ref, null)`
`32`	`32`	`}`