GitHub - DonaH/vue3-intro: A Vue 3 Introduction per VueMastery Course.

Vue 3 Basic

Simple Product App

Overview of Topics

Intro to Vue 3
Creating the Vue App
Attribute Binding
Conditional Rendering
List Rendering
Event Handling
Class and Style Binding
Computed Properties
Components and Props
Communicating Events
Forms and v-model

Resources:

Details for Each Topic

Intro to Vue 3

VueMastery Video
Covers fundamentals of building a Vue app
Administer variations of product
Add to cart / remove from cart logic
In stock / out of stock logic
Build a review form with Vue
Recommended extension for VSCode:
- es6-string-html by Tobermory

Creating the Vue App

VueMastery Video

Create Vue app:

📂 main.js

const app = Vue.createApp({
  data() {
    return {
      product: 'Socks'
    }
  `}`
})

Mount Vue app:

📂 index.html

<html>
  <body>
    <div id="app"></div>

    <!-- Import App -->
    <script src="./main.js"></script>

    <!-- Mount App -->
    <script>const mountedApp = app.mount('#app')</script>
  </body>
</html>

Once the app is mounted, you can run JavaScript Expression inside html file such as:

  <h1>{{ product }}</h1>
  <p>{{ firstName + ' ' + lastName }}</p>
  <span>{{ clicked ? true : false }}</span>
  <div>{{ message.method() }}</div>

Reactivity System underneath the hood will take care of the DOM updates. Learn more here >> Reactivity in Depth

Attribute Binding

VueMastery Video

Attribute binding example:

<img v-bind:src="image">
<img :src="image"> <!-- equivalent shorthand -->

More examples:

<img :src="image">
<img :alt="description">1
<a :href="url">
<div :class="isActive">
<span :style="isActive">
<span :disables="isDisabled">

Conditional Rendering

VueMastery Video

Directives: v-if | v-else | v-show

📂 main.js

  const app = Vue.createApp({
    data() {
        return {
            product: 'Socks',
            image: './assets/images/socks_blue.jpg',
            inStock: true 
        }
    }
  })

📂 index.html

<p v-if="inStock">In Stock</p>
<p v-else>Out of Stock</p>

<p v-show="inStock">In Stock</p>

📂 main.js

const app = Vue.createApp({
    data() {
        return {
            ...
            inventory: 100 
    }

📂 index.html

<p v-if="inventory > 10">In Stock</p>
<p v-else>Out of Stock</p>

<p v-if="inventory > 10">In Stock</p>
<p v-else-if="inventory <= 10 && inventory > 0">Almost sold out!</p>
<p v-else>Out of Stock</p>

List Rendering

VueMastery Video

Looping through an array list and array of objects: v-for

📂 main.js

const app = Vue.createApp({
    data() {
        return {
            ...
            details: ['50% cotton', '30% wool', '20% polyester']
        }
    }
})

📂 index.html

<ul>
  <li v-for="detail in details">{{ detail }}</li>
</ul>

📂 main.js

data() {
  return {
    ...
    variants: [
      { id: 2234, color: 'green' },
      { id: 2235, color: 'blue' }
    ]
  }
}

📂 index.html

<div v-for="variant in variants" :key="variant.id">{{ variant.color }}</div>

Event Handling

VueMastery Video

Event Handling

📂 index.html

<div class="cart">Cart({{ cart }})</div>
...
<button class="button">Add to Cart</button>

📂 main.js

data() {
  return {
    cart: 0,
    ...
  }
}

📂 index.html

<button class="button" v-on:click="run logic here">Add to Cart</button>

Call the method on click:

<button class="button" v-on:click="addToCart">Add to Cart</button>

📂 main.js

const app = Vue.createApp({
  data() {
    return {
      cart: 0,
      ...
    }
  },
  methods: {
    addToCart() {
      this.cart += 1
    }
  }
})

Shorthand for 'v-on' is '@'

<button class="button" @click="addToCart">Add to Cart</button>

📂 main.js

data() {
  return {
    ...
    variants: [
      { id: 2234, color: 'green', image: './assets/images/socks_green.jpg' },
      { id: 2235, color: 'blue', image: './assets/images/socks_blue.jpg' },
    ]
  }
}

📂 index.html

<div v-for="variant in variants" :key="variant.id" @mouseover="updateImage(variant.image)">{{ variant.color }}</div>

📂 main.js

methods: {
  ...
  updateImage(variantImage) {
    this.image = variantImage
  }
}

Class and Style Binding

VueMastery Video

Style Binding :open_file_folder: index.html

<div 
  v-for="variant in variants" 
  :key="variant.id" 
  @mouseover="updateImage(variant.image)" 
  class="color-circle" 
</div>

📂 style.css

.color-circle {
  width: 50px;
  height: 50px;
  margin-top: 8px;
  border: 2px solid #d8d8d8;
  border-radius: 50%;
}

📂 index.html

<div 
  v-for="variant in variants" 
  :key="variant.id" 
  @mouseover="updateImage(variant.image)" 
  class="color-circle" 
  :style="{ backgroundColor: variant.color }">
</div>

Understanding Style Binding

<div 
  ...
  :style="{ backgroundColor: variant.color }">
</div>

Camel vs Kebab

Use Camel case for css property inside JavaScript Expression:
<div :style="{ backgroundColor: variant.color }></div>
Add quotes if you want to use Kebab case:
<div :style="{ 'background-color': variant.color }></div>

Style Binding: Objects :open_file_folder: index.html

<div :style="styles"></div>

📂 main.js

data() {
  return {
    styles: {
      color: 'green',
      fontSize: '14px'
    }
  }
}

Class Binding

Disable 'add to cart' when out of stock

Make button look disabled

📂 index.html

<button 
  class="button" 
  :disabled="!inStock" 
  v-on:click="addToCart">
  Add to Cart
</button>

📂 style.css

.disabledButton {
  background-color: #d8d8d8;
  cursor: not-allowed;
}

Conditionally apply the class when out of stock

📂 index.html

<button 
  class="button" 
  :class="{ disabledButton: !inStock }" 
  :disabled="!inStock" 
  @click="addToCart">
  Add to Cart
</button>

Multiple Class Names Conditionally add the active class

📂 index.html

<div class="color-circle"
  :class="{ active: activeClass }">
</div>

📂 main.js

data() {
  return {
    activeClass: true
  }
}

Combined look:

<div class="color-circle active"></div>

Ternary Operators

In-line example:

<div :class="[ isActive ? activeClass : '' ]"></div>

Computed Properties

VueMastery Video

Simple Computed Property

📂 main.js

data() {
  return {
    product: 'Socks',
    brand: 'Vue Mastery'
}

📂 index.html

<h1>{{ brand + ' ' + product }}</h1>

Compute the Brand and Product Together: :open_file_folder: index.html

<h1>{{ title }}</h1>

📂 main.js

...
computed: {
  title() {
    return this.brand + ' ' + this.product
  }
}

Computing Image & Quantity Add quantity property to the variant objects

📂 main.js

data() {
  return {
    ...
    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 },
    ]
  }
}

Replace updateImage() with new method updateVariant() 📂 index.html

<div 
  v-for="(variant, index) in variants" 
  :key="variant.id" 
  @mouseover="updateVariant(index)" <! -- new method -->
  class="color-circle" 
  :style="{ backgroundColor: variant.color }">
</div>

Add new data property which will be updated to equal index 📂 main.js

data() {
  return {
    ...
    selectedVariant: 0,
    ...
  }
}

📂 main.js

updateVariant(index) {
  this.selectedVariant = index
}

Delete image & inStock from data, replace with computed properties :open_file_folder: main.js

computed: {
  ...
  image() {
    return this.variants[this.selectedVariant].image
  },
  inStock() {
    return this.variants[this.selectedVariant].quantity
  }
}

Components and Props

VueMastery Video

Components

Create ProductDisplay component :open_file_folder: components/ProductDisplay.js
```
app.component('product-display', {})
```

Template :open_file_folder: components/ProductDisplay.js

app.component('product-display', {
  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>
          
          <button 
            class="button" 
            :class="{ disabledButton: !inStock }" 
            :disabled="!inStock" 
            v-on:click="addToCart">
            Add to Cart
          </button>
        </div>
      </div>
    </div>`
})

Notice the template literal back ticks ``, /*html*/ & VSCode extension:es6-string-html, syntax highlighting should work in VSCode.

Move data & methods from main.js to here

📂 components/ProductDisplay.js

app.component('product-display', {
  template: 
    /*html*/ 
    `<div class="product-display">
      ...
    </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
      }
  }
})

Cleaning up main.js - leaving only cart data & empty methods for now

const app = Vue.createApp({
  data() {
    return {
      cart: 0,
    }
  },
  methods: {}
})

Importing the Component

📂 index.html

<!-- Import Components -->
<script src="./components/ProductDisplay.js"></script>

Using it in the template:

📂 index.html

<div id="app">
  <div class="nav-bar"></div>

  <div class="cart">Cart({{ cart }})</div>
  <product-display></product-display>
</div>

Example of reusable blocks - add two more product-display components

📂 index.html

<div id="app">
  <div class="nav-bar"></div>

  <div class="cart">Cart({{ cart }})</div>
  <product-display></product-display>
  <product-display></product-display>
  <product-display></product-display>
</div>

Props

props are custom attributes for passing data into a component.

Giving component a prop - premium account

set the type & if it's required

📂 main.js

const app = Vue.createApp({
  data() {
    return {
      cart: 0,
      premium: true
    }
  }
})

📂 components/ProductDisplay.js

app.component('product-display', {
  props: {
    premium: {
      type: Boolean,
      required: true
    }
  },
  ...
}

Add custom attribute to product-display component

📂 index.html

  <div id="app">
  <div class="nav-bar"></div>

  <div class="cart">Cart({{ cart }})</div>
    <product-display :premium="premium"></product-display>
  </div>

Conditionally display shipping cost - if premium is true, shipping is free, otherwise, $2.99

📂 components/ProductDisplay.js

  template: 
  /*html*/
  `<div class="product-display">
    ...
      <p>Shipping: {{ shipping }}</p>
    ...
  </div>`,

📂 components/ProductDisplay.js

  computed: {
    ...
    shipping() {
      if (this.premium) {
        return 'Free'
      }
        return 2.99
      }
  }

Communicating Events

VueMastery Video

Emitting the event - from product display component to main.js so we can update the cart

📂 components/ProductDisplay.js

methods: {
  addToCart() {
    this.$emit('add-to-cart')
  }
  ...
}

📂 index.html

<product-display :premium="premium" @add-to-cart="updateCart"></product-display>

Add updateCart() method in main.js

📂 main.js

const app = Vue.createApp({
  data() {
    return {
      cart: [],
      ...
    }
  },
  methods: {
    updateCart() {
      this.cart += 1
    }
  }
})

Add product id to the cart

📂 main.js

const app = Vue.createApp({
  data() {
    return {
      cart: [],
      ...
    }
  },
  methods: {
    updateCart(id) {
      this.cart.push(id)
    }
  }

Add a payload to add-to-cart event emission, so updateCart has access to that id

📂 components/ProductDisplay.js

methods: {
  addToCart() {
    this.$emit('add-to-cart', this.variants[this.selectedVariant].id)
  }
  ...
}

Since no need to display the id in the cart, we can use .length method to display the amount of items instead
```
<div id="app">
...
<div class="cart">Cart({{ cart.length }})</div>
...
</div>
```

Forms and v-model

VueMastery Video
Add a Product Review Form with Two-way Binding: v-model

Create new component - ReviewForm.js

📂 components/ReviewForm.js

app.component('review-form', {
template:
/*html*/
`<form class="review-form">
  <h3>Leave a review</h3>
  <label for="name">Name:</label>
  <input id="name">

  <label for="review">Review:</label>      
  <textarea id="review"></textarea>

  <label for="rating">Rating:</label>
  <select id="rating">
    <option>5</option>
    <option>4</option>
    <option>3</option>
    <option>2</option>
    <option>1</option>
  </select>

  <input class="button" type="submit" value="Submit">
</form>`,
  data() {
    return {
      name: '',
      review: '',
      rating: null
    }
  }
})

Inside of the template, notice these elements:
- <input id="name">
- <textarea id="review">
- <select id="rating">

Bind these input fields to their respective data properties

  data() {
  return {
    name: '',
    review: '',
    rating: null
  }
}

Add v-model directive to each of these input elements

📂 components/ReviewForm.js

app.component('review-form', {
template:
/*html*/
`<form class="review-form">
  <h3>Leave a review</h3>
  <label for="name">Name:</label>
  <input id="name" v-model="name">

  <label for="review">Review:</label>      
  <textarea id="review" v-model="review"></textarea>

  <label for="rating">Rating:</label>
  <select id="rating" v-model.number="rating">
    <option>5</option>
    <option>4</option>
    <option>3</option>
    <option>2</option>
    <option>1</option>
  </select>

  <input class="button" type="submit" value="Submit">  
  </form>`,
  data() {
    return {
      name: '',
      review: '',
      rating: null
  }
})

Notice how on the <select> element, we used v-model.number this is a modifier that typecasts the value as a number.

Submitting the Review Form

Add a listener

📂 components/ReviewForm.js

app.component('review-form', {
template:
/*html*/
`<form class="review-form" @submit.prevent="onSubmit">
  ...
  <input class="button" type="submit" value="Submit">  
  </form>`
  ...
})

Add onSubmit() method

📂 components/ReviewForm.js

...
data() {
  return {
    name: '',
    review: '',
    rating: null
  }
},
methods: {
  onSubmit() {
    let productReview = {
      name: this.name,
      review: this.review,
      rating: this.rating,
    }
    this.$emit('review-submitted', productReview)

    this.name = ''
    this.review = ''
    this.rating = null
  }
}
...

Import the Review Form

📂 index.html

<!-- Import Components -->
...
<script src="./components/ReviewForm.js"></script>
...

Use review-form component inside Product Display

📂 components/ProductDisplay.js

template: 
/*html*/
`<div class="product-display">
  <div class="product-container">
  ...
  </div>
  <review-form></review-form>
  </div>`
})

Adding Product Reviews

Add event listener onto the review-form

📂 components/ProductDisplay.js

template: 
/*html*/
`<div class="product-display">
  <div class="product-container">
  ...
  </div>
  <review-form @review-submitted="addReview"></review-form>
  </div>`
})

Add a new addReview() method

📂 components/ProductDisplay.js

...
data() {
  return {
    ...
    reviews: []
  }
},
methods: {
  ...
  addReview(review) {
    this.reviews.push(review)
  }
},
...

Displaying the reviews

Create new component - ReviewList.js to show the product review

📂 components/ReviewList.js

app.component('review-list', {
props: {
  reviews: {
    type: Array,
    required: true
  }
},
template:
/*html*/
`
<div class="review-container">
<h3>Reviews:</h3>
  <ul>
    <li v-for="(review, index) in reviews" :key="index">
      {{ review.name }} gave this {{ review.rating }} stars
      <br/>
      "{{ review.review }}"
      <br/>
    </li>
  </ul>
</div>
`
})

Import this new component

📂 index.html

<!-- Import Components -->
...
<script src="./components/ReviewList.js"></script>
...

📂 components/ProductDisplay.js

template: 
  /*html*/
  `<div class="product-display">
    <div class="product-container">
    ...
    </div>
    <review-list :reviews="reviews"></review-list>
    <review-form @review submitted="addReview"></review-form>
  </div>`
})

