-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
145 lines (116 loc) · 4.64 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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Vue.js Fundamentals</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<h1>Build Your First Vue.js App</h1>
<div id="app">
{{ description }}
Countdown > {{ timer }}
<h1>Directive</h1>
<span @mouseover="this.onHoverTitle = 'reactive message'"
@mouseleave="this.onHoverTitle = 'reactive title'"
v-bind:class="white">
Hover on me to see a {{ onHoverTitle }}.
</span>
<h1>Enable User Interaction with Vue.js</h1>
<p>{{ text }}</p>
<button class="button" @click="checkPalindrome">Check if Palindrome</button>
<h1>Enable User Input with Vue.js</h1>
<p>{{ inputText }}</p>
<textarea v-model="inputText"></textarea>
<h1>Hide or Show with Conditionals</h1>
<span v-show="visible">Visible content.</span>
<h1>Build a List with Vue.js</h1>
<ol>
<li v-for="game in games">{{ game.title }}</li>
</ol>
<h1>Data Properties</h1>
<p>{{ initial }}</p>
<h1>Methods</h1>
<p>{{ startString }}</p>
<button class="button" @click="addToStart">Add to String</button>
<h1>Loop Through a Range</h1>
<span v-for="number in 20">{{ number }} </span>
<h1>Loop Through an Array</h1>
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
<h1>Looping with an Index</h1>
<ul>
<li v-for="(framework, key) in frameworks">{{ key }} - {{ framework.content }}</li>
</ul>
<h1>Looping through Objects</h1>
<ol>
<li v-for="music in musics">{{ music }}</li>
</ol>
<h1>Looping through Objects and Keys</h1>
<ol>
<li v-for="(music, property) in musics"><span class="capitalize">{{ property }}</span> - {{ music }}</li>
</ol>
<h1>Looping through Objects, Keys, and Indexes</h1>
<ul>
<li v-for="(baby, property, index) in babies">{{ index }} - <span class="capitalize">{{ property }}</span> - {{ baby }}</li>
</ul>
<h1>Build an Input Field</h1>
<label for="fullName">Full Name</label>
<input id="fullName" v-model="fullName" class="margin-left-15" placeholder="Makima San" />
<p>Your Full Name is {{ fullName }}.</p>
<h1>Dropdown Menus</h1>
<select v-model="selected" v-bind:selected="selected">
<option v-for="rate in rating" v-bind:value="rate.value">{{ rate.title }}</option>
</select>
<p>{{ selected }}</p>
<h1>Checkbox</h1>
<label for="friends" class="block"><input type="checkbox" id="friends" value="Friends" v-model="recommended"> Friends</label>
<label for="acquaintance" class="block"><input type="checkbox" id="acquaintance" value="Acquaintances" v-model="recommended"> Acquaintances</label>
<p>Recommended for {{ recommended }}</p>
<h1>Radio</h1>
<p>Would you recommend this tutorial?</p>
<label for="yes"><input type="radio" id="yes" value="Yes" v-model="tutorial_review"/>Yes</label>
<label for="no"><input type="radio" id="no" value="No" v-model="tutorial_review"/>No</label>
<br /><br />
Recommendable: {{ tutorial_review }}
<h1>Build a Component</h1>
<first-component></first-component><br /><br />
<first-component></first-component>
<body-component title="Using Component Props"></body-component>
<body-component title="Built my First Component with Prop"></body-component>
<h1>Emitting Events</h1>
<header-component v-for="(header, index) in headers"
:key="header.id"
:title="header.title"
:style="{ fontSize: header.headerFontSize + 'px'}"
@increase-text-size="increaseTextSize(index)">
</header-component>
<h1>Building Slots</h1>
<slot-component>
<p>Extra text from HTML.</p>
</slot-component>
<h1>Dynamic Components</h1>
<button class="button"
v-for="page in tabs"
v-bind:key="page"
v-bind:class="{active:currentTab === page}"
@click="currentTab=page">{{ page }}
</button>
<br /><br />
<component v-bind:is="currentTabComponent"></component>
<h1>Binding Components</h1>
<button class="button white"
v-for="menu in menus"
v-bind:key="menu"
v-bind:class="{active:currentMenu === menu}"
@click="currentMenu=menu">{{ menu.title }}
</button>
<br /><br />
<component v-bind:is="currentMenuComponent"></component>
</div>
<script src="main.js"></script>
</body>
</html>