Skip to content

Commit 110d2e1

Browse files
LaoujinLaoujin
committed
headers
1 parent e29bd3c commit 110d2e1

File tree

5 files changed

+128
-8
lines changed

5 files changed

+128
-8
lines changed

‎01-HelloWorld/01-Socks.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
</head>
99
<body>
1010
<div id="app">
11-
<div class="nav-bar"></div>
11+
<div class="nav-bar"><h1>Basic Socks</h1></div>
1212
<div class="product">
1313
<div class="product-image">
1414
<img v-bind:src="image" :title="imageTitle">

‎01-HelloWorld/02-ComputedSocks.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
</head>
88
<body>
99
<div id="app">
10-
<div class="nav-bar"></div>
10+
<div class="nav-bar"><h1>Computed Socks</h1></div>
1111
<div class="product">
1212
<div class="product-image">
1313
<img :src="image">

‎01-HelloWorld/03-ComponentSocks.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
</head>
88
<body>
99
<div id="app">
10-
<div class="nav-bar"></div>
10+
<div class="nav-bar"><h1>Componentized Socks</h1></div>
1111

1212
<product :premium="premium" @add-to-cart="updateCart"></product>
1313

@@ -20,6 +20,9 @@
2020
<a href="02-ComputedSocks.html" class="prev">
2121
<i class="fas fa-arrow-left"></i> moving back
2222
</a>
23+
<a href="04-ReviewableSocks.html" class="next">
24+
moving on <i class="fas fa-arrow-right"></i>
25+
</a>
2326
</body>
2427
</html>
2528

@@ -62,7 +65,7 @@ <h1>{{ product }}</h1>
6265
:key="variant.id"
6366
class="color-box"
6467
:style="{backgroundColor: variant.color}"
65-
@mouseover="setSelectedVariant(variant, index)">
68+
@mouseover="selectedVariantIndex = index">
6669
</div>
6770
</div>
6871
</div>
@@ -77,16 +80,13 @@ <h1>{{ product }}</h1>
7780
{id: 2, color: 'blue'}
7881
],
7982
inventory: 3,
80-
}
83+
};
8184
},
8285
methods: {
8386
addToCart() {
8487
this.inventory--;
8588
const selectedVariant = this.variants[this.selectedVariantIndex];
8689
this.$emit('add-to-cart', {product: this.product, variant: selectedVariant});
87-
},
88-
setSelectedVariant(variant, index) {
89-
this.selectedVariantIndex = index;
9090
}
9191
},
9292
computed: {

‎01-HelloWorld/04-ReviewableSocks.html‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<html>
2+
<head>
3+
<script src="https://unpkg.com/vue"></script>
4+
<link href="./assets/style.css" rel="stylesheet">
5+
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet">
6+
<title>Reviewable Socks</title>
7+
</head>
8+
<body>
9+
<div id="app">
10+
<div class="nav-bar"><h1>Reviewable Socks</h1></div>
11+
12+
<product :premium="premium" @add-to-cart="updateCart"></product>
13+
14+
<div class="cart">
15+
{{ cart.length }}
16+
<i class="fas fa-shopping-cart"></i>
17+
</div>
18+
</div>
19+
20+
<a href="02-ComputedSocks.html" class="prev">
21+
<i class="fas fa-arrow-left"></i> moving back
22+
</a>
23+
</body>
24+
</html>
25+
26+
27+
<script type="text/javascript">
28+
const comp = Vue.component('product', {
29+
// Props with validation
30+
props: {
31+
premium: {type: Boolean, required: true, default: false}
32+
},
33+
// Without validation
34+
// props: ['premium'],
35+
template: `
36+
<div class="product">
37+
<div class="product-image">
38+
<img :src="image">
39+
</div>
40+
41+
<div class="product-info">
42+
<h1>{{ product }}</h1>
43+
44+
<div>
45+
<p v-if="inventory > 10">In Stock</p>
46+
<p v-else-if="inventory">Almost sold out</p>
47+
<p v-else>Out of Stock</p>
48+
</div>
49+
50+
<p v-if="premium">FREE Shipping</p>
51+
<p v-else>Shipping: $4.99</p>
52+
53+
<button
54+
v-on:click="addToCart"
55+
:disabled="!inventory"
56+
:class="inventory ? '' : 'disabledButton'"
57+
>
58+
Add to Cart
59+
</button>
60+
61+
<div v-for="(variant, index) in variants"
62+
:key="variant.id"
63+
class="color-box"
64+
:style="{backgroundColor: variant.color}"
65+
@mouseover="selectedVariantIndex = index">
66+
</div>
67+
</div>
68+
</div>
69+
`,
70+
data() {
71+
// Return a fresh object reference each time
72+
return {
73+
product: 'Socks',
74+
selectedVariantIndex: 0,
75+
variants: [
76+
{id: 1, color: 'green'},
77+
{id: 2, color: 'blue'}
78+
],
79+
inventory: 3,
80+
};
81+
},
82+
methods: {
83+
addToCart() {
84+
this.inventory--;
85+
const selectedVariant = this.variants[this.selectedVariantIndex];
86+
this.$emit('add-to-cart', {product: this.product, variant: selectedVariant});
87+
}
88+
},
89+
computed: {
90+
image() {
91+
const color = this.variants[this.selectedVariantIndex].color;
92+
return `./assets/socks-${color}.jpg`;
93+
}
94+
}
95+
})
96+
97+
const app = new Vue({
98+
el: '#app',
99+
data: {
100+
premium: true,
101+
cart: []
102+
},
103+
methods: {
104+
updateCart(product) {
105+
console.log('Adding to cart:', product);
106+
this.cart.push(product);
107+
}
108+
}
109+
});
110+
</script>
111+
112+
113+
<!-- livereload -->
114+
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>

‎01-HelloWorld/assets/style.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@ body {
99
height: 60px;
1010
}
1111

12+
.nav-bar h1 {
13+
padding: 5px;
14+
font-family: cursive;
15+
margin-left: 10px;
16+
}
17+
1218
.product {
1319
display: flex;
1420
flex-flow: wrap;

0 commit comments

Comments
 (0)