Learn VueJS in Short Bites - #2 Advanced Components
- 2.5 hours on-demand video
- 3 articles
- 3 downloadable resources
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- 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
You'll learn what computed properties are and how (and when!) to use them.
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.
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).
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).
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).
A brief recap of how to add more components to your application, or how to split up existing (bigger) components into multiple smaller ones.
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).
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).
- 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
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:
Using directives like v-if, and v-model (on all kinds of form fields)
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.
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
- 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