Learn Vue 2: Step By Step

Practical Component Exercise #3: Tabs

Episode 11 Run Time 14:58

Let's review one more practical component exercise, before moving on to new topics. Let's re-create the common tabs feature that you've seen on so many websites. This will give us a number of interesting techniques to review.

View the source for this episode on GitHub.

Publish Date: December 2, 2016

Previous Next

javascript vue component

01

Episode 1 Run Time 4:13

Basic Data Binding
02

Episode 2 Run Time 3:03

Setup Vue Devtools
03

Episode 3 Run Time 5:27

Lists
04

Episode 4 Run Time 5:04

Vue Event Listeners
05

Episode 5 Run Time 5:57

Attribute and Class Binding
06

Episode 6 Run Time 6:20

The Need for Computed Properties
07

Episode 7 Run Time 5:02

Components 101
08

Episode 8 Run Time 2:36

Components Within Components
09

Episode 9 Run Time 6:21

Practical Component Exercise #1: Message
10

Episode 10 Run Time 5:47

Practical Component Exercise #2: Modal
Episode 11 Run Time 14:58

Practical Component Exercise #3: Tabs
12

Episode 12 Run Time 5:59

Component Communication Example #1: Custom Events
13

Episode 13 Run Time 4:03

Component Communication Example #2: Event Dispatcher
14

Episode 14 Run Time 5:54

Named Slots in a Nutshell
15

Episode 15 Run Time 3:57

Single-Use Components and Inline Templates
16

Episode 16 Run Time 9:31

Webpack and vue-cli
17

Episode 17 Run Time 3:48

Hot Module Replacement
18

Episode 18 Run Time 8:01

Vue Ajax Requests With Axios
19

Episode 19 Run Time 17:00

Object-Oriented Forms: Part 1
20

Episode 20 Run Time 13:15

Object-Oriented Forms: Part 2
21

Episode 21 Run Time 8:30

Object-Oriented Forms: Part 3
22

Episode 22 Run Time 18:30

Webpack Config From Scratch
23

Episode 23 Run Time 10:14

This is Laravel Mix
24

Episode 24 Run Time 4:28

Shared State 101
25

Episode 25 Run Time 8:38

Custom Input Components
26

Episode 26 Run Time 16:50

Vue SPA Essentials: Routing
27

Episode 27 Run Time 15:01

SPAs and the Backend
28

Episode 28 Run Time 2:30

Vue Filters
29

Episode 29 Run Time 14:08

Dedicated Form Components
30

Episode 30 Run Time 13:05

Testing Vue: Part 1
31

Episode 31 Run Time 8:36

Vue Component Responsibility
32

Episode 32 Run Time 4:42

Vue Subclassing
33

Episode 33 Run Time 7:55

Scoped Slots
34

Episode 34 Run Time 11:58

Wrap Existing Tools into Components
35

Episode 35 Run Time 19:01

Create a Testimonials Component With Me
36

Episode 36 Run Time 9:31

The Difference Between Debounce and Throttle
37

Episode 37 Run Time 15:54

Mega Menus and One-to-One Relationships
38

Episode 38 Run Time 7:04

Vue Portal Use Case #2
39

Episode 39 Run Time 18:44

Workshop - Contact Support Modal
40

Episode 40 Run Time 7:08

Reusability
41

Episode 41 Run Time 15:19

Reusability: Part 2
42

Episode 42 Run Time 11:15

Fixed to the Top
43

Episode 43 Run Time 5:31

Fixed to the Top: Part 2
44

Episode 44 Run Time 18:17

Tooltips Three Ways
45

Episode 45 Run Time 5:25

Render Functions: Part 1
46

Episode 46 Run Time 9:44

Extract and Generalize: Infinite Scrolling Refactor
47

Episode 47 Run Time 14:54

Count Up
48

Episode 48 Run Time 12:35

Conditional Visibility and Vue Transitions

Learn Vue 2: Step By Step

Practical Component Exercise #3: Tabs

Basic Data Binding

Setup Vue Devtools

Lists

Vue Event Listeners

Attribute and Class Binding

The Need for Computed Properties

Components 101

Components Within Components

Practical Component Exercise #1: Message

Practical Component Exercise #2: Modal

Practical Component Exercise #3: Tabs

Component Communication Example #1: Custom Events

Component Communication Example #2: Event Dispatcher

Named Slots in a Nutshell

Single-Use Components and Inline Templates

Webpack and vue-cli

Hot Module Replacement

Vue Ajax Requests With Axios

Object-Oriented Forms: Part 1

Object-Oriented Forms: Part 2

Object-Oriented Forms: Part 3

Webpack Config From Scratch

This is Laravel Mix

Shared State 101

Custom Input Components

Vue SPA Essentials: Routing

SPAs and the Backend

Vue Filters

Dedicated Form Components

Testing Vue: Part 1

Vue Component Responsibility

Vue Subclassing

Scoped Slots

Wrap Existing Tools into Components

Create a Testimonials Component With Me

The Difference Between Debounce and Throttle

Mega Menus and One-to-One Relationships

Vue Portal Use Case #2

Workshop - Contact Support Modal

Reusability

Reusability: Part 2

Fixed to the Top

Fixed to the Top: Part 2

Tooltips Three Ways

Render Functions: Part 1

Extract and Generalize: Infinite Scrolling Refactor

Count Up

Conditional Visibility and Vue Transitions

Want us to email you occasionally with Laracasts news?