v-bind: use less aggressive interpolate warning check (close #1413)

Author: yyx990803

src/directives/public/bind.js

@@ -20,11 +20,8 @@ var modelProps = {
   'false-value': '_falseValue'
 }
 
-// regex to test for globally allowed attributes.
-// we only need to include ones that:
-// - do not have a corresponding property, e.g. role, dropzone;
-// - cannot be camelized into the corresponding property, .e.g class, accesskey, contenteditable;
-var globalAllowedAttrRE = /^(class|role|accesskey|contenteditable|contextmenu|dropzone|hidden|tabindex)$|^data-|^aria-/
+// check for attribtues that prohibit interpolations
+var disallowedInterpAttrRE = /^v-|^(is|transition|transition-mode|debounce|track-by|stagger|enter-stagger|leave-stagger)$/
 
 module.exports = {
 
@@ -35,21 +32,11 @@ module.exports = {
     // handle interpolation bindings
     if (this.descriptor.interp) {
       // only allow binding on native attributes
-      if (!(
-        // globally allowed attributes
-        globalAllowedAttrRE.test(attr) ||
-        // check if "for" is available on current element.
-        // the corresponding property is a special case.
-        (attr === 'for' && 'htmlFor' in this.el) ||
-        // other attributes: check if a camelized property
-        // is available on the element
-        _.camelize(attr) in this.el
-      )) {
+      if (disallowedInterpAttrRE.test(attr)) {
         process.env.NODE_ENV !== 'production' && _.warn(
           attr + '="' + this.descriptor.raw + '": ' +
-          'attribute interpolation is allowed only ' +
-          'in valid native attributes. "' + attr + '" ' +
-          'is not a valid attribute on <' + this.el.tagName.toLowerCase() + '>.'
+          'attribute interpolation is not allowed in Vue.js ' +
+          'directives and special attributes.'
         )
         this.el.removeAttribute(attr)
         this.invalid = true

test/unit/specs/compiler/compile_spec.js

@@ -508,13 +508,13 @@ if (_.inBrowser) {
     it('attribute interpolation: warn invalid', function () {
       new Vue({
         el: el,
-        template: '<div hello="{{a}}"></div>',
+        template: '<div v-text="{{a}}"></div>',
         data: {
           a: '123'
         }
       })
       expect(el.innerHTML).toBe('<div></div>')
-      expect(hasWarned(_, 'attribute interpolation is allowed only in valid native attributes')).toBe(true)
+      expect(hasWarned(_, 'attribute interpolation is not allowed in Vue.js directives')).toBe(true)
     })
 
     it('warn directives on fragment instances', function () {