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

Compare commits

base: b:33ef70643159219d8d2bc76d9f13286eadf4d218
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:6253c369396c4da6123a3a1bc3d9d529bfc8bc9b
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

10 Commits
33ef706431 ... 6253c36939

Author SHA1 Message Date
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
4 changed files with 94 additions and 37 deletions
Show Stats Expand all files Collapse all files

4
assets/styles.css
View File

@ -88,6 +88,10 @@ li {
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.57); box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.57);
} }
.out-of-stock-img {
opacity: 0.5;
}
p { p {
font-size: 22px; font-size: 22px;
} }

82
components/ProductDisplay.js Normal file
View File

@ -0,0 +1,82 @@
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.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
}
}
})

24
index.html
View File

@ -6,36 +6,22 @@
<!-- 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">
<div class="nav-bar"></div> <div class="nav-bar"></div>
<div class="cart">Cart({{ cart }})</div> <div class="cart">Cart({{ cart }})</div>
<product-display :premium="premium"></product-display>
<div class="product-display">
<div class="product-container">
<div class="product-image">
<img v-bind:src="image">
</div>
<div class="product-info">
<h1>{{ product }}</h1>
<p v-if="inStock">In Stock</p>
<p v-else>Out of Stock</p>
<ul>
<li v-for="detail in details">{{ detail }}</li>
</ul>
<div v-for="variant in variants" :key="variant.id" @mouseover="updateImage(variant.image)">{{ variant.color }}</div>
<button class="button" v-on:click="addToCart">Add to Cart</button>
</div>
</div>
</div>
</div> </div>
<!-- Import App --> <!-- Import App -->
<script src="./main.js"></script> <script src="./main.js"></script>
<!-- Import Components -->
<script src="./components/ProductDisplay.js"></script>
<!-- Mount App --> <!-- Mount App -->
<script> <script>
const mountedApp = app.mount('#app') const mountedApp = app.mount('#app')

21
main.js
View File

@ -1,24 +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',
image: './assets/images/socks_blue.jpg',
inStock: true,
details: ['50% cotton', '30% wool', '20% polyester'],
variants: [
{ id: 2234, color: 'green', image: './assets/images/socks_green.jpg' },
{ id: 2235, color: 'blue', image: './assets/images/socks_blue.jpg' },
]
} }
}, },
methods: { methods: {}
addToCart() {
this.cart += 1
},
updateImage(variantImage) {
this.image = variantImage
}
}
}) })