use new prop binding type indicator syntax

Author: yyx990803

examples/modal/index.html

@@ -57,7 +57,7 @@
     <div id="app">
       <button id="show-modal" on-click="showModal = true">Show Modal</button>
       <!-- use the modal component, pass in the prop -->
-      <modal :show="@showModal">
+      <modal bind-show@="showModal">
         <!--
           you can use custom content here to overwrite
           default content

src/compiler/compile-props.js

@@ -102,32 +102,35 @@ module.exports = function compileProps (el, propOptions) {
         }
       }
     } else {
-      // new syntax
-      value = prop.raw = _.getBindAttr(el, attr)
+      // new syntax, check binding type
+      if ((value = _.getBindAttr(el, attr)) === null) {
+        if ((value = _.getBindAttr(el, attr + '@')) !== null) {
+          prop.mode = propBindingModes.TWO_WAY
+        } else if ((value = _.getBindAttr(el, attr + '*')) !== null) {
+          prop.mode = propBindingModes.ONE_TIME
+        }
+      }
+      prop.raw = value
       if (value !== null) {
         // mark it so we know this is a bind
         prop.bindSyntax = true
         parsed = dirParser.parse(value)
         value = parsed.expression
         prop.filters = parsed.filters
-        // check binding type
+        // check literal
         if (literalValueRE.test(value)) {
           prop.mode = propBindingModes.ONE_TIME
         } else {
           prop.dynamic = true
-          if (value.charAt(0) === '*') {
-            prop.mode = propBindingModes.ONE_TIME
-            value = value.slice(1).trim()
-          } else if (value.charAt(0) === '@') {
-            value = value.slice(1).trim()
-            if (settablePathRE.test(value)) {
-              prop.mode = propBindingModes.TWO_WAY
-            } else {
-              process.env.NODE_ENV !== 'production' && _.warn(
-                'Cannot bind two-way prop with non-settable ' +
-                'parent path: ' + value
-              )
-            }
+          // check non-settable path for two-way bindings
+          if (process.env.NODE_ENV !== 'production' &&
+              prop.mode === propBindingModes.TWO_WAY &&
+              !settablePathRE.test(value)) {
+            prop.mode = propBindingModes.ONE_WAY
+            _.warn(
+              'Cannot bind two-way prop with non-settable ' +
+              'parent path: ' + value
+            )
           }
         }
       }

test/unit/specs/compiler/compile_spec.js

@@ -308,13 +308,14 @@ if (_.inBrowser) {
         { name: 'testOneTime' },
         { name: 'optimizeLiteral' }
       ]
-      el.setAttribute('bind-test-normal', 'a')
-      el.setAttribute('test-literal', '1')
-      el.setAttribute('bind-optimize-literal', '1')
-      el.setAttribute('bind-test-two-way', '@a')
-      el.setAttribute('bind-two-way-warn', '@a + 1')
-      el.setAttribute('bind-test-one-time', '*a')
-      compiler.compileAndLinkProps(vm, el, props)
+      el.innerHTML = '<div ' +
+        'bind-test-normal="a" ' +
+        'test-literal="1" ' +
+        'bind-optimize-literal="1" ' +
+        'bind-test-two-way@="a" ' +
+        'bind-two-way-warn@="a + 1" ' +
+        'bind-test-one-time*="a"></div>'
+      compiler.compileAndLinkProps(vm, el.firstChild, props)
       expect(vm._bindDir.calls.count()).toBe(3) // skip literal and one time
       // literal
       expect(vm.testLiteral).toBe(1)

test/unit/specs/directives/prop_spec.js

@@ -90,6 +90,59 @@ if (_.inBrowser) {
       })
     })
 
+    it('two-way binding (new syntax)', function (done) {
+      var vm = new Vue({
+        el: el,
+        data: {
+          b: 'B',
+          test: {
+            a: 'A'
+          }
+        },
+        template: '<test bind-testt@="test" :bb@="b" :a@=" test.a " v-ref="child"></test>',
+        components: {
+          test: {
+            props: ['testt', 'bb', 'a'],
+            template: '{{testt.a}} {{bb}} {{a}}'
+          }
+        }
+      })
+      expect(el.firstChild.textContent).toBe('A B A')
+      vm.test.a = 'AA'
+      vm.b = 'BB'
+      _.nextTick(function () {
+        expect(el.firstChild.textContent).toBe('AA BB AA')
+        vm.test = { a: 'AAA' }
+        _.nextTick(function () {
+          expect(el.firstChild.textContent).toBe('AAA BB AAA')
+          vm.$data = {
+            b: 'BBB',
+            test: {
+              a: 'AAAA'
+            }
+          }
+          _.nextTick(function () {
+            expect(el.firstChild.textContent).toBe('AAAA BBB AAAA')
+            // test two-way
+            vm.$.child.bb = 'B'
+            vm.$.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.b).toBe('B')
+              vm.$.child.a = 'Oops'
+              _.nextTick(function () {
+                expect(el.firstChild.textContent).toBe('Oops B Oops')
+                expect(vm.test.a).toBe('Oops')
+                done()
+              })
+            })
+          })
+        })
+      })
+    })
+
     it('$data as prop', function (done) {
       var vm = new Vue({
         el: el,
@@ -136,6 +189,28 @@ if (_.inBrowser) {
       })
     })
 
+    it('explicit one time binding (new syntax)', function (done) {
+      var vm = new Vue({
+        el: el,
+        data: {
+          b: 'B'
+        },
+        template: '<test $.child :b*="b"></test>',
+        components: {
+          test: {
+            props: ['b'],
+            template: '{{b}}'
+          }
+        }
+      })
+      expect(el.innerHTML).toBe('<test>B</test>')
+      vm.b = 'BB'
+      _.nextTick(function () {
+        expect(el.innerHTML).toBe('<test>B</test>')
+        done()
+      })
+    })
+
     it('non-settable parent path', function (done) {
       var vm = new Vue({
         el: el,
@@ -164,6 +239,34 @@ if (_.inBrowser) {
       })
     })
 
+    it('non-settable parent path (new syntax)', function (done) {
+      var vm = new Vue({
+        el: el,
+        data: {
+          b: 'B'
+        },
+        template: '<test :b@="b + \'B\'" v-ref="child"></test>',
+        components: {
+          test: {
+            props: ['b'],
+            template: '{{b}}'
+          }
+        }
+      })
+      expect(hasWarned(_, 'Cannot bind two-way prop with non-settable parent path')).toBe(true)
+      expect(el.innerHTML).toBe('<test>BB</test>')
+      vm.b = 'BB'
+      _.nextTick(function () {
+        expect(el.innerHTML).toBe('<test>BBB</test>')
+        vm.$.child.b = 'hahaha'
+        _.nextTick(function () {
+          expect(vm.b).toBe('BB')
+          expect(el.innerHTML).toBe('<test>hahaha</test>')
+          done()
+        })
+      })
+    })
+
     it('warn invalid keys', function () {
       new Vue({
         el: el,