Access our course library with 40% off

Intro to Vue 2

Lessons

1. The Vue Instance

5:44

2. Attribute Binding

2:46

3. Conditional Rendering

3:44

4. List Rendering

2:16

5. Event Handling

4:13

6. Class & Style Binding

5:06

7. Computed Properties

4:57

8. Components

6:20

9. Communicating Events

4:38

10. Forms & v-model

9:34

11. Tabs

7:32

To get started learning Vue with Vue 3, take our Intro to Vue 3 course.

Tabs

In this lesson, we’ll learn how to add tabs to our application and implement a simple solution for global event communication.

Goal

We’ll learn how to create tabs to display our reviews and our review form separately.

Starting Code

index.html

    <div id="app">
      <div class="cart">
        <p>Cart({{ cart.length }})</p>
      </div>
      <product :premium="premium" @add-to-cart="updateCart"></product>
    </div>

main.js

    Vue.component('product', {
        props: {