Learning Vue 1.0: Step By Step

Your first step is to learn the basics of reactivity in Vue. You'll learn about two-way data-binding, and why it's so great!

You'll often find yourself needing to toggle the display of an element, based upon some set of criteria. For example, maybe a submit button shouldn't display unless you've first typed in a message. How might we accomplish that with Vue?

Who about basic event handling? When a user clicks a button, or submits a form, or presses a key. How do we manage these common operations with Vue? Once again, it's a breeze!

It's a bit early in your learning, but let's take a few moments to review Vue components, using the previous example of a counter. What if you wanted multiple counters on the page, each with their own sets of data? How would we accomplish that?

What do we do, when the value of a property varies, based upon some set of criteria? Well, in these cases, you'll want to reach for computed properties.

Let's focus on a practical, real-life example, using a subscription plan page. How do we differentiate between upgrades and downgrades? How do we select active plans? How do we perform two-way binding with custom components? As always, with Vue, it's a cinch.

Let's learn how to filter through and render lists in this lesson.

We've glazed over custom components in a previous video, but let's dig in and figure out exactly how to construct them from scratch in this episode.

In this episode, we'll further review computed properties, as we tweak the functionality our task app in a number of ways. As always, with Vue, it only takes a matter of seconds.

It's easy to hardcode a set of data to demonstrate some piece of Vue functionality. But, what about when it's time to actually fetch that data from your server. How do we go about that? Well, I'll show you two options.

It's important to give yourself little exercises, to ensure that all of this education is embedding itself into your workflow. Let's build an alert component from scratch.

Let's begin learning what your workflow might look like, once you mix Vue with Laravel.

Let's return to some Vue fundamentals. We've yet to review filters, so let's tackle that now. As you'll find, a filter is nothing more than a function that accepts a value, and transforms it in some way.

You'll often have a need to communicate between components. Maybe a child component needs to send a message up the chain. How exactly do we handle this? Well, I'll demonstrate two options.

Often, you'll find yourself in the position of wanting a form to submit asynchronously. Or, in other words, rather than performing a full post back to the server and refreshing the page, we'd rather opt for a simple AJAX request behind the scenes. Well at this point in your learning, you already know one way to hijack a form's submission, but what if we could instead create a reusable Vue directive to simplify things? What if we could simply add v-ajax to a form tag, and have it automatically switch to using AJAX for its submission?

When building your apps, you may find yourself constantly passing state from component to component. Now, while we can use events for this purpose - and we've already reviewed that very process - it's possible that a better option is to instead extract the shared state into its own object. I'll show you how in this lesson.

If you're not building a full SPA, it can sometimes prove difficult to determine how to organize your view-specific Vue instances. If I want one component for my home page, and another one for the posts page, how exactly do I organize and render them? I'll show you the basic workflow in this lesson, and then, in the following episode, we'll review the exact structure you might for a typical Laravel application.

In the previous episode, we reviewed the basic concept of how you might create and organize view-specific components for a traditional server-side application. Now, let's see exactly what that looks like, within the context of a fresh Laravel application.

In the Laravel From Scratch series, one episode covered the process of displaying flash alert messages. Let's take that basic idea, and create an Alert component with Vue from scratch.

Mixins in Vue are very much like PHP traits. Create an object, mix it into an existing Vue instance, and, badabing-badaboom, you now have new re-usable functionality. Sweet!