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

L7

Browse Source
This commit is contained in:
bwbl 2026-01-13 15:16:00 +01:00
parent dbf00bb4a3
commit 025dc924ab
2 changed files with 103 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
index.html
View File

@ -1,49 +1,79 @@
<!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.11/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">
<div class="nav-bar"></div> <div class="nav-bar"></div>
<div class="cart">Cart({{ cart }})</div> <div class="cart">Cart({{ cart }})</div>
<div class="product-display"> <div class="product-display">
<div class="product-container"> <div class="product-container">
<div class="product-image"> <div class="product-image">
<img v-bind:src="image"> <img
</div> :class="{ 'out-of-stock-img': !inStock }"
<div class="product-info"> v-bind:src="image"
<h1>{{ product }}</h1> />
<p v-if="inStock">In Stock</p> </div>
<p v-else>Out of Stock</p> <div class="product-info">
<ul> <h1>{{ product }}</h1>
<li v-for="detail in details">{{ detail }}</li> <p v-if="inStock">In Stock</p>
</ul> <p v-else>Out of Stock</p>
<ul>
<li v-for="detail in details">{{ detail }}</li>
</ul>
<div <div
v-for="variant in variants" v-for="variant in variants"
:key="variant.id" :key="variant.id"
@mouseover="updateImage(variant.image)" @click="updateImage(variant.image)"
>{{ variant.color }}</div> class="color-circle"
<button class="button" @click="addToCart">Add to Cart</button> :style="{ backgroundColor: variant.color }"
</div> ></div>
</div> <button
</div> :class="[inStock ? '' : 'disabledButton']"
</div> :disabled="!inStock"
class="button"
@click="addToCart"
>
Add to Cart
</button>
</div>
</div>
</div>
</div>
<!-- Import App --> <!-- Import App -->
<script src="./main.js"></script> <script src="./main.js"></script>
<!-- Mount App --> <!-- Mount App -->
<script> <script>
const mountedApp = app.mount('#app') const mountedApp = app.mount("#app");
</script> </script>
</body> </body>
</html> </html>
<style>
.color-circle {
width: 50px;
height: 50px;
margin-top: 8px;
border: 2px solid #d8d8d8;
border-radius: 50%;
}
.color-circle:hover {
cursor: pointer;
}
.disabledButton {
background-color: #d8d8d8;
cursor: not-allowed;
}
</style>

54
main.js
View File

@ -1,24 +1,32 @@
const app = Vue.createApp({ const app = Vue.createApp({
data() { data() {
return { return {
cart:0, cart: 0,
product: 'Socks', product: "Socks",
brand: 'Vue Mastery', brand: "Vue Mastery",
image: './assets/images/socks_blue.jpg', image: "./assets/images/socks_blue.jpg",
inStock: false, inStock: false,
details: ['50% cotton', '30% wool', '20% polyester'], details: ["50% cotton", "30% wool", "20% polyester"],
variants: [ variants: [
{ id: 2234, color: 'green', image: './assets/images/socks_green.jpg' }, {
{ id: 2235, color: 'blue', image: './assets/images/socks_blue.jpg' }, id: 2234,
] color: "green",
} image: "./assets/images/socks_green.jpg",
}, },
methods: { {
addToCart() { id: 2235,
this.cart += 1 color: "blue",
}, image: "./assets/images/socks_blue.jpg",
updateImage(variantImage) { },
this.image = variantImage ],
} };
} },
}) methods: {
addToCart() {
this.cart += 1;
},
updateImage(variantImage) {
this.image = variantImage;
},
},
});