Don't show the review if none is present using .length method

📂 components/ProductDisplay.js

template: 
  /*html*/
  `<div class="product-display">
    ...
    <review-list v-if="reviews.length" :reviews="reviews"></review-list>
    ...
  </div>`
})

Basic Form Validation

📂 components/ReviewForm.js

methods: {
  onSubmit() {
    if (this.name === '' || this.review === '' || this.rating === null) {
      alert('Review is incomplete. Please fill out every field.')
      return
    }
  ...
  }
}

Last Modified On: 2021-08-09
Creation Date: 2021-08-05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Vue 3 Basic

Simple Product App

Overview of Topics

Resources:

Details for Each Topic

Intro to Vue 3

Creating the Vue App

Attribute Binding

Conditional Rendering

List Rendering

Event Handling

Class and Style Binding

Camel vs Kebab

Computed Properties

Components and Props

Components

Props

Communicating Events

Forms and v-model

About

Releases

Packages

Contributors 2

Languages

Name		Name	Last commit message	Last commit date
Latest commit History 37 Commits
assets		assets
components		components
.gitignore		.gitignore
README.md		README.md
index.html		index.html
main.js		main.js

DonaH/vue3-intro

Folders and files

Latest commit

History

Repository files navigation

Vue 3 Basic

Simple Product App

Overview of Topics

Resources:

Details for Each Topic

Intro to Vue 3

Creating the Vue App

Attribute Binding

Conditional Rendering

List Rendering

Event Handling

Class and Style Binding

Camel vs Kebab

Computed Properties

Components and Props

Components

Props

Communicating Events

Forms and v-model

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Contributors 2

Languages

Packages