update examples to use on- and bind- syntax

This commit is contained in:
Evan You 2015-08-27 16:50:09 -04:00
parent d951cc0390
commit f0c20d6912
8 changed files with 60 additions and 34 deletions

View File

@ -14,11 +14,11 @@
<thead> <thead>
<tr> <tr>
<th v-for="key in columns" <th v-for="key in columns"
v-on="click:sortBy(key)" on-click="sortBy(key)"
v-class="active: sortKey == key"> bind-class="{active: sortKey == key}">
{{key | capitalize}} {{key | capitalize}}
<span class="arrow" <span class="arrow"
v-class="reversed[key] ? 'dsc' : 'asc'"> bind-class="reversed[key] ? 'dsc' : 'asc'">
</span> </span>
</th> </th>
</tr> </tr>

View File

@ -9,7 +9,7 @@
<body> <body>
<!-- template for the modal component --> <!-- template for the modal component -->
<script type="x/template" id="modal-template"> <script type="x/template" id="modal-template">
<div class="modal-mask" v-show="show" v-transition="modal"> <div class="modal-mask" v-show="show" transition="modal">
<div class="modal-wrapper"> <div class="modal-wrapper">
<div class="modal-container"> <div class="modal-container">
@ -29,7 +29,7 @@
<slot name="footer"> <slot name="footer">
default footer default footer
<button class="modal-default-button" <button class="modal-default-button"
v-on="click: show = false"> on-click="show = false">
OK OK
</button> </button>
</slot> </slot>
@ -55,7 +55,7 @@
<!-- app --> <!-- app -->
<div id="app"> <div id="app">
<button id="show-modal" v-on="click: showModal = true">Show Modal</button> <button id="show-modal" on-click="showModal = true">Show Modal</button>
<!-- use the modal component, pass in the prop --> <!-- use the modal component, pass in the prop -->
<modal show="{{@showModal}}"> <modal show="{{@showModal}}">
<!-- <!--

View File

@ -11,7 +11,7 @@
<!-- template for the polygraph component. --> <!-- template for the polygraph component. -->
<script type="text/x-template" id="polygraph-template"> <script type="text/x-template" id="polygraph-template">
<g> <g>
<polygon v-attr="points:points"></polygon> <polygon bind-points="points"></polygon>
<circle cx="100" cy="100" r="80"></circle> <circle cx="100" cy="100" r="80"></circle>
<axis-label <axis-label
v-for="stat in stats" v-for="stat in stats"
@ -24,7 +24,7 @@
<!-- template for the axis label component. --> <!-- template for the axis label component. -->
<script type="text/x-template" id="axis-label-template"> <script type="text/x-template" id="axis-label-template">
<text v-attr="x:point.x, y:point.y">{{stat.label}}</text> <text bind-x="point.x" bind-y="point.y">{{stat.label}}</text>
</script> </script>
<!-- demo root element --> <!-- demo root element -->
@ -38,11 +38,11 @@
<label>{{stat.label}}</label> <label>{{stat.label}}</label>
<input type="range" v-model="stat.value" min="0" max="100"> <input type="range" v-model="stat.value" min="0" max="100">
<span>{{stat.value}}</span> <span>{{stat.value}}</span>
<button v-on="click:remove(stat)">X</button> <button on-click="remove(stat)">X</button>
</div> </div>
<form id="add"> <form id="add">
<input name="newlabel" v-model="newLabel"> <input name="newlabel" v-model="newLabel">
<button v-on="click:add">Add a Stat</button> <button on-click="add">Add a Stat</button>
</form> </form>
<pre id="raw">{{stats | json}}</pre> <pre id="raw">{{stats | json}}</pre>
</div> </div>

View File

