-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
124 lines (115 loc) · 6.95 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE.js - Examples</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app" class="wrap container">
<header class="row">
<div class="col-xs-12">
<h1>VUEJS Examples</h1>
</div>
</header>
<section class="row">
<div class="col-xs-4">
<div class="list-group">
<h3>
<span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
Basic
</h3>
<small> (inspiration by VueJS.org)</small>
<hr/>
<template v-for='example in examples'>
<a :href="example.url" class="list-group-item">
{{example.title}} - {{example.description}}
</a>
</template>
</div>
</div>
<div class="col-xs-4">
<div class="list-group">
<h3>
<span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
Basic 2
</h3>
<small>(inspiration by Laracasts)</small>
<hr/>
<template v-for='example in examples2'>
<a :href="example.url" class="list-group-item">
{{example.title}} - {{example.description}}
</a>
</template>
</div>
</div>
<div class="col-xs-4">
<div class="list-group">
<h3>
<span class="glyphicon glyphicon-book" aria-hidden="true"></span>
Demo
</h3>
<small>(..</small>
<hr/>
<template v-for='demo in demos'>
<a :href="demo.url" class="list-group-item">
{{demo.title}} - {{demo.description}}
</a>
</template>
</div>
</div>
</section>
<hr/>
<p>By <a href="http://www.ricardocanelas.com">Ricardo Canelas</a></p>
</div>
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
examples: [
{title:'Example 01', url:'basic/e1/index.html', description: 'Hello World'},
{title:'Example 02', url:'basic/e2/index.html', description: 'Conditionals and Loops'},
{title:'Example 03', url:'basic/e3/index.html', description: 'Events and Model'},
{title:'Example 04', url:'basic/e4/index.html', description: 'Components'},
{title:'Example 05', url:'basic/e5/index.html', description: 'Lifecycle'},
{title:'Example 06', url:'basic/e6/index.html', description: 'Template Syntax'},
{title:'Example 07', url:'basic/e7/index.html', description: 'Computed Properties and Watchers'},
{title:'Example 08', url:'basic/e8/index.html', description: 'Class and Style Bindings'},
{title:'Example 09', url:'basic/e9/index.html', description: 'Conditional Rendering'},
{title:'Example 10', url:'basic/e10/index.html', description: 'List Rendering (v-for, filtered and sorted)'},
{title:'Example 11', url:'basic/e11/index.html', description: 'Event Handling'},
{title:'Example 12', url:'basic/e12/index.html', description: 'Form Input Bindings'},
{title:'Example 13', url:'basic/e13/index.html', description: 'Components'},
{title:'Example 14', url:'basic/e14/index.html', description: 'Components - Content Distribution with Slot'},
{title:'Example 15', url:'basic/e15/index.html', description: 'Transitioning - Single Elements or Component'},
{title:'Example 16', url:'basic/e16/index.html', description: 'Transitioning - Between Elements and Components'},
{title:'Example 17', url:'basic/e17/index.html', description: 'Transitioning - List Transitions'},
{title:'Example 18', url:'basic/e18/index.html', description: 'Transitioning - State'},
{title:'Example 19', url:'basic/e19/index.html', description: 'Transitioning - Render Functions'},
{title:'Example 20', url:'basic/e20/index.html', description: 'Custom Directives'}
],
examples2: [
{title:'Step 01', url:'basic2/step01 - Basic Data Binding/index.html', description: 'Basic Data Binding'},
{title:'Step 02', url:'basic2/step02 - VueDev-Tools/index.html', description: 'VueDev-Tools'},
{title:'Step 03', url:'basic2/step03 - Event Listeners/index.html', description: 'Event Listeners'},
{title:'Step 04', url:'basic2/step04 - Attribute and Class Binding/index.html', description: 'Attribute and Class Binding'},
{title:'Step 05', url:'basic2/step05 - Computed Properties/index.html', description: 'Computed Properties'},
{title:'Step 06', url:'basic2/step06 - Component - Basic/index.html', description: 'Component / Basic'},
{title:'Step 07', url:'basic2/step07 - Component - Message/index.html', description: 'Component / Message'},
{title:'Step 08', url:'basic2/step08 - Component - Modal/index.html', description: 'Component / Modal'},
{title:'Step 09', url:'basic2/step09 - Component - Tabs/index.html', description: 'Component / Tabs'},
{title:'Step 10', url:'basic2/step10 - Component - Event Dispatcher/index.html', description: 'Component / Event Dispatcher'},
{title:'Step 11', url:'basic2/step11 - Named Slots/index.html', description: 'Named Slots'},
{title:'Step 12', url:'basic2/step12 - Share State/index.html', description: 'Share State'},
{title:'Step 13', url:'basic2/step13 - Routing/public/index.html', description: 'Routing'},
],
demos: [
{title:'Demo 1', url:'demo/d1/index.html', description: 'Filtering posts'},
{title:'Demo 2', url:'basic2/step13 - Routing/public/index.html', description: 'Routing'},
]
}
})
</script>
</body>
</html>