support colon shorthand syntax for bind-

Author: yyx990803

examples/commits/index.html

@@ -26,15 +26,15 @@ <h1>Latest Vue.js Commits</h1>
       <template v-for="branch in branches">
         <input type="radio"
           name="branch"
-          bind-id="branch"
-          bind-value="branch"
+          :id="branch"
+          :value="branch"
           v-model="currentBranch">
-        <label bind-for="branch">{{branch}}</label>
+        <label :for="branch">{{branch}}</label>
       </template>
       <p>yyx990803/vue@{{currentBranch}}</p>
       <ul>
         <li v-for="record in commits">
-          <a bind-href="record.html_url" target="_blank" class="commit">{{record.sha.slice(0, 7)}}</a>
+          <a :href="record.html_url" target="_blank" class="commit">{{record.sha.slice(0, 7)}}</a>
           - <span class="message">{{record.commit.message | truncate}}</span><br>
           by <span class="author">{{record.commit.author.name}}</span>
           at <span class="date">{{record.commit.author.date | formatDate}}</span>

examples/grid/index.html

@@ -15,10 +15,10 @@
           <tr>
             <th v-for="key in columns"
               on-click="sortBy(key)"
-              bind-class="{active: sortKey == key}">
+              :class="{active: sortKey == key}">
               {{key | capitalize}}
               <span class="arrow"
-                bind-class="reversed[key] ? 'dsc' : 'asc'">
+                :class="reversed[key] ? 'dsc' : 'asc'">
               </span>
             </th>
           </tr>
@@ -42,9 +42,9 @@
         Search <input name="query" v-model="searchQuery">
       </form>
       <demo-grid
-        bind-data="gridData"
-        bind-columns="gridColumns"
-        bind-filter-key="searchQuery">
+        :data="gridData"
+        :columns="gridColumns"
+        :filter-key="searchQuery">
       </demo-grid>
     </div>
 

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 bind-show="@showModal">
+      <modal :show="@showModal">
         <!--
           you can use custom content here to overwrite
           default content

examples/svg/index.html

@@ -11,27 +11,27 @@
     <!-- template for the polygraph component. -->
     <script type="text/x-template" id="polygraph-template">
       <g>
-        <polygon bind-points="points"></polygon>
+        <polygon :points="points"></polygon>
         <circle cx="100" cy="100" r="80"></circle>
         <axis-label
           v-for="stat in stats"
-          bind-stat="stat"
-          bind-index="$index"
-          bind-total="stats.length">
+          :stat="stat"
+          :index="$index"
+          :total="stats.length">
         </axis-label>
       </g>
     </script>
 
     <!-- template for the axis label component. -->
     <script type="text/x-template" id="axis-label-template">
-      <text bind-x="point.x" bind-y="point.y">{{stat.label}}</text>
+      <text :x="point.x" :y="point.y">{{stat.label}}</text>
     </script>
 
     <!-- demo root element -->
     <div id="demo">
       <!-- Use the component -->
       <svg width="200" height="200">
-        <polygraph bind-stats="stats"></polygraph>
+        <polygraph :stats="stats"></polygraph>
       </svg>
       <!-- controls -->
       <div v-for="stat in stats">

examples/todomvc/index.html

@@ -21,7 +21,7 @@ <h1>todos</h1>
 				<ul class="todo-list">
 					<li class="todo"
 						v-for="todo in filteredTodos"
-						bind-class="{completed: todo.completed, editing: todo == editedTodo}">
+						:class="{completed: todo.completed, editing: todo == editedTodo}">
 						<div class="view">
 							<input class="toggle" type="checkbox" v-model="todo.completed">
 							<label on-dblclick="editTodo(todo)">{{todo.title}}</label>
@@ -41,9 +41,9 @@ <h1>todos</h1>
 					<strong v-text="remaining"></strong> {{remaining | pluralize 'item'}} left
 				</span>
 				<ul class="filters">
-					<li><a href="#/all" bind-class="{selected: visibility == 'all'}">All</a></li>
-					<li><a href="#/active" bind-class="{selected: visibility == 'active'}">Active</a></li>
-					<li><a href="#/completed" bind-class="{selected: visibility == 'completed'}">Completed</a></li>
+					<li><a href="#/all" :class="{selected: visibility == 'all'}">All</a></li>
+					<li><a href="#/active" :class="{selected: visibility == 'active'}">Active</a></li>
+					<li><a href="#/completed" :class="{selected: visibility == 'completed'}">Completed</a></li>
 				</ul>
 				<button class="clear-completed" on-click="removeCompleted" v-show="todos.length > remaining">
 					Clear completed

examples/tree/index.html

@@ -28,7 +28,7 @@
     <script type="text/x-template" id="item-template">
       <li>
         <div
