b/intro-to-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: b:master
Branches Tags
b:L10-start
b:L9-start
b:L8-start
b:L7-start
b:L6-start
b:L5-start
b:L4-start
b:L3-start
b:L2-start
b:list
b:master
..
compare: b:L10-start
Branches Tags
b:L10-start
b:L9-start
b:L8-start
b:L7-start
b:L6-start
b:L5-start
b:L4-start
b:L3-start
b:L2-start
b:list
b:master

23 Commits
master ... L10-start

Author SHA1 Message Date
bwbl
3251d861fc WIP L10.4 2026-01-13 16:27:46 +01:00
Andy
6253c36939 update cdn link 2021-04-09 16:03:50 -04:00
Andy
3cfcc7cbdd L10 starting 2020-07-29 19:18:33 -04:00
Adam Jahr
1a8cd4892b L10 starting 2020-07-21 01:16:26 -04:00
Adam Jahr
8c51141d99 L10 starting code 2020-07-21 00:50:20 -04:00
Adam Jahr
e5a0b6e460 L9 solution 2020-07-21 00:48:15 -04:00
Adam Jahr
40c519c162 L10 ending code 2020-07-08 22:59:10 -04:00
Adam Jahr
ac72852668 L9 starting code 2020-07-07 21:42:47 -04:00
Adam Jahr
d440ca92fb L8 ending code 2020-07-06 22:28:50 -04:00
Adam Jahr
58e74974e0 L7 starting code 2020-07-06 21:58:48 -04:00
Adam Jahr
44d8427b7a L7 starting code 2020-07-06 21:41:58 -04:00
Adam Jahr
33ef706431 L7 starting code 2020-07-06 21:39:31 -04:00
Adam Jahr
7f52372b6c L6 ending code 2020-06-24 01:48:12 -04:00
Adam Jahr
2bd501d071 L5 ending code 2020-06-19 19:45:00 -04:00
Adam Jahr
a6209b82c8 L5 starting code 2020-06-19 19:41:08 -04:00
Adam Jahr
9ce75d24c2 L5 ending code 2020-06-19 19:36:48 -04:00
Adam Jahr
a903dd19cb L5 starting code 2020-06-19 17:23:40 -04:00
Adam Jahr
2846669a3f L4 ending code 2020-06-02 21:21:37 -04:00
Adam Jahr
b92a6c065c L4 starting code 2020-06-02 20:33:19 -04:00
Adam Jahr
0f08a0ddb3 L3 ending code 2020-05-29 22:12:52 -04:00
Adam Jahr
7db826380e L3 starting code 2020-05-29 22:04:13 -04:00
Adam Jahr
95bb5ecd55 L3 start 2020-05-26 23:45:05 -04:00
Adam Jahr
39452ddc6c lesson 3 ending 2020-05-26 23:39:42 -04:00
4 changed files with 137 additions and 18 deletions
Show Stats Expand all files Collapse all files

4
assets/styles.css
View File

@ -25,7 +25,7 @@ body {
margin: 25px 100px; margin: 25px 100px;
float: right; float: right;
border: 1px solid #d8d8d8; border: 1px solid #d8d8d8;
padding: 10px 30px; padding: 30px 30px;
background-color: white; background-color: white;
-webkit-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57); -webkit-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57); -moz-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57);
@ -89,7 +89,7 @@ li {
} }
.out-of-stock-img { .out-of-stock-img {
opacity:0.5 opacity: 0.5;
} }
p { p {

93
components/ProductDisplay.js Normal file
View File

@ -0,0 +1,93 @@
app.component("product-display", {
props: {
premium: {
type: Boolean,
required: true,
},
},
template:
/*html*/
`<div class="product-display">
<div class="product-container">
<div class="product-image">
<img v-bind:src="image">
</div>
<div class="product-info">
<h1>{{ title }}</h1>
<p v-if="inStock">In Stock</p>
<p v-else>Out of Stock</p>
<p>Shipping: {{ shipping }}</p>
<ul>
<li v-for="detail in details">{{ detail }}</li>
</ul>
<div
v-for="(variant, index) in variants"
:key="variant.id"
@mouseover="updateVariant(index)"
class="color-circle"
:style="{ backgroundColor: variant.color }">
</div>
<button
class="button"
:class="{ disabledButton: !inStock }"
:disabled="!inStock"
v-on:click="addToCart">
Add to Cart
</button>
</div>
</div>
</div>`,
data() {
return {
product: "Socks",
brand: "Vue Mastery",
selectedVariant: 0,
details: ["50% cotton", "30% wool", "20% polyester"],
variants: [
{
id: 2234,
color: "green",
image: "./assets/images/socks_green.jpg",
quantity: 50,
},
{
id: 2235,
color: "blue",
image: "./assets/images/socks_blue.jpg",
quantity: 0,
},
],
};
},
methods: {
addToCart() {
this.$emit("add-to-cart", this.variants[this.selectedVariant].id);
this.cart += 1;
},
updateVariant(index) {
this.selectedVariant = index;
},
},
computed: {
title() {
return this.brand + " " + this.product;
},
image() {
return this.variants[this.selectedVariant].image;
},
inStock() {
return this.variants[this.selectedVariant].quantity;
},
shipping() {
if (this.premium) {
return "Free";
}
return 2.99;
},
},
});

44
index.html
View File

@ -1,19 +1,33 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Vue Mastery</title> <title>Vue Mastery</title>
<!-- Import Styles --> <!-- Import Styles -->
<link rel="stylesheet" href="./assets/styles.css" /> <link rel="stylesheet" href="./assets/styles.css" />
<!-- Import Vue.js --> <!-- Import Vue.js -->
<script src="https://unpkg.com/vue@3.0.0-beta.12/dist/vue.global.js"></script> <script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<h1>Product goes here</h1> <div class="nav-bar"></div>
</div>
<!-- Import Js --> <div class="cart">Cart({{ cart.length }})</div>
<script src="./main.js"></script> <product-display
</body> :premium="premium"
@add-to-cart="updateCart"
></product-display>
</div>
<!-- Import App -->
<script src="./main.js"></script>
<!-- Import Components -->
<script src="./components/ProductDisplay.js"></script>
<!-- Mount App -->
<script>
const mountedApp = app.mount("#app");
</script>
</body>
</html> </html>

14
main.js
View File

@ -1 +1,13 @@
const product = 'Socks' const app = Vue.createApp({
data() {
return {
cart: [],
premium: true,
};
},
methods: {
updateCart(id) {
this.cart.push(id);
},
},
});