test/vue
1
0
Fork 0
mirror of https://gitee.com/vuejs/vue.git synced 2024-12-02 20:17:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

use v-for in e2e tests

Browse Source
This commit is contained in:
Evan You 2015-08-25 00:30:01 -04:00
parent 671a329db4
commit c4ff1a86ef
8 changed files with 49 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
examples/commits/app.js
View File

@ -58,8 +58,9 @@ var demo = new Vue({
xhr.open('GET', apiURL + self.currentBranch)
xhr.onload = function () {
self.commits = JSON.parse(xhr.responseText)
console.log(self.commits[0].html_url)
}
xhr.send()
}
}
})
})

20
examples/commits/index.html
View File

@ -23,24 +23,24 @@
<body>
<div id="demo">
<h1>Latest Vue.js Commits</h1>
<template v-repeat="b:branches">
<template v-for="branch in branches">
<input type="radio"
name="branch"
id="{{*b}}"
value="{{*b}}"
id="{{branch}}"
value="{{branch}}"
v-model="currentBranch">
<label for="{{*b}}">{{*b}}</label>
<label for="{{branch}}">{{branch}}</label>
</template>
<p>yyx990803/vue@{{currentBranch}}</p>
<ul>
<li v-repeat="commits">
<a href="{{html_url}}" target="_blank" class="commit">{{sha.slice(0, 7)}}</a>
- <span class="message">{{commit.message | truncate}}</span><br>
by <span class="author">{{commit.author.name}}</span>
at <span class="date">{{commit.author.date | formatDate}}</span>
<li v-for="record in commits">
<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>
</li>
</ul>
</div>
<script src="app.js"></script>
</body>
</html>
</html>

6
examples/firebase/index.html
View File

@ -10,9 +10,9 @@
<body>
<div id="app">
<ul>
<li class="user" v-repeat="users" v-transition>
<span>{{name}} - {{email}}</span>
<button v-on="click:removeUser(this)">X</button>
<li class="user" v-for="user in users" v-transition>
<span>{{user.name}} - {{user.email}}</span>
<button v-on="click:removeUser(user)">X</button>
</li>
</ul>
<form id="form" v-on="submit:addUser">

10
examples/grid/index.html
View File

@ -13,7 +13,7 @@
<table>
<thead>
<tr>
<th v-repeat="key: columns"
<th v-for="key in columns"
v-on="click:sortBy(key)"
v-class="active: sortKey == key">
{{key | capitalize}}
@ -24,11 +24,11 @@
</tr>
</thead>
<tbody>
<tr v-repeat="
entry: data
<tr v-for="
entry in data
| filterBy filterKey
| orderBy sortKey reversed[sortKey]">
<td v-repeat="key: columns">
<td v-for="key in columns">
{{entry[key]}}
</td>
</tr>
@ -51,4 +51,4 @@
<script src="grid.js"></script>
</body>
</html>
</html>

21
examples/svg/index.html
View File

@ -13,13 +13,18 @@
<g>
<polygon v-attr="points:points"></polygon>
<circle cx="100" cy="100" r="80"></circle>
<axis-label v-repeat="stats"></axis-label>
<axis-label
v-for="stat in stats"
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 v-attr="x:point.x, y:point.y">{{label}}</text>
<text v-attr="x:point.x, y:point.y">{{stat.label}}</text>
</script>
<!-- demo root element -->
@ -29,11 +34,11 @@
<polygraph stats="{{stats}}"></polygraph>
</svg>
<!-- controls -->
<div v-repeat="stats">
<label>{{label}}</label>
<input type="range" v-model="value" min="0" max="100">
<span>{{value}}</span>
<button v-on="click:remove(this)">X</button>
<div v-for="stat in stats">
<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>
</div>
<form id="add">
<input name="newlabel" v-model="newLabel">
@ -47,4 +52,4 @@
<script src="svg.js"></script>
</body>
</html>
</html>

15
examples/svg/svg.js
View File

@ -26,14 +26,19 @@ Vue.component('polygraph', {
components: {
// a sub component for the labels
'axis-label': {
props: {
stat: Object,
index: Number,
total: Number
},
template: '#axis-label-template',
replace: true,
computed: {
point: function () {
return valueToPoint(
+this.value + 10,
this.$index,
this.$parent.stats.length
+this.stat.value + 10,
this.index,
this.total
)
}
}
@ -75,10 +80,10 @@ new Vue({
},
remove: function (stat) {
if (this.stats.length > 3) {
this.stats.$remove(stat.$data)
this.stats.$remove(stat)
} else {
alert('Can\'t delete more!')
}
}
}
})
})

5
examples/tree/index.html
View File

@ -33,8 +33,7 @@
<span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
</div>
<ul v-show="open" v-if="isFolder">
<item class="item"
v-repeat="model: model.children">
<item class="item" v-for="model in model.children" model="{{model}}">
</item>
<li v-on="click: addChild">+</li>
</ul>
@ -53,4 +52,4 @@
<!-- demo code -->
<script src="tree.js"></script>
</body>
</html>
</html>

8
src/compiler/compile.js
View File

@ -554,7 +554,7 @@ function makeNodeLinkFn (directives) {
dir = directives[i]
if (dir._link) {
// custom link fn
dir._link(vm, el)
dir._link(vm, el, scope)
} else {
k = dir.descriptors.length
for (j = 0; j < k; j++) {
@ -597,10 +597,10 @@ function collectAttrDirective (name, value, options) {
return {
def: def,
_link: allOneTime
? function (vm, el, host, scope) {
? function (vm, el, scope) {
el.setAttribute(name, (scope || vm).$interpolate(value))
}
: function (vm, el, host, scope) {
: function (vm, el, scope) {
var exp = textParser.tokensToExp(tokens, (scope || vm))
var desc = isClass
? dirParser.parse(exp)[0]
@ -608,7 +608,7 @@ function collectAttrDirective (name, value, options) {
if (isClass) {
desc._rawClass = value
}
vm._bindDir(dirName, el, desc, def, host, scope)
vm._bindDir(dirName, el, desc, def, null, scope)
}
}
}