Skip to content

Commit eea62a2

Browse files
yyx990803yyx990803
committed
add examples
1 parent 7721f92 commit eea62a2

File tree

24 files changed

+1272
-0
lines changed

24 files changed

+1272
-0
lines changed

‎examples/commits/app.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
var apiURL = 'https://api.github.com/repos/vuejs/vue/commits?per_page=3&sha='
2+
var isPhantom = navigator.userAgent.indexOf('PhantomJS') > -1
3+
4+
/**
5+
* Test mocks
6+
*/
7+
8+
var mocks = {
9+
master: [{sha:'111111111111', commit: {message:'one', author:{name:'Evan',date:'2014-10-15T13:52:58Z'}}},{sha:'111111111111', commit: {message:'hi', author:{name:'Evan',date:'2014-10-15T13:52:58Z'}}},{sha:'111111111111', commit: {message:'hi', author:{name:'Evan',date:'2014-10-15T13:52:58Z'}}}],
10+
dev: [{sha:'222222222222', commit: {message:'two', author:{name:'Evan',date:'2014-10-15T13:52:58Z'}}},{sha:'111111111111', commit: {message:'hi', author:{name:'Evan',date:'2014-10-15T13:52:58Z'}}},{sha:'111111111111', commit: {message:'hi', author:{name:'Evan',date:'2014-10-15T13:52:58Z'}}}]
11+
}
12+
13+
function mockData () {
14+
this.commits = mocks[this.currentBranch]
15+
}
16+
17+
/**
18+
* Actual demo
19+
*/
20+
21+
var demo = new Vue({
22+
23+
el: '#demo',
24+
25+
data: {
26+
branches: ['master', 'dev'],
27+
currentBranch: 'master',
28+
commits: null
29+
},
30+
31+
created: function () {
32+
this.fetchData()
33+
},
34+
35+
watch: {
36+
currentBranch: 'fetchData'
37+
},
38+
39+
methods: {
40+
truncate: function (v) {
41+
var newline = v.indexOf('\n')
42+
return newline > 0 ? v.slice(0, newline) : v
43+
},
44+
formatDate: function (v) {
45+
return v.replace(/T|Z/g, ' ')
46+
},
47+
fetchData: function () {
48+
// CasperJS fails at cross-domain XHR even with
49+
// --web-security=no, have to mock data here.
50+
if (isPhantom) {
51+
return mockData.call(this)
52+
}
53+
var xhr = new XMLHttpRequest()
54+
var self = this
55+
xhr.open('GET', apiURL + self.currentBranch)
56+
xhr.onload = function () {
57+
self.commits = JSON.parse(xhr.responseText)
58+
console.log(self.commits[0].html_url)
59+
}
60+
xhr.send()
61+
}
62+
}
63+
})

‎examples/commits/index.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Vue.js commits example</title>
5+
<style>
6+
#demo {
7+
font-family: 'Helvetica', Arial, sans-serif;
8+
}
9+
a {
10+
text-decoration: none;
11+
color: #f66;
12+
}
13+
li {
14+
line-height: 1.5em;
15+
margin-bottom: 20px;
16+
}
17+
.author, .date {
18+
font-weight: bold;
19+
}
20+
</style>
21+
<script src="../../dist/vue.js"></script>
22+
</head>
23+
<body>
24+
<div id="demo">
25+
<h1>Latest Vue.js Commits</h1>
26+
<template v-for="branch in branches">
27+
<input type="radio"
28+
:id="branch"
29+
:value="branch"
30+
name="branch"
31+
v-model="currentBranch">
32+
<label :for="branch">{{branch}}</label>
33+
</template>
34+
<p>vuejs/vue@{{currentBranch}}</p>
35+
<ul>
36+
<li v-for="record in commits">
37+
<a :href="record.html_url" target="_blank" class="commit">{{record.sha.slice(0, 7)}}</a>
38+
- <span class="message">{{truncate(record.commit.message)}}</span><br>
39+
by <span class="author">{{record.commit.author.name}}</span>
40+
at <span class="date">{{formatDate(record.commit.author.date)}}</span>
41+
</li>
42+
</ul>
43+
</div>
44+
<script src="app.js"></script>
45+
</body>
46+
</html>

