alpha.5 syntax update (wip)

Author: yyx990803

src/compiler/compile-props.js

@@ -26,9 +26,6 @@ module.exports = function compileProps (el, propOptions) {
 
     if (process.env.NODE_ENV !== 'production' && name === '$data') {
       _.warn('Do not use $data as prop.')
-      el.removeAttribute('$data')
-      el.removeAttribute(':$data')
-      el.removeAttribute('bind-$data')
       continue
     }
 
@@ -73,9 +70,9 @@ module.exports = function compileProps (el, propOptions) {
         prop.filters = parsed.filters
         // check binding type
         if (_.isLiteral(value)) {
-          // for bind- literals such as numbers and booleans,
-          // there's no need to setup a prop binding, so we
-          // can optimize them as a one-time set.
+          // for expressions containing literal numbers and
+          // booleans, there's no need to setup a prop binding,
+          // so we can optimize them as a one-time set.
           prop.optimizedLiteral = true
         } else {
           prop.dynamic = true

src/compiler/compile.js

@@ -8,9 +8,11 @@ var templateParser = require('../parsers/template')
 var resolveAsset = _.resolveAsset
 
 // special binding prefixes
-var bindRE = /^bind-|^:/
-var onRE = /^on-/
-var transitionRE = /^(bind-|:)?transition$/
+var bindRE = /^v-bind:|^:/
+var onRE = /^v-on:|^@/
+var literalRE = /#$/
+var argRE = /:(.*)$/
+var transitionRE = /^(v-bind:|:)?transition$/
 var nodeRefRE = /^\$\$\./
 
 // terminal directives
@@ -262,7 +264,7 @@ function compileElement (el, options) {
   if (el.tagName === 'TEXTAREA') {
     var tokens = textParser.parse(el.value)
     if (tokens) {
-      el.setAttribute('bind-value', textParser.tokensToExp(tokens))
+      el.setAttribute(':value', textParser.tokensToExp(tokens))
       el.value = ''
     }
   }
@@ -545,49 +547,15 @@ function makeTerminalNodeLinkFn (el, dirName, value, options, def) {
 function compileDirectives (attrs, options) {
   var i = attrs.length
   var dirs = []
-  var attr, name, value, dirName, dirDef, isLiteral
+  var attr, name, value, dirName, arg, dirDef, isLiteral
   while (i--) {
     attr = attrs[i]
     name = attr.name
     value = attr.value
-    // Core directive
-    if (name.indexOf('v-') === 0) {
-      dirName = name.slice(2)
-
-      // check literal
-      if (dirName.charAt(dirName.length - 1) === '#') {
-        isLiteral = true
-        dirName = dirName.slice(0, -1)
-      } else {
-        isLiteral = false
-      }
-
-      dirDef = resolveAsset(options, 'directives', dirName)
-      if (process.env.NODE_ENV !== 'production') {
-        _.assertAsset(dirDef, 'directive', dirName)
-      }
-      if (dirDef) {
-        if (!isLiteral && _.isLiteral(value)) {
-          value = _.stripQuotes(value)
-          isLiteral = true
-        }
-        pushDir(dirName, dirDef, {
-          literal: isLiteral
-        })
-      }
-    } else
-
-    // event handlers
-    if (onRE.test(name)) {
-      pushDir('on', internalDirectives.on, {
-        arg: name.replace(onRE, '')
-      })
-    } else
 
     // special attribute: transition
     if (transitionRE.test(name)) {
-      dirName = name.replace(bindRE, '')
-      pushDir(dirName, internalDirectives[dirName], {
+      pushDir('transition', internalDirectives.transition, {
         literal: !bindRE.test(name)
       })
     } else
@@ -600,6 +568,13 @@ function compileDirectives (attrs, options) {
       })
     } else
 
+    // event handlers
+    if (onRE.test(name)) {
+      pushDir('on', internalDirectives.on, {
+        arg: name.replace(onRE, '')
+      })
+    } else
+
     // attribute bindings
     if (bindRE.test(name)) {
       dirName = name.replace(bindRE, '')
@@ -610,6 +585,37 @@ function compileDirectives (attrs, options) {
           arg: dirName
         })
       }
+    } else
+
+    // normal directives
+    if (name.indexOf('v-') === 0) {
+      // check literal
+      isLiteral = literalRE.test(dirName)
+      if (isLiteral) {
+        name = name.replace(literalRE, '')
+      }
+      // check arg
+      arg = (arg = name.match(argRE)) && arg[1]
+      if (arg) {
+        name = name.replace(argRE, '')
+      }
+      // extract directive name
+      dirName = name.slice(2)
+      dirDef = resolveAsset(options, 'directives', dirName)
+
+      if (process.env.NODE_ENV !== 'production') {
+        _.assertAsset(dirDef, 'directive', dirName)
+      }
+
+      if (dirDef) {
+        if (!isLiteral && _.isLiteral(value)) {
+          value = _.stripQuotes(value)
+          isLiteral = true
+        }
+        pushDir(dirName, dirDef, {
+          literal: isLiteral
+        })
+      }
     }
   }
 

src/compiler/transclude.js

@@ -84,7 +84,7 @@ function transcludeTemplate (el, options) {
         _.resolveAsset(options, 'components', tag) ||
         replacer.hasAttribute('is') ||
         replacer.hasAttribute(':is') ||
-        replacer.hasAttribute('bind-is') ||
+        replacer.hasAttribute('v-bind:is') ||
         // element directive
         _.resolveAsset(options, 'elementDirectives', tag) ||
         // for block

src/directive.js

@@ -163,15 +163,6 @@ Directive.prototype.param = function (name) {
   if (param != null) {
     this.el.removeAttribute(name)
     param = (this._scope || this.vm).$interpolate(param)
-  } else {
-    param = _.getBindAttr(this.el, name)
-    if (param != null) {
-      param = (this._scope || this.vm).$eval(param)
-      process.env.NODE_ENV !== 'production' && _.log(
-        'You are using bind- syntax on "' + name + '", which ' +
-        'is a directive param. It will be evaluated only once.'
-      )
-    }
   }
   return param
 }

src/directives/internal/component.js

@@ -12,7 +12,7 @@ module.exports = {
    *   <comp> or <div v-component="comp">
    *
    * - dynamic:
-   *   <component bind-is="view">
+   *   <component :is="view">
    */
 
   bind: function () {
@@ -84,7 +84,7 @@ module.exports = {
 
   /**
    * Public update, called by the watcher in the dynamic
-   * literal scenario, e.g. <component bind-is="view">
+   * literal scenario, e.g. <component :is="view">
    */
 
   update: function (value) {

src/directives/internal/index.js

@@ -1,8 +1,4 @@
-exports.attr = require('./attr')
-exports.class = require('./class')
 exports.el = require('./el')
-exports.on = require('./on')
 exports.prop = require('./prop')
-exports.style = require('./style')
 exports.transition = require('./transition')
 exports.component = require('./component')

src/directives/internal/attr.js renamed to src/directives/public/bind.js

@@ -10,5 +10,13 @@ exports.show = require('./show')
 // two-way binding
 exports.model = require('./model')
 
+// event handling
+exports.on = require('./on')
+
+// attributes
+exports.bind = require('./bind')
+exports['class'] = require('./class')
+exports.style = require('./style')
+
 // cloak
 exports.cloak = require('./cloak')

src/directives/internal/class.js renamed to src/directives/public/class.js

@@ -8,7 +8,7 @@ module.exports = {
     var number = this.param('number') != null
 
     this.getValue = function () {
-      // value overwrite via bind-value
+      // value overwrite via v-bind:value
       if (el.hasOwnProperty('_value')) {
         return el._value
       }