feat: Warn on colon shorthand usage on directive

fix vuejs#10191

Author: afontcu

Diff for: src/compiler/parser/index.js

@@ -30,6 +30,7 @@ export const forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/
 const stripParensRE = /^\(|\)$/g
 const dynamicArgRE = /^\[.*\]$/
 
+const colonDirRE = /^:v-/
 const argRE = /:(.*)$/
 export const bindRE = /^:|^\.|^v-bind:/
 const propBindRE = /^\./
@@ -761,6 +762,12 @@ function processAttrs (el) {
   for (i = 0, l = list.length; i < l; i++) {
     name = rawName = list[i].name
     value = list[i].value
+    // :v-if or similar
+    if (process.env.NODE_ENV !== 'production' && colonDirRE.test(name)) {
+      warn(
+        `A v-bind shorthand directive was used on another Vue directive. Did you want to write '${name.substr(1)}="${value}"'?`
+      )
+    }
     if (dirRE.test(name)) {
       // mark element as dynamic
       el.hasBindings = true

Diff for: test/unit/modules/compiler/parser.spec.js

@@ -530,6 +530,11 @@ describe('parser', () => {
     expect(ast.props[0].value).toBe('msg')
   })
 
+  it('v-bind expression on directive', () => {
+    parse('<div :v-if="foo"></div>', baseOptions)
+    expect(`A v-bind shorthand directive was used on another Vue directive. Did you want to write 'v-if="foo"'?`).toHaveBeenWarned()
+  })
+
   it('empty v-bind expression', () => {
     parse('<div :empty-msg=""></div>', baseOptions)
     expect('The value for a v-bind expression cannot be empty. Found in "v-bind:empty-msg"').toHaveBeenWarned()