‎examples/elastic-header/index.html‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
6+
<title></title>
7+
<script src="../../dist/vue.js"></script>
8+
<script src="http://dynamicsjs.com/lib/dynamics.js"></script>
9+
<link rel="stylesheet" href="style.css">
10+
<!-- template for the component -->
11+
<script type="x/template" id="header-view-template">
12+
<div class="draggable-header-view"
13+
@mousedown="startDrag" @touchstart="startDrag"
14+
@mousemove="onDrag" @touchmove="onDrag"
15+
@mouseup="stopDrag" @touchend="stopDrag" @mouseleave="stopDrag">
16+
<svg class="bg" width="320" height="560">
17+
<path :d="headerPath" fill="#3F51B5"></path>
18+
</svg>
19+
<div class="header">
20+
<slot name="header"></slot>
21+
</div>
22+
<div class="content" :style="contentPosition">
23+
<slot name="content"></slot>
24+
</div>
25+
</div>
26+
</script>
27+
</head>
28+
<body>
29+
30+
<div id="app" @touchmove.prevent>
31+
<draggable-header-view>
32+
<template slot="header">
33+
<h1>Elastic Draggable SVG Header</h1>
34+
<p>with <a href="http://vuejs.org">Vue.js</a> + <a href="http://dynamicsjs.com">dynamics.js</a></p>
35+
</template>
36+
<template slot="content">
37+
<p>Note this is just an effect demo - there are of course many additional details if you want to use this in production, e.g. handling responsive sizes, reload threshold and content scrolling. Those are out of scope for this quick little hack. However, the idea is that you can hide them as internal details of a Vue.js component and expose a simple Web-Component-like interface.</p>
38+
</template>
39+
</draggable-header-view>
40+
</div>
41+
42+
<script>
43+
Vue.component('draggable-header-view', {
44+
template: '#header-view-template',
45+
data: function () {
46+
return {
47+
dragging: false,
48+
// quadratic bezier control point
49+
c: { x: 160, y: 160 },
50+
// record drag start point
51+
start: { x: 0, y: 0 }
52+
}
53+
},
54+
computed: {
55+
headerPath: function () {
56+
return 'M0,0 L320,0 320,160' +
57+
'Q' + this.c.x + ',' + this.c.y +
58+
' 0,160'
59+
},
60+
contentPosition: function () {
61+
var dy = this.c.y - 160
62+
var dampen = dy > 0 ? 2 : 4
63+
return {
64+
transform: 'translate3d(0,' + dy / dampen + 'px,0)'
65+
}
66+
}
67+
},
68+
methods: {
69+
startDrag: function (e) {
70+
e = e.changedTouches ? e.changedTouches[0] : e
71+
this.dragging = true
72+
this.start.x = e.pageX
73+
this.start.y = e.pageY
74+
},
75+
onDrag: function (e) {
76+
e = e.changedTouches ? e.changedTouches[0] : e
77+
if (this.dragging) {
78+
this.c.x = 160 + (e.pageX - this.start.x)
79+
// dampen vertical drag by a factor
80+
var dy = e.pageY - this.start.y
81+
var dampen = dy > 0 ? 1.5 : 4
82+
this.c.y = 160 + dy / dampen
83+
}
84+
},
85+
stopDrag: function () {
86+
if (this.dragging) {
87+
this.dragging = false
88+
dynamics.animate(this.c, {
89+
x: 160,
90+
y: 160
91+
}, {
92+
type: dynamics.spring,
93+
duration: 700,
94+
friction: 280
95+
})
96+
}
97+
}
98+
}
99+
})
100+
101+
new Vue({ el: '#app' })
102+
</script>
103+
</body>
104+
</html>

