Skip to content

Commit e7a411a

Browse files
LaoujinLaoujin
committed
getting there
1 parent 3aab62b commit e7a411a

14 files changed

+688
-39
lines changed

‎01-HelloWorld/00-Hello.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!-- https://www.vuemastery.com -->
2+
<html>
3+
<head>
4+
<script src="https://unpkg.com/vue"></script>
5+
<link href="./assets/style.css" rel="stylesheet">
6+
<title>Barely Socks</title>
7+
</head>
8+
<body>
9+
<div id="app">
10+
<div class="nav-bar"><h1>Barely Socks</h1></div>
11+
<div class="product">
12+
<div class="product-info">
13+
<!-- Binding -->
14+
<h1>{{ product }}</h1>
15+
</div>
16+
</div>
17+
</div>
18+
19+
<a href="01-Socks.html" class="next">
20+
moving on <i class="fas fa-arrow-right"></i>
21+
</a>
22+
</body>
23+
</html>
24+
25+
26+
27+
28+
29+
30+
31+
32+
33+
34+
<script type="text/javascript">
35+
const vm = new Vue({
36+
el: '#app',
37+
data: {
38+
product: 'Socks',
39+
},
40+
});
41+
console.log('Modify data directly from the console with `vm.product = "Shoes";`');
42+
</script>
43+
44+
45+
46+
47+
48+
49+
50+
51+
52+
53+
54+
55+
56+
57+
58+
<!-- livereload -->
59+
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>

‎01-HelloWorld/01-Socks.html‎

Lines changed: 34 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,8 @@ <h1>{{ product }}</h1>
3737
<button
3838
v-on:click="cart++; inventory--"
3939
:disabled="!inventory"
40-
:class="{'add-to-cart': true, disabledButton: inventory ? false : true}"
40+
class="add-to-cart"
41+
:class="inventory ? '' : 'disabledButton'"
4142
>
4243
<!-- Method: addToCart -->
4344
Add to Cart
@@ -54,21 +55,31 @@ <h1>{{ product }}</h1>
5455
:key="variant.id"
5556
class="color-box"
5657
:style="{backgroundColor: variant.color}"
57-
@mouseover="setImage(variant.color)">
58-
</div>
58+
@mouseover="setImage(variant.color, $event)"
59+
></div>
5960
</div>
6061
</div>
6162
</div>
6263

64+
<a href="00-Hello.html" class="prev">
65+
<i class="fas fa-arrow-left"></i> moving back
66+
</a>
6367
<a href="02-ComputedSocks.html" class="next">
6468
moving on <i class="fas fa-arrow-right"></i>
6569
</a>
6670
</body>
6771
</html>
6872

6973

