root
/
vue2
mirror of https://github.com/vuejs/vue.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
examples/grid/index.html
View File

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

6
examples/modal/index.html
View File

@ -9,7 +9,7 @@
<body>
<!-- template for the modal component -->
<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-container">
@ -29,7 +29,7 @@
<slot name="footer">
default footer
<button class="modal-default-button"
v-on="click: show = false">
on-click="show = false">
OK
</button>
</slot>
@ -55,7 +55,7 @@
<!-- 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 -->
<modal show="{{@showModal}}">
<!--

8
examples/svg/index.html
View File

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

22
examples/todomvc/index.html
View File

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

8
examples/tree/index.html
View File

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

17
src/compiler/compile.js
View File

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

13
src/directive.js
View File

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

14
src/directives/on.js
View File

@ -1,4 +1,5 @@
var _ = require('../util')
var keyFilter = require('../filters').key
module.exports = {
@ -6,6 +7,14 @@ module.exports = {
priority: 700,
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
if (
this.el.tagName === 'IFRAME' &&
@ -28,6 +37,11 @@ module.exports = {
)
return
}
if (this.key) {
handler = keyFilter(handler, this.key)
}
this.reset()
var scope = this._scope || this.vm
this.handler = function (e) {