‎examples/elastic-header/style.css‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
h1 {
2+
font-weight: 300;
3+
font-size: 1.8em;
4+
margin-top: 0;
5+
}
6+
a {
7+
color: #fff;
8+
}
9+
.draggable-header-view {
10+
background-color: #fff;
11+
box-shadow: 0 4px 16px rgba(0,0,0,.15);
12+
width: 320px;
13+
height: 560px;
14+
overflow: hidden;
15+
margin: 30px auto;
16+
position: relative;
17+
font-family: 'Roboto', Helvetica, Arial, sans-serif;
18+
color: #fff;
19+
font-size: 14px;
20+
font-weight: 300;
21+
-webkit-user-select: none;
22+
-moz-user-select: none;
23+
-ms-user-select: none;
24+
user-select: none;
25+
}
26+
.draggable-header-view .bg {
27+
position: absolute;
28+
top: 0;
29+
left: 0;
30+
z-index: 0;
31+
}
32+
.draggable-header-view .header, .draggable-header-view .content {
33+
position: relative;
34+
z-index: 1;
35+
padding: 30px;
36+
box-sizing: border-box;
37+
}
38+
.draggable-header-view .header {
39+
height: 160px;
40+
}
41+
.draggable-header-view .content {
42+
color: #333;
43+
line-height: 1.5em;
44+
}

‎examples/firebase/app.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
var emailRE = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
2+
3+
// Firebase ref
4+
var usersRef = new Firebase('https://vue-demo.firebaseIO.com/users')
5+
6+
// create Vue app
7+
var app = new Vue({
8+
// element to mount to
9+
el: '#app',
10+
// initial data
11+
data: {
12+
newUser: {
13+
name: '',
14+
email: ''
15+
}
16+
},
17+
// firebase binding
18+
// https://github.com/vuejs/vuefire
19+
firebase: {
20+
users: usersRef
21+
},
22+
// computed property for form validation state
23+
computed: {
24+
validation: function () {
25+
return {
26+
name: !!this.newUser.name.trim(),
27+
email: emailRE.test(this.newUser.email)
28+
}
29+
},
30+
isValid: function () {
31+
var validation = this.validation
32+
return Object.keys(validation).every(function (key) {
33+
return validation[key]
34+
})
35+
}
36+
},
37+
// methods
38+
methods: {
39+
addUser: function () {
40+
if (this.isValid) {
41+
usersRef.push(this.newUser)
42+
this.newUser.name = ''
43+
this.newUser.email = ''
44+
}
45+
},
46+
removeUser: function (user) {
47+
usersRef.child(user['.key']).remove()
48+
}
49+
}
50+
})

‎examples/firebase/index.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Vue.js Firebase example</title>
5+
<meta charset="utf-8">
6+
<link rel="stylesheet" type="text/css" href="style.css">
7+
<!-- Vue -->
8+
<script src="../../dist/vue.js"></script>
9+
<!-- Firebase -->
10+
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
11+
<!-- VueFire -->
12+
<script src="https://cdn.jsdelivr.net/vuefire/1.0.1/vuefire.min.js"></script>
13+
</head>
14+
<body>
15+
<div id="app">
16+
<ul>
17+
<li class="user" v-for="user in users" transition>
18+
<span>{{user.name}} - {{user.email}}</span>
19+
<button v-on:click="removeUser(user)">X</button>
20+
</li>
21+
</ul>
22+
<form id="form" v-on:submit.prevent="addUser">
23+
<input v-model="newUser.name">
24+
<input v-model="newUser.email">
25+
<input type="submit" value="Add User">
26+
</form>
27+
<ul class="errors">
28+
<li v-show="!validation.name">Name cannot be empty.</li>
29+
<li v-show="!validation.email">Please provide a valid email address.</li>
30+
</ul>
31+
</div>
32+
<script src="app.js"></script>
33+
</body>
34+
</html>

‎examples/firebase/style.css‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
body {
2+
font-family: Helvetica, Arial, sans-serif;
3+
}
4+
5+
ul {
6+
padding: 0;
7+
}
8+
9+
.user {
10+
height: 30px;
11+
line-height: 30px;
12+
padding: 10px;
13+
border-top: 1px solid #eee;
14+
overflow: hidden;
15+
transition: all .25s ease;
16+
}
17+
18+
.user:last-child {
19+
border-bottom: 1px solid #eee;
20+
}
21+
22+
.v-enter, .v-leave {
23+
height: 0;
24+
padding-top: 0;
25+
padding-bottom: 0;
26+
border-top-width: 0;
27+
border-bottom-width: 0;
28+
}
29+
30+
.errors {
31+
color: #f00;
32+
}

0 commit comments

Comments
 (0)