74+
75+
76+
77+
78+
79+
80+
7081
<script type="text/javascript">
71-
const app = new Vue({
82+
const vm = new Vue({
7283
el: '#app',
7384
data: {
7485
product: 'Socks',
@@ -86,15 +97,31 @@ <h1>{{ product }}</h1>
8697
this.cart++;
8798
this.inventory--;
8899
},
89-
setImage(color) {
90-
console.log('Vue object with data and methods', this);
100+
setImage(color, event) {
101+
console.log('Vue instance with data and methods', this, event);
91102
this.image = `./assets/socks-${color}.jpg`;
92103
}
93104
}
94105
});
95-
console.log('Modify data directly from the console with `app.product = "Shoes";`');
106+
console.log('Modify data directly from the console with `vm.product = "Shoes";`');
96107
</script>
97108

98109

110+
111+
112+
113+
114+
115+
116+
117+
118+
119+
120+
121+
122+
123+
124+
125+
99126
<!-- livereload -->
100127
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>

‎01-HelloWorld/02-ComputedSocks.html‎

Lines changed: 38 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,7 @@ <h1>{{ title }}</h1>
2828
<button
2929
v-on:click="cart++; inventory--"
3030
:disabled="!inventory"
31-
class="add-to-cart"
32-
:class="inventory ? '' : 'disabledButton'"
31+
:class="{'add-to-cart': true, disabledButton: inventory ? false : true}"
3332
>
3433
Add to Cart
3534
</button>
@@ -41,13 +40,17 @@ <h1>{{ title }}</h1>
4140

4241

4342
<!-- Loops -->
44-
<div v-for="(variant, index) in variants"
43+
<div v-for="(variant, index) in variants.filter(x => !x.soldOut)"
4544
:key="variant.id"
4645
class="color-box"
46+
:class="{active: selectedVariantIndex === index}"
4747
:style="{backgroundColor: variant.color}"
48-
@mouseover="setSelectedVariant(variant, index)">
49-
</div>
48+
@mouseover="setSelectedVariant(variant, index)"
49+
></div>
5050
</div>
51+
52+
<!-- Can use Math, Date directly inside the templates -->
53+
<small>Rendered on: {{ new Date().toGMTString() }} <br><br></small>
5154
</div>
5255
</div>
5356

@@ -61,15 +64,27 @@ <h1>{{ title }}</h1>
6164
</html>
6265

6366

67+
68+
69+
70+
71+
72+
73+
74+
75+
76+
77+
6478
<script type="text/javascript">
65-
const app = new Vue({
79+
const vm = new Vue({
6680
el: '#app',
6781
data: {
6882
product: 'Socks',
6983
selectedVariantIndex: 0,
7084
variants: [
7185
{id: 1, color: 'green'},
72-
{id: 2, color: 'blue'}
86+
{id: 2, color: 'blue'},
87+
{id: 3, color: 'red', soldOut: true},
7388
],
7489
inventory: 3,
7590
cart: 0
@@ -91,9 +106,24 @@ <h1>{{ title }}</h1>
91106
}
92107
}
93108
});
94-
console.log('Modify data directly from the console with `app.product = "Shoes";`');
109+
console.log('Modify data directly from the console with `vm.product = "Shoes";`');
95110
</script>
96111

97112

113+
114+
115+
116+
117+
118+
119+
120+
121+
122+
123+
124+
125+
126+
127+
98128
<!-- livereload -->
99129
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>

‎01-HelloWorld/03-ComponentSocks.html‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<div id="app">
99
<div class="nav-bar"><h1>Componentized Socks</h1></div>
1010

11-
<product :premium="premium" @add-to-cart="updateCart"></product>
11+
<product :premium="premium" @add-to-cart="updateCart" class="main-prod"></product>
1212

1313
<div class="cart">
1414
{{ cart.length }}
@@ -29,5 +29,26 @@
2929
<script src="https://unpkg.com/vue"></script>
3030
<script src="03-ComponentSocks.js"></script>
3131

32+
33+
34+
35+
36+
37+
38+
39+
40+
41+
42+
43+
44+
45+
46+
47+
48+
49+
50+
51+
52+
3253
<!-- livereload -->
3354
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>

‎01-HelloWorld/03-ComponentSocks.js‎

Lines changed: 38 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,46 @@
11
const comp = Vue.component('product', {
22
// Props with validation
33
props: {
4-
premium: {type: Boolean, required: true, default: false}
4+
premium: {type: Boolean, required: true, default: false},
5+
// Types: String, Number, Array, Object, Function, Promise, any ctor
6+
// Null and undefined always pass validation
7+
// oneOf: [String, Number],
8+
// special: {
9+
// default() { return 'calculatedValue'; },
10+
// validator(value) { return true; }
11+
// }
512
},
613
// Without validation
714
// props: ['premium'],
815
template: `
16+
<!-- Must have single root element -->
917
<div class="product">
1018
<div class="product-image">
1119
<img :src="image">
1220
</div>
1321
<div class="product-info">
14-
<h1>{{ product }}</h1>
15-
<p v-if="premium">FREE Shipping</p>
22+
<h1 v-text="product"></h1>
23+
24+
<p v-if="premium" v-html="'<b>FREE Shipping</b>'"></p>
1625
<p v-else>Shipping: $4.99</p>
17-
<button v-on:click="addToCart" class="add-to-cart" :class="inventory ? '' : 'disabledButton'">
26+
27+
<button @click="addToCart" class="add-to-cart" :class="inventory ? '' : 'disabledButton'">
1828
Add to Cart
1929
</button>
30+
2031
<div v-for="(variant, index) in variants"
2132
:key="variant.id"
2233
class="color-box"
34+
:class="{active: selectedVariantIndex === index}"
2335
:style="{backgroundColor: variant.color}"
24-
@mouseover="selectedVariantIndex = index">
25-
</div>
36+
@mouseover="selectedVariantIndex = index"
37+
></div>
2638
</div>
2739
</div>
2840
`,
2941
data() {
30-
// Return a fresh object reference each time
42+
// data is a function inside a Vue.component()
43+
// Do return a new object reference each time.
3144
return {
3245
product: 'Socks',
3346
selectedVariantIndex: 0,
@@ -49,13 +62,29 @@ const comp = Vue.component('product', {
4962
image() {
5063
const color = this.variants[this.selectedVariantIndex].color;
5164
return `./assets/socks-${color}.jpg`;
52-
}
65+
},
66+
// If you also need a setter:
67+
// title: {
68+
// get() {
69+
// return this.product;
70+
// },
71+
// set(newValue) {
72+
// this.product = newValue;
73+
// }
74+
// }
5375
}
5476
});
5577

5678

5779

58-
const app = new Vue({
80+
81+
82+
83+
84+
85+
86+
87+
const vm = new Vue({
5988
el: '#app',
6089
data: {
6190
premium: true,

‎01-HelloWorld/04-ReviewableSocks.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,5 +27,28 @@
2727
<script src="04-ReviewableSocks.js"></script>
2828

2929

30+
31+
32+
33+
34+
35+
36+
37+
38+
39+
40+
41+
42+
43+
44+
45+
46+
47+
48+
49+
50+
51+
52+
3053
<!-- livereload -->
3154
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>

0 commit comments

Comments
 (0)