support colon prefix shorthand 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

@@ -103,12 +103,10 @@ module.exports = function compileProps (el, propOptions) {
       }
     } else {
       // new syntax
-      attr = 'bind-' + attr
-      value = prop.raw = el.getAttribute(attr)
+      value = prop.raw = _.getBindAttr(el, attr)
       if (value !== null) {
         // mark it so we know this is a bind
         prop.bindSyntax = true
-        el.removeAttribute(attr)
         parsed = dirParser.parse(value)
         value = parsed.expression
         prop.filters = parsed.filters

src/compiler/compile.js

@@ -9,7 +9,7 @@ var resolveAsset = _.resolveAsset
 var componentDef = require('../directives/component')
 
 // special binding prefixes
-var bindRE = /^bind-/
+var bindRE = /^bind-|^:/
 var onRE = /^on-/
 
 // terminal directives
@@ -586,7 +586,7 @@ function compileDirectives (attrs, options) {
     } else
 
     // special case for el
-    if (name === 'el' || name === 'bind-el') {
+    if (name === 'el' || name === 'bind-el' || name === ':el') {
       dirs.push({
         name: 'el',
         arg: bindRE.test(name),
@@ -596,7 +596,7 @@ function compileDirectives (attrs, options) {
     } else
 
     // special case for transition
-    if (name === 'transition' || name === 'bind-transition') {
+    if (name === 'transition' || name === 'bind-transition' || name === ':transition') {
       dirs.push({
         name: 'transition',
         arg: bindRE.test(name),

src/directive.js

@@ -67,12 +67,19 @@ Directive.prototype._bind = function () {
     // TODO simplify this
     if (name === 'attr') {
       this.el.removeAttribute('bind-' + this.arg)
+      this.el.removeAttribute(':' + this.arg)
     } else if (name === 'class' || name === 'style') {
       this.el.removeAttribute('bind-' + name)
+      this.el.removeAttribute(':' + name)
     } else if (name === 'on') {
       this.el.removeAttribute('on-' + this.arg)
     } else if (name === 'transition' || name === 'el') {
-      this.el.removeAttribute(this.arg ? 'bind-' + name : name)
+      if (this.arg) {
+        this.el.removeAttribute('bind-' + name)
+        this.el.removeAttribute(':' + name)
+      } else {
+        this.el.removeAttribute(name)
+      }
     }
   }
   if (typeof def === 'function') {
@@ -197,9 +204,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/element-directives/partial.js

@@ -25,7 +25,7 @@ module.exports = {
         this.insert(id)
       }
     } else {
-      id = el.getAttribute('bind-name')
+      id = el.getAttribute('bind-name') || el.getAttribute(':name')
       if (id) {
         this.setupDynamic(id)
       }