Gain insights into advanced VueJS features like lifecycle hooks, event handling, and custom plugins while building complex applications with Vuex. Delve into internationalization and reusable code libraries.

Advanced VueJS concepts- Build apps more efficiently.png

vue3_w_deps_and_apis.tar.gz

Vue3 + APIs

VueJS is a modern JavaScript frontend framework. Many popular websites use it for simplicity and performance every day. Vue offers a wide range of features to customize behavior, extend it, and use it for a variety of projects.

In this course, you will learn about some of the advanced features of Vue by learning all about Vue’s lifecycle hooks, reusing code, handling events, and creating custom form controls. You’ll then cover advanced templating concepts before learning about internationalization and gaining a deeper understanding of Vue. Then, you’ll learn how to create complex applications with Vuex and your own plugins, along with state handling communication with APIs. At the end, a selection of libraries and plugins is built as a more frequently reusable code for Vue.

This course requires a basic understanding of Vue to take full advantage of its contents. The practical examples discussed in this course will give you an edge in developing cleaner reusable code efficiently.

Advanced VueJS: Build Better Applications Efficiently

Which event does `v-model` use when it emulates two-way binding?

Which event does <code>v-model</code> use when it emulates two-way binding?

The component should have a `value` prop.

**(Select all that apply.)** Which of the following is necessary to make a component compatible with `v-model`?

(Select all that apply.) Which of the following is necessary to make a component compatible with <code>v-model</code>?

**(True or False)** The code that Vue generates for `v-model` is exactly the same as the code Vue generates for `@input`+`:value`.

(True or False) The code that Vue generates for <code>v-model</code> is exactly the same as the code Vue generates for <code>@input</code>+<code>:value</code>.

**(True or False)** Custom form validation can significantly increase UX.

(True or False) Custom form validation can significantly increase UX.

As soon as Vue encounters the prop in the template.

Every property is always reactive. A change always triggers a re-render, whether we use the property in the template or not.

When we set it to `reactive: true` in the prop definition.

Thinking about Vue’s reactivity, at which point does Vue consider a property reactive?

Thinking about Vue’s reactivity, at which point does Vue consider a property reactive?

A button that makes sparkles and confetti appear on the screen. Sparkles and confetti distract the user, hence it is called an anti-pattern.

A “Submit” button that triggers all business logic at once. It’s especially bad for UX if the form is enormous.

A button that allows the user to walk through the process in tiny steps.


What is the magic pushbutton anti-pattern in UX?

What is the magic pushbutton anti-pattern in UX?

Quiz: Form controls

Quiz: Form controls

Test your knowledge on form controls, v-model and custom form validation.

Introduction and Course Goals

Lifecycle Hooks

Reusable Code

Event Handling

Form Controls

Templating

Internationalization

Understanding Vue on a Deeper Level

Vuex

Appendix - Libraries and Plugins

Wrap-Up and Farewell

Quiz: Form Controls