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

switched to vue 3

Browse Source
This commit is contained in:
Adam Jahr 2020-05-14 19:06:51 -04:00
parent 0ade166fd9
commit 83ceaf0593
5 changed files with 43 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/ProductDisplay.js
View File

@ -1,11 +1,13 @@
Vue.component('product-display', { app.component('product-display', {
props: { props: {
premium: { premium: {
type: Boolean, type: Boolean,
required: true, required: true
}, }
}, },
template: ` template:
/*html*/
`
<div class="product"> <div class="product">
<div class="container"> <div class="container">
@ -56,18 +58,18 @@ Vue.component('product-display', {
id: 2234, id: 2234,
color: 'green', color: 'green',
image: './assets/images/socks_green.jpg', image: './assets/images/socks_green.jpg',
quantity: 10, quantity: 10
}, },
{ {
id: 2235, id: 2235,
color: 'blue', color: 'blue',
image: './assets/images/socks_blue.jpg', image: './assets/images/socks_blue.jpg',
quantity: 0, quantity: 0
}, }
], ],
reviews: [], reviews: [],
tabs: ['review-form', 'review-list'], tabs: ['review-form', 'review-list'],
activeTab: 'review-form', activeTab: 'review-form'
} }
}, },
methods: { methods: {
@ -79,7 +81,7 @@ Vue.component('product-display', {
}, },
addReview(review) { addReview(review) {
this.reviews.push(review) this.reviews.push(review)
}, }
}, },
computed: { computed: {
productName() { productName() {
@ -96,6 +98,6 @@ Vue.component('product-display', {
return 'Free' return 'Free'
} }
return 2.99 return 2.99
}, }
}, }
}) })

14
components/ReviewForm.js
View File

@ -1,5 +1,7 @@
Vue.component('review-form', { app.component('review-form', {
template: ` template:
/*html*/
`
<form class="review-form" @submit.prevent="onSubmit"> <form class="review-form" @submit.prevent="onSubmit">
<h3>Leave a review</h3> <h3>Leave a review</h3>
@ -26,7 +28,7 @@ Vue.component('review-form', {
return { return {
name: '', name: '',
text: '', text: '',
rating: null, rating: null
} }
}, },
methods: { methods: {
@ -34,12 +36,12 @@ Vue.component('review-form', {
const review = { const review = {
name: this.name, name: this.name,
text: this.text, text: this.text,
rating: this.rating, rating: this.rating
} }
this.$emit('review-submitted', review) this.$emit('review-submitted', review)
this.name = '' this.name = ''
this.text = '' this.text = ''
this.rating = null this.rating = null
}, }
}, }
}) })

12
components/ReviewList.js
View File

@ -1,5 +1,7 @@
Vue.component('review-list', { app.component('review-list', {
template: ` template:
/*html*/
`
<div class="review-container"> <div class="review-container">
<p v-if="!reviews.length">There are no reviews yet.</p> <p v-if="!reviews.length">There are no reviews yet.</p>
<ul v-else> <ul v-else>
@ -14,7 +16,7 @@ Vue.component('review-list', {
props: { props: {
reviews: { reviews: {
type: Array, type: Array,
required: true, required: true
}, }
}, }
}) })

12
index.html
View File

@ -6,15 +6,9 @@
<!-- 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://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue@3.0.0-beta.12/dist/vue.global.js"></script>
</head> </head>
<body> <body>
<!-- Import Components -->
<script src="./components/ProductDisplay.js"></script>
<script src="./components/ReviewForm.js"></script>
<script src="./components/ReviewList.js"></script>
<div id="app"> <div id="app">
<div class="nav-bar"></div> <div class="nav-bar"></div>
@ -29,5 +23,9 @@
<!-- Import App --> <!-- Import App -->
<script src="./main.js"></script> <script src="./main.js"></script>
<!-- Import Components -->
<script src="./components/ProductDisplay.js"></script>
<script src="./components/ReviewForm.js"></script>
<script src="./components/ReviewList.js"></script>
</body> </body>
</html> </html>

17
main.js
View File

@ -1,12 +1,15 @@
const app = new Vue({ const app = Vue.createApp({
el: '#app', data() {
data: { return {
premium: true, premium: true,
cart: [], cart: []
}
}, },
methods: { methods: {
updateCart(id) { updateCart(id) {
this.cart.push(id) this.cart.push(id)
}, }
}, }
}) })
app.mount('#app')