-          bind-class="{bold: isFolder}"
+          :class="{bold: isFolder}"
           on-click="toggle"
           on-dblclick="changeType">
           {{model.name}}
@@ -38,7 +38,7 @@
           <item
             class="item"
             v-for="model in model.children"
-            bind-model="model">
+            :model="model">
           </item>
           <li on-click="addChild">+</li>
         </ul>
@@ -51,7 +51,7 @@
     <ul id="demo">
       <item
         class="item"
-        bind-model="treeData">
+        :model="treeData">
       </item>
     </ul>
 

src/compiler/compile-props.js

@@ -58,10 +58,8 @@ module.exports = function compileProps (el, propOptions) {
       el.removeAttribute(attr)
     } else {
       // then check dynamic version
-      attr = 'bind-' + attr
-      value = prop.raw = el.getAttribute(attr)
+      value = prop.raw = _.getBindAttr(el, attr)
       if (value !== null) {
-        el.removeAttribute(attr)
         parsed = dirParser.parse(value)
         value = parsed.expression
         prop.filters = parsed.filters

src/compiler/compile.js

@@ -11,6 +11,7 @@ var resolveAsset = _.resolveAsset
 // special binding prefixes
 var bindRE = /^bind-|^:/
 var onRE = /^on-/
+var specialAttrRE = /^(bind-|:)?(el|transition)$/
 
 // terminal directives
 var terminalDirectives = [
@@ -565,37 +566,31 @@ function compileDirectives (attrs, options) {
       }
     } else
 
-    // special case for el
-    if (name === 'el' || name === 'bind-el') {
-      pushDir('el', internalDirectives.el, {
-        literal: !bindRE.test(name)
+    // event handlers
+    if (onRE.test(name)) {
+      pushDir('on', internalDirectives.on, {
+        arg: name.replace(onRE, '')
       })
     } else
 
-    // special case for transition
-    if (name === 'transition' || name === 'bind-transition') {
-      pushDir('transition', internalDirectives.transition, {
+    // special attribtues: transition & el
+    if (specialAttrRE.test(name)) {
+      dirName = name.replace(bindRE, '')
+      pushDir(dirName, internalDirectives[dirName], {
         literal: !bindRE.test(name)
       })
     } else
 
     // attribute bindings
     if (bindRE.test(name)) {
-      var attributeName = name.replace(bindRE, '')
-      if (attributeName === 'style' || attributeName === 'class') {
-        pushDir(attributeName, internalDirectives[attributeName])
+      dirName = name.replace(bindRE, '')
+      if (dirName === 'style' || dirName === 'class') {
+        pushDir(dirName, internalDirectives[dirName])
       } else {
         pushDir('attr', internalDirectives.attr, {
-          arg: attributeName
+          arg: dirName
         })
       }
-    } else
-
-    // event handlers
-    if (onRE.test(name)) {
-      pushDir('on', internalDirectives.on, {
-        arg: name.replace(onRE, '')
-      })
     }
   }
 

src/directive.js

@@ -165,9 +165,8 @@ Directive.prototype.param = function (name) {
     this.el.removeAttribute(name)
     param = (this._scope || this.vm).$interpolate(param)
   } else {
-    param = this.el.getAttribute('bind-' + name)
+    param = _.getBindAttr(this.el, name)
     if (param != null) {
-      this.el.removeAttribute('bind-' + name)
       param = (this._scope || this.vm).$eval(param)
       process.env.NODE_ENV !== 'production' && _.log(
         'You are using bind- syntax on "' + name + '", which ' +

src/directives/element/partial.js

@@ -15,7 +15,7 @@ module.exports = {
       // static partial
       this.insert(id)
     } else {
-      id = el.getAttribute('bind-name')
+      id = _.getBindAttr(el, 'name')
       if (id) {
         this.setupDynamic(id)
       }

src/util/component.js

@@ -19,9 +19,8 @@ exports.checkComponent = function (el, options) {
       el.removeAttribute('is')
       return { id: exp }
     } else {
-      exp = el.getAttribute('bind-is')
+      exp = _.getBindAttr(el, 'is')
       if (exp != null) {
-        el.removeAttribute('bind-is')
         return { id: exp, dynamic: true }
       }
     }

src/util/dom.js

@@ -57,6 +57,27 @@ exports.attr = function (node, attr) {
   return val
 }
 
+/**
+ * Get an attribute with colon or bind- prefix.
+ *
+ * @param {Node} node
+ * @param {String} name
+ * @return {String|null}
+ */
+
+exports.getBindAttr = function (node, name) {
+  var attr = ':' + name
+  var val = node.getAttribute(attr)
+  if (val === null) {
+    attr = 'bind-' + name
+    val = node.getAttribute(attr)
+  }
+  if (val !== null) {
+    node.removeAttribute(attr)
+  }
+  return val
+}
+
 /**
  * Insert el before target
  *