@ -14,25 +14,25 @@
autofocus autocomplete="off" autofocus autocomplete="off"
placeholder="What needs to be done?" placeholder="What needs to be done?"
v-model="newTodo" v-model="newTodo"
v-on="keyup:addTodo | key 'enter'"> on-keyup="addTodo | key 'enter'">
</header> </header>
<section class="main" v-show="todos.length" v-cloak> <section class="main" v-show="todos.length" v-cloak>
<input class="toggle-all" type="checkbox" v-model="allDone"> <input class="toggle-all" type="checkbox" v-model="allDone">
<ul class="todo-list"> <ul class="todo-list">
<li class="todo" <li class="todo"
v-for="todo in filteredTodos" v-for="todo in filteredTodos"
v-class="completed: todo.completed, editing: todo == editedTodo"> bind-class="{completed: todo.completed, editing: todo == editedTodo}">
<div class="view"> <div class="view">
<input class="toggle" type="checkbox" v-model="todo.completed"> <input class="toggle" type="checkbox" v-model="todo.completed">
<label v-on="dblclick: editTodo(todo)">{{todo.title}}</label> <label on-dblclick="editTodo(todo)">{{todo.title}}</label>
<button class="destroy" v-on="click: removeTodo(todo)"></button> <button class="destroy" on-click="removeTodo(todo)"></button>
</div> </div>
<input class="edit" type="text" <input class="edit" type="text"
v-model="todo.title" v-model="todo.title"
v-todo-focus="todo == editedTodo" v-todo-focus="todo == editedTodo"
v-on="blur: doneEdit(todo), on-blur="doneEdit(todo)"
keyup: doneEdit(todo) | key 'enter', on-keyup:enter="doneEdit(todo)"
keyup: cancelEdit(todo) | key 'esc'"> on-keyup:esc="cancelEdit(todo)">
</li> </li>
</ul> </ul>
</section> </section>
@ -41,11 +41,11 @@
<strong v-text="remaining"></strong> {{remaining | pluralize 'item'}} left <strong v-text="remaining"></strong> {{remaining | pluralize 'item'}} left
</span> </span>
<ul class="filters"> <ul class="filters">
<li><a href="#/all" v-class="selected: visibility == 'all'">All</a></li> <li><a href="#/all" bind-class="{selected: visibility == 'all'}">All</a></li>
<li><a href="#/active" v-class="selected: visibility == 'active'">Active</a></li> <li><a href="#/active" bind-class="{selected: visibility == 'active'}">Active</a></li>
<li><a href="#/completed" v-class="selected: visibility == 'completed'">Completed</a></li> <li><a href="#/completed" bind-class="{selected: visibility == 'completed'}">Completed</a></li>
</ul> </ul>
<button class="clear-completed" v-on="click:removeCompleted" v-show="todos.length > remaining"> <button class="clear-completed" on-click="removeCompleted" v-show="todos.length > remaining">
Clear completed Clear completed
</button> </button>
</footer> </footer>

View File

@ -27,15 +27,17 @@
<!-- item template --> <!-- item template -->
<script type="text/x-template" id="item-template"> <script type="text/x-template" id="item-template">
<li> <li>
<div v-class="bold: isFolder" <div
v-on="click: toggle, dblclick: changeType"> bind-class="{bold: isFolder}"
on-click="toggle"
on-dblclick="changeType">
{{model.name}} {{model.name}}
<span v-if="isFolder">[{{open ? '-' : '+'}}]</span> <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
</div> </div>
<ul v-show="open" v-if="isFolder"> <ul v-show="open" v-if="isFolder">
<item class="item" v-for="model in model.children" model="{{model}}"> <item class="item" v-for="model in model.children" model="{{model}}">
</item> </item>
<li v-on="click: addChild">+</li> <li on-click="addChild">+</li>
</ul> </ul>
</li> </li>
</script> </script>

View File

