Skip to content

Commit 74195d3

Browse files
Doug SteinbergDoug Steinberg
Doug Steinberg
authored and
Doug Steinberg
committed
init
0 parents  commit 74195d3

22 files changed

+1189
-0
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/.idea
2+
/node_modules

‎Components/Product.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
var Product = {
2+
props: {
3+
product: Object
4+
},
5+
template: `
6+
<div class="mb-2 card p-2">
7+
<p v-if="product.isOnSale" class="bg-success text-light-text-center">On Sale!</p>
8+
<p>Product Name: {{ product.name }}</p>
9+
<p>Description: {{ product.description }}</p>
10+
<p>Quantity in stock: {{ product.quantityInStock }}</p>
11+
<p>Sale Price {{ product.price }}</p>
12+
</div>
13+
`
14+
};

‎Components/ProductTwo.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
const ProductTwo = {
2+
template: `
3+
<div class="mb-2 card p-2">
4+
<div class="row">
5+
<div class="col-sm-4">
6+
<p v-if="product.isOnSale"
7+
class="bg-success text-light on-sale">On Sale!</p>
8+
<img
9+
:src="product.thumbnailImage"
10+
@mouseover="$emit('show-modal')"
11+
@mouseout="$emit('hide-modal')"
12+
width="150"
13+
height="150"
14+
/>
15+
</div>
16+
<div class="col-sm-8">
17+
<p>Product Name: {{ product.name }}</p>
18+
<p>Description: {{ product.description }}</p>
19+
<p v-if="quantityLeft <= 0" class="bg-danger p-1">
20+
{{ quantityLeft }} left, we're sold out
21+
</p>
22+
<p v-else-if="quantityLeft < 3 " class="bg-danger p-1">
23+
{{ quantityLeft }} left, we're almost sold out
24+
</p>
25+
<p v-else-if="quantityLeft >= 3 && quantityLeft <= 5" class="bg-warning p-1">
26+
{{ quantityLeft }} left, stock is running low
27+
</p>
28+
<p v-else class="bg-success p-1">
29+
{{ quantityLeft }} left
30+
</p>
31+
<p>Sale Price {{ product.price }}</p>
32+
<button @click="$emit('add-to-cart')"
33+
:disabled="quantityLeft <= 0"
34+
class="btn btn-info btn-sm">
35+
Add to card
36+
</button>
37+
</div>
38+
</div>
39+
</div>
40+
`,
41+
props: {
42+
product: Object,
43+
quantityLeft: Number
44+
}
45+
};

‎Components/ShoppingCart.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
const ShoppingCart = {
2+
template: `
3+
<div class="card">
4+
<div class="card-header">
5+
Shopping Cart
6+
</div>
7+
<table class="table table-sm table-striped" v-if="items.length">
8+
<tr>
9+
<th>Name</th>
10+
<th>Qty</th>
11+
<th>Price</th>
12+
</tr>
13+
<tr v-for="item in items" :key="item.id">
14+
<td>
15+
{{ item.name }}
16+
<a href="#" @click.prevent="$emit('remove-from-cart', item.id)">remove</a>
17+
</td>
18+
<td>
19+
<input type="text"
20+
:value="item.quantity"
21+
class="form-control"
22+
style="max-width: 45px"
23+
@keyup.enter="$emit('update-quantity', $event.target.value, item.id)"
24+
>
25+
</td>
26+
<td>{{ item.price }}</td>
27+
</tr>
28+
<tr>
29+
<th>Total:</th>
30+
<th></th>
31+
<th>{{ cartTotal }}</th>
32+
</tr>
33+
</table>
34+
<div v-else class="p-4">
35+
<strong>Your cart is empty</strong>
36+
</div>
37+
</div>
38+
`,
39+
props: {
40+
items: Array
41+
},
42+
computed: {
43+
cartTotal: function () {
44+
if (!this.items.length) {
45+
return 0;
46+
}
47+
48+
return this.items.map(function (item) {
49+
return item.price * item.quantity
50+
}).reduce(function (accum, price) {
51+
return accum + price
52+
})
53+
}
54+
},
55+
};

‎Components/TestComponent.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// local vue component
2+
var TestComponent = {
3+
template: `
4+
<div class="card text-center bg-success text-light">
5+
Hello, I'm a test component!
6+
</div>
7+
`
8+
};

