feat: support .property shorthand syntax for v-bind.prop modifier

close #7582

Author: yyx990803

src/compiler/parser/index.js

@@ -21,13 +21,14 @@ import {
 } from '../helpers'
 
 export const onRE = /^@|^v-on:/
-export const dirRE = /^v-|^@|^:/
+export const dirRE = /^v-|^@|^:|^\./
 export const forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/
 export const forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/
 const stripParensRE = /^\(|\)$/g
 
 const argRE = /:(.*)$/
-export const bindRE = /^:|^v-bind:/
+export const bindRE = /^:|^\.|^v-bind:/
+const propBindRE = /^\./
 const modifierRE = /\.[^.]+/g
 
 const lineBreakRE = /[\r\n]/
@@ -683,8 +684,12 @@ function processAttrs (el) {
       // mark element as dynamic
       el.hasBindings = true
       // modifiers
-      modifiers = parseModifiers(name)
-      if (modifiers) {
+      modifiers = parseModifiers(name.replace(dirRE, ''))
+      // support .foo shorthand syntax for the .prop modifier
+      if (propBindRE.test(name)) {
+        (modifiers || (modifiers = {})).prop = true
+        name = `.` + name.slice(1).replace(modifierRE, '')
+      } else if (modifiers) {
         name = name.replace(modifierRE, '')
       }
       if (bindRE.test(name)) { // v-bind

test/unit/features/directives/bind.spec.js

@@ -133,6 +133,18 @@ describe('Directive v-bind', () => {
     expect(vm.$el.getAttribute('id')).toBe(null)
   })
 
+  it('.prop modifier shorthand', () => {
+    const vm = new Vue({
+      template: '<div><span .text-content="foo"></span><span .inner-html="bar"></span></div>',
+      data: {
+        foo: 'hello',
+        bar: '<span>qux</span>'
+      }
+    }).$mount()
+    expect(vm.$el.children[0].textContent).toBe('hello')
+    expect(vm.$el.children[1].innerHTML).toBe('<span>qux</span>')
+  })
+
   it('.camel modifier', () => {
     const vm = new Vue({
       template: '<svg :view-box.camel="viewBox"></svg>',

test/unit/modules/compiler/parser.spec.js

@@ -535,6 +535,16 @@ describe('parser', () => {
     expect('The value for a v-bind expression cannot be empty. Found in "v-bind:empty-msg"').toHaveBeenWarned()
   })
 
+  it('v-bind.prop shorthand syntax', () => {
+    const ast = parse('<div .id="foo"></div>', baseOptions)
+    expect(ast.props).toEqual([{ name: 'id', value: 'foo'}])
+  })
+
+  it('v-bind.prop shorthand syntax w/ modifiers', () => {
+    const ast = parse('<div .id.mod="foo"></div>', baseOptions)
+    expect(ast.props).toEqual([{ name: 'id', value: 'foo'}])
+  })
+
   // #6887
   it('special case static attribute that must be props', () => {
     const ast = parse('<video muted></video>', baseOptions)