@ -513,7 +513,7 @@ function makeTerminalNodeLinkFn (el, dirName, value, options, def) {
function compileDirectives (attrs, options) { function compileDirectives (attrs, options) {
var i = attrs.length var i = attrs.length
var dirs = [] var dirs = []
var attr, name, value, dir, dirName, dirDef, descriptor, arg var attr, name, value, dir, dirName, dirDef, arg
while (i--) { while (i--) {
attr = attrs[i] attr = attrs[i]
name = attr.name name = attr.name
@ -550,7 +550,6 @@ function compileDirectives (attrs, options) {
// attribute bindings // attribute bindings
if (bindRE.test(name)) { if (bindRE.test(name)) {
descriptor = newDirParser.parse(value)
var attributeName = name.replace(bindRE, '') var attributeName = name.replace(bindRE, '')
if (attributeName === 'style' || attributeName === 'class') { if (attributeName === 'style' || attributeName === 'class') {
dirName = attributeName dirName = attributeName
@ -561,22 +560,30 @@ function compileDirectives (attrs, options) {
dirs.push({ dirs.push({
name: dirName, name: dirName,
arg: arg, arg: arg,
descriptors: [descriptor], descriptors: [newDirParser.parse(value)],
def: options.directives[dirName] def: options.directives[dirName]
}) })
} else } else
// event handlers // event handlers
if (onRE.test(name)) { if (onRE.test(name)) {
descriptor = newDirParser.parse(value)
dirs.push({ dirs.push({
name: 'on', name: 'on',
arg: name.replace(onRE, ''), arg: name.replace(onRE, ''),
descriptors: [descriptor], descriptors: [newDirParser.parse(value)],
def: options.directives.on def: options.directives.on
}) })
} else } else
// transition
if (name === 'transition') {
dirs.push({
name: 'transition',
descriptors: [newDirParser.parse(value)],
def: options.directives.transition
})
} else
// TODO: remove this in 1.0.0 // TODO: remove this in 1.0.0
if (config.interpolate) { if (config.interpolate) {
dir = collectAttrDirective(name, value, options) dir = collectAttrDirective(name, value, options)

View File

@ -58,18 +58,21 @@ function Directive (name, el, vm, descriptor, def, host, scope, frag, arg) {
*/ */
Directive.prototype._bind = function (def) { Directive.prototype._bind = function (def) {
var name = this.name
if ( if (
(this.name !== 'cloak' || this.vm._isCompiled) && (name !== 'cloak' || this.vm._isCompiled) &&
this.el && this.el.removeAttribute this.el && this.el.removeAttribute
) { ) {
this.el.removeAttribute(config.prefix + this.name) this.el.removeAttribute(config.prefix + this.name)
// 1.0.0: remove bind/on // 1.0.0: remove bind/on
if (this.name === 'attr') { if (name === 'attr') {
this.el.removeAttribute('bind-' + this.arg) this.el.removeAttribute('bind-' + this.arg)
} else if (this.name === 'class' || this.name === 'style') { } else if (name === 'class' || name === 'style') {
this.el.removeAttribute('bind-' + this.name) this.el.removeAttribute('bind-' + name)
} else if (this.name === 'on') { } else if (name === 'on') {
this.el.removeAttribute('on-' + this.arg) this.el.removeAttribute('on-' + this.arg)
} else if (name === 'transition') {
this.el.removeAttribute(name)
} }
} }
if (typeof def === 'function') { if (typeof def === 'function') {

View File

@ -1,4 +1,5 @@
var _ = require('../util') var _ = require('../util')
var keyFilter = require('../filters').key
module.exports = { module.exports = {
@ -6,6 +7,14 @@ module.exports = {
priority: 700, priority: 700,
bind: function () { bind: function () {
// 1.0.0 key filter
var rawArg = this.arg
var keyIndex = rawArg.indexOf(':')
if (keyIndex > -1) {
this.arg = rawArg.slice(0, keyIndex)
this.key = rawArg.slice(keyIndex + 1)
}
// deal with iframes // deal with iframes
if ( if (
this.el.tagName === 'IFRAME' && this.el.tagName === 'IFRAME' &&
@ -28,6 +37,11 @@ module.exports = {
) )
return return
} }
if (this.key) {
handler = keyFilter(handler, this.key)
}
this.reset() this.reset()
var scope = this._scope || this.vm var scope = this._scope || this.vm
this.handler = function (e) { this.handler = function (e) {