‎README.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Vue JS Basics
2+
3+
This is a set of examples for learning the basics of VueJS.
4+
5+
To run this project:
6+
- `npm install`
7+
- `npm server.js`
8+
- Visit the examples at [http://localhost:8080/](http://localhost:8080/)
9+
10+
11+
## Examples List
12+
13+
- Setting up a simple page with Vue
14+
- Vue component anatomy
15+
- Expressions
16+
- Directives
17+
- Data Binding
18+
- List Rendering
19+
- List Rendering with a Component
20+
- Actions
21+
- Events

‎examples/01_setting_up_vue.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Vue Basics</title>
6+
</head>
7+
<body>
8+
<div id="app">
9+
<hello-world></hello-world>
10+
</div>
11+
12+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.8/vue.js"></script>
13+
<script>
14+
15+
// register a Component gobaly
16+
Vue.component('hello-world', {
17+
data() {
18+
return {
19+
name: 'World!'
20+
}
21+
},
22+
template: '<h1>Hello {{ name }}</h1>'
23+
});
24+
25+
new Vue({
26+
el: '#app',
27+
})
28+
</script>
29+
</body>
30+
</html>

‎examples/02_vue_component_anatomy.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Vue Basics</title>
6+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
7+
</head>
8+
<body>
9+
<div id="app">
10+
<hello-world message="Hello Vue!"></hello-world>
11+
</div>
12+
13+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.8/vue.js"></script>
14+
<script src="../Components/TestComponent.js"></script>
15+
<script>
16+
17+
// global Vue component
18+
Vue.component('hello-world', {
19+
template: `<div class="container">
20+
<div class="card mt-5">
21+
<h3 class="card-title card-header bg-info text-light text-center">
22+
02 - Vue component anatomy
23+
</h3>
24+
<div class="card-body">
25+
<p>First Name: {{ firstName }}</p>
26+
<p>Last Name: {{ lastName }}</p>
27+
<p>Message: {{ message }}</p>
28+
<p>Full Name: {{ fullName }}</p>
29+
<test-component></test-component>
30+
</div>
31+
</div>
32+
</div>`,
33+
components: { // components that can be used in the template
34+
'test-component': TestComponent
35+
},
36+
data: function() { // must be a function that returns an object
37+
return {
38+
firstName: 'Doug',
39+
lastName: 'Steinberg'
40+
}
41+
},
42+
props: { // the parameters a component accepts
43+
message: String
44+
},
45+
computed: { // returned cached values until dependencies change
46+
fullName: function () {
47+
return this.firstName + ' ' + this.lastName
48+
}
49+
},
50+
methods: {
51+
sayHello: function (message) {
52+
alert("Hello! Here is your message: \n\n" + message)
53+
}
54+
},
55+
watch: {
56+
// called when first name changes
57+
firstName: function (value, oldValue) {
58+
const message = 'Old firstName: ' + oldValue + ' \nNew firstName: ' + value;
59+
this.sayHello(message)
60+
}
61+
},
62+
});
63+
64+
new Vue({
65+
el: '#app',
66+
})
67+
</script>
68+
</body>
69+
</html>

‎examples/03_expressions.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Vue Basics</title>
6+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
7+
</head>
8+
<body>
9+
10+
<div id="app">
11+
<div class="container">
12+
<div class="card mt-5">
13+
<h3 class="card-title card-header bg-info text-light text-center">
14+
03 - Expressions
15+
</h3>
16+
<div class="card-body">
17+
<p>Product Name: {{ product.name }}</p>
18+
<p> {{ product.quantityInStock + ' ' + product.name + 's in stock' }}</p>
19+
<p>On Sale? {{ product.isOnSale ? 'YES' : 'NO' }}</p>
20+
<p>Sale Price {{ product.getPrice() }}</p>
21+
</div>
22+
</div>
23+
</div>
24+
</div>
25+
26+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.8/vue.js"></script>
27+
<script>
28+
new Vue({
29+
el: '#app',
30+
data: { // when using the root instance, data is an object, not a function that returns an object
31+
product: {
32+
name: 'Super Widget',
33+
quantityInStock: 10,
34+
isOnSale: true,
35+
getPrice: function () {
36+
return '$19.95'
37+
}
38+
}
39+
}
40+
})
41+
</script>
42+
</body>
43+
</html>

‎examples/04_directives.html‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Vue Basics</title>
6+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
7+
</head>
8+
<body>
9+
10+
<div id="app">
11+
<div class="container">
12+
<div class="card mt-5">
13+
<h3 class="card-title card-header bg-info text-light text-center">04 - Directives</h3>
14+
<div class="card-body">
15+
<div v-if="product.quantityInStock > 0">
16+
<p>Product Name: {{ product.name }}</p>
17+
18+
<p v-show="showDescription">Description: {{ product.description }}</p>
19+
20+
<p v-if="product.quantityInStock < 3 " class="bg-danger p-1">
21+
{{ product.quantityInStock }} left, we're almost sold out
22+
</p>
23+
24+
<p v-else-if="product.quantityInStock >= 3 && product.quantityInStock <= 5" class="bg-warning p-1">
25+
{{ product.quantityInStock }} left, stock is running low
26+
</p>
27+
28+
<p v-else class="bg-success p-1">
29+
{{ product.quantityInStock }} left
30+
</p>
31+
32+
<p>On Sale? {{ product.isOnSale ? 'YES' : 'NO' }}</p>
33+
<p>Sale Price {{ product.price }}</p>
34+
</div>
35+
36+
<div v-else>
37+
Sorry, the {{ product.name }} is out of stock.
38+
</div>
39+
</div>
40+
</div>
41+
</div>
42+
<div class="m-3" style="width: 300px">
43+
<div class="form-group">
44+
<label>Quantity In Stock</label>
45+
<input v-model="product.quantityInStock" type="text" class="form-control">
46+
</div>
47+
<div class="form-group form-check">
48+
<input v-model="product.isOnSale" type="checkbox" class="form-check-input">
49+
<label class="form-check-label">On Sale?</label>
50+
</div>
51+
<div class="form-group form-check">
52+
<input v-model="showDescription" type="checkbox" class="form-check-input">
53+
<label class="form-check-label">Show Description?</label>
54+
</div>
55+
</div>
56+
</div>
57+
58+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.8/vue.js"></script>
59+
<script>
60+
new Vue({
61+
el: '#app',
62+
data: {
63+
product: {
64+
name: 'Super Widget',
65+
quantityInStock: 1,
66+
isOnSale: true,
67+
price: '$19.95',
68+
description: 'Heu. Calceuss favere! Toruss trabem in camerarius cubiculum! Bassus particulas ducunt ad boreas.'
69+
},
70+
showDescription: false
71+
}
72+
})
73+
</script>
74+
</body>
75+
</html>

0 commit comments

Comments
 (0)