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

Compare commits

base: b:ac7285266858fc34ee992b60c42e3da66a6513b7
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:7555f030e07abafbd563f9aab7132edfb03587da
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

3 Commits
ac72852668 ... 7555f030e0

Author SHA1 Message Date
bwbl
7555f030e0 L9 2026-01-13 16:02:16 +01:00
Andy
bc68ec8034 update 2022-05-30 15:18:36 -04:00
Andy
82171f66ab update cdn link 2021-04-09 15:57:11 -04:00
4 changed files with 134 additions and 81 deletions
Show Stats Expand all files Collapse all files

15
components/ProductDetails.js Normal file
View File

@ -0,0 +1,15 @@
app.component("product-details", {
props: {
details: [],
},
template:
/*html*/
`
<div class="product-details">
<p>Details:</p>
<div v-for="(detail, index) in details">
{{ detail }}
</div>
</div>
`,
});

87
components/ProductDisplay.js Normal file
View File

@ -0,0 +1,87 @@
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>
<div
v-for="(variant, index) in variants"
:key="variant.id"
@mouseover="updateVariant(index)"
class="color-circle"
:style="{ backgroundColor: variant.color }">
</div>
<p>Shipping: {{ shipping }}</p>
<product-details :details="details"></product-details>
<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.cart += 1;
},
updateVariant(index) {
this.selectedVariant = index;
},
},
computed: {
shipping() {
if (this.premium) {
return "Free";
} else {
return 2.99;
}
},
title() {
return this.brand + " " + this.product;
},
image() {
return this.variants[this.selectedVariant].image;
},
inStock() {
return;
this.variants[this.selectedVariant].quantity;
},
},
});

72
index.html
View File

@ -1,53 +1,29 @@
<!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> <!-- Import Components -->
<body> </head>
<div id="app"> <body>
<div class="nav-bar"></div> <div id="app">
<div class="nav-bar"></div>
<div class="cart">Cart({{ cart }})</div>
<product-display :premium="premium"></product-display>
</div>
<div class="cart">Cart({{ cart }})</div> <!-- Import App -->
<script src="./main.js"></script>
<div class="product-display"> <script src="./components/ProductDisplay.js"></script>
<div class="product-container"> <script src="./components/ProductDetails.js"></script>
<div class="product-image">
<img v-bind:src="image">
</div>
<div class="product-info">
<h1>{{ title }}</h1>
<p v-if="inStock">In Stock</p> <!-- Mount App -->
<p v-else>Out of Stock</p> <script>
<ul> const mountedApp = app.mount("#app");
<li v-for="detail in details">{{ detail }}</li> </script>
</ul> </body>
<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>
</div>
<!-- Import App -->
<script src="./main.js"></script>
<!-- Mount App -->
<script>
const mountedApp = app.mount('#app')
</script>
</body>
</html> </html>

41
main.js
View File

@ -1,34 +1,9 @@
const app = Vue.createApp({ const app = Vue.createApp({
data() { data() {
return { return {
cart: 0, cart: 0,
product: 'Socks', premium: true,
brand: 'Vue Mastery', };
selectedVariant: 0, },
details: ['50% cotton', '30% wool', '20% polyester'], methods: {},
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.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].image
}
}
})