Learn VueJS in Short Bites - #2 Advanced Components
4.7 (3 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
28 students enrolled

Learn VueJS in Short Bites - #2 Advanced Components

Working with components, styles, props, events and slots
4.7 (3 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
28 students enrolled
Created by Peter Kassenaar
Last updated 9/2019
English
English [Auto-generated]
Current price: $15.99 Original price: $24.99 Discount: 36% off
17 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 2.5 hours on-demand video
  • 3 articles
  • 3 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • This is #2 in a series of courses on Vue-js - every video is under 6 minutes, so you are up and running quickly!
  • You know about the basics of creating applications, now you'll learn more about components
  • This second course will teach you how to use computed properties, v-if, binding to images and using mixins
  • You'll also learn about lifecycle hooks, v-model, filters, dynamic- and conditional classes and more
Course content
Expand all 42 lectures 02:41:17
+ Introduction
16 lectures 01:02:12

Overview of the contents of this section.

Preview 01:26

You'll learn what computed properties are and how (and when!) to use them.

Preview 06:16

V-if is an important directive for showing content in the UI, based on some condition. You'll learn where v-if can be applied and how this directive works.

Using v-if
03:51

Vue can't show dynamic images directly in the User Interface. It needs some help from the WebPack bundler. In this lecture you'll learn how to add this functionality so you can display images based on some condition.

Binding to images
04:11

A mixin is a shared piece of code through your application. You'll learn how to create mixins and how to import them in components that use them.

Using mixins
04:24

Every component in Vue goes through some fixed steps in its lifecycle. You can hook into those moments and run code at specific, prefixed points in time. This can be very handy, as you will see in this lecture.

Lifecycle hooks
04:36

Often, you'll want your application to react to selections that are made by the user, or read text that the users enters in a form field. V-model is the directive that makes this possible. It has a lot of options. In the first video of this series you'll learn its basics.

v-model basics - using textboxes
05:42

This video will teach you how to use v-model to read what choice a user made in a dropdown menu (<select> list).

v-model on selection lists
05:15

In this video you'll learn how to use v-model with a set of checkboxes. The user can select zero, one or more options from the checkboxes. It is very ease to find out what choice a user has made.

v-model on checkboxes
03:42

If you know how to use v-model on checkboxes, it is a small step to apply that same logic on a set of radio buttons.

v-model on radio buttons
02:29

You can format data in the UI using a technique called filters. But Vue doesn't come pre-shipped with some filters. You have to program them all yourself. This lecture will teach you how to do that.

Basic filters - global vs. local filters
05:34

To expand the functionality of filters, you can add parameters to them. This lecture shows exactly how this works and how you pass parameters from the UI to the filter function.

Parametrizing filters
05:12

As an example of a real life filter, you'll learn how to filter a list of data. Only the data that complies with the rules of the filter are shown in the UI. The filter works completely automatic. You don't have to click a button or hit Enter. It works on the fly.

Filtering a list of data
05:08

A brief overview of what we have learned in this section.

Summary
01:23

Download the code examples used in this section.

Code examples
00:12
+ Styling components
10 lectures 35:56

Overview of the contents of this section.

Preview 01:44

Traditionally in web applications all styles were global. In Vue you can choose how and where a style is available. This lecture introduces you to the usage of global styles.


code example with this lecture: 01-new-vue-project.zip (see end of this section for downloads).

Preview 05:25

Often you don't want styles to be available globally. In order to avoid naming collisions you can mark your styles as scoped. This lecture teaches you how te do that.


code example with this lecture: 02-scoped-styling.zip (see end of this section for downloads).

Scoped styles in detail
05:21

Scoped styles can have impact on child components. This video shows you its caveats and how you can take caution.

The 'scope' of scoped styles
03:00

This short video shows some recommendations on using global styles and scoped styles.

Style recommendations
01:16

Classes can be added or removed from an element dynamically. This lecture teaches you how to do so.


code example with this lecture: 03-dynamic-classes.zip (see end of this section for downloads).

Dynamic classes
05:47

Often you set some condition in your application (or let the user do so) and update the UI based on their choices. With Vue you can add or remove CSS-classes, based on some condition.


code example with this lecture: 04-conditional-classes.zip (see end of this section for downloads).

Conditional classes
06:05

Inline styles often are a quick and easy way to update some of the styling of an element (if you need to update more styles, you'll use classes). This video teaches you how to add or remove inline styles based on some condition.

code example with this lecture: 05-conditional-styles.zip (see end of this section for downloads).

Inline styles
05:48

A brief overview of what we have learned in this section.

Summary
01:17

Download the code examples used in this section.

Code examples
00:13
+ Intercomponent communication
15 lectures 01:02:02

Overview of the contents of this section.

Preview 01:21

A brief recap of how to add more components to your application, or how to split up existing (bigger) components into multiple smaller ones.

Preview 05:06

You'll learn how to add props to a component. In this first step we use props in a simple way: just an array of props. Later you'll learn more advanced props for your components.

Using Props - step 1
03:50

You can set different properties (duh..) for your props. For instance, you can set their type, if they are required or not, and provide a default value for a prop. This video teaches you how.

Using Props - step 2
04:03

Just as HTML-elements can have multiple attributes, components can have multiple props. In this lecture you'll learn how to add and use them.


code example with this lecture: 01-props-basics.zip (see end of this section for downloads).

Multiple props
03:11

Some special rules on the (camel)casing of prop names.

Casing of props
03:13

Props can be validated. The browser shows a console warning if the validation requirements are not met. In this lecture you'll learn how to make advantage of this.

Validating props
05:39

If the default validation options are not enough, you can write your own validation function for a prop. In this lecture you'll learn how to do so.


code example with this lecture: 02-props-validation.zip (see end of this section for downloads).

The props validation function
04:44

Sometimes, in a parent component you want to react to events happening in the child component. This lecture shows how you can create custom events for that.

Using events - step 1
05:40

If a child component sends an event, you want your parent component react to it by firing a local event handler. In this video you see how to do exactly that.


code example with this lecture: 03-using-events.zip (see end of this section for downloads).

Using events - step 2
05:33

Sometimes you want to reuse a complete component inside another component. You do that by adding slots to a component. In this lecture you see how this works.

Using slots - basics
05:42

If one slot on a component is not enough, you can have multiple slots. Each slot then gets his own name. You target that specific name in the parent component. In this video you learn how to use multiple, named slots.


code example with this lecture: 04-slots.zip (see end of this section for downloads).

Using named slots
05:09

This lecture gives you an idea how you can combine all techniques that you have learned in this section. You create a custom button component that can receive configuration properties, can send events back and can be customized with custom images and text.


code example with this lecture: 05-combination-component.zip (see end of this section for downloads).

A combination of all you have learned
07:05

A brief overview of what we have learned in this section and a look ahead to the next course.

Summary
01:33

Download the code examples used in this section.

Code examples
00:13
+ Conclusion
1 lecture 01:06

A small summary of the course and  a preview to the next course

Preview 01:06
Requirements
  • You'll need to know the basics of Vue applications; how the are composed, what the architecture is and how components work
  • Explore the first course in this series (free!) if you don't have this knowledge yet
  • You have to be proficient with JavaScript, editors, browsers and HTML and CSS
Description

Learn Vue.js in Short Bites - #2 Advanced Components

You already know the basics on VueJS development (hey, maybe you've even followed the first course in this series, which is completely FREE) and you are ready for the next step.

Welcome to course number #2 in this series, on VueJS Advanced Components!

This course covers the following topics:

  • Computed Properties

  • Using directives like v-if, and v-model (on all kinds of form fields)

  • Lifecycle hooks

  • Creating and using filters

  • Global styles and Scoped styles

  • Binding CSS-classes dynamically and conditionally

  • Binding to inline styles

  • Intercomponent communication with props and events

  • Using props, prop validation

  • Creating and listening to custom events

  • Using slots: named slots and the v-slot directive

Do you know all about Vue JS after following this training? No, of course not. We guarantee however that you can work with VueJS applications of substantial size, or understand what colleagues have created if you enroll in their team, or gets handed over a piece of code.

On the series 'in Short Bites'

The previous title of this series used to be "Learn Vue.js in under 6 minutes". Well, this might be overpromising. You're not actually going to learn the complete Vue.js framework in under 6 minutes. 

But every video in this course is short and consise and under 6 minutes. We know your time is valuable. So we won't bother you with long theoretical stories. Instead we teach you exactly what you need to know to. This course focuses solely on the more advanced topics that you encouter when you start working with a VueJS application of some size. It talks about creating multiple components, having components communicate with each other and how to dynamically bind to CSS classes or inline styles.

Before starting this course we expect that you have some basic knowledge of creating VueJS applications (follow the first installment of this series for free!) and that you have some knowledge of HTML, CSS and JavaScript. You don't have to be a web guru (at least, *we* are not) but you probably won't get the most out of this course being a web development virgin.

The series

This course is the second in a series of courses. Again, probably you don't want to spent too much time or money on topics you don't need, or that you already know.

So each of the courses in this series is short, concise and can be purchased separately for a friendly price.

However, we hope of course that you like it and that you are curious for the other courses in this series. Currently we have these installments available:

  • #1 - Vue JS Essentials - FREE

  • #2 - Advanced components - this course

  • #3 - Vue-router, Vuex and deployment - In development, available fall 2019

  • #4 - Vue additions (Nuxt, Vuetify, Vue Bootstrap and more) - available spring 2020

Who this course is for:
  • Students who know about the basics of Vue, but want to take their skills to the next level
  • Everybody that wants to learn more about working with the VueJS framework