Laracasts - Learning Vue 1.0: Step By Step (2016)

Mark my words: Vue.js will sky-rocket in popularity in 2016. It's that good. Want to get ahead of the pack? Let me show you the building blocks of Vue.

EPISODE 1 ● RUN TIME 5:02
Hello Databinding

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!
02
EPISODE 2 ● RUN TIME 4:20
Vue Show

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?
03
EPISODE 3 ● RUN TIME 6:17
Event Handling

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!
04
EPISODE 4 ● RUN TIME 11:12
A Peek into Components

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?

View the completed example for this introductory lesson on JSBin (don't forget to press "Run With JS").
05
EPISODE 5 ● RUN TIME 6:14
Computed Properties

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.
06
EPISODE 6 ● RUN TIME 16:17
Subscription Plans Exercise

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.

View the source for this lesson on JsFiddle.
07
EPISODE 7 ● RUN TIME 7:09
Rendering and Working With Lists

Let's learn how to filter through and render lists in this lesson.
08
EPISODE 8 ● RUN TIME 5:34
Custom Components 101

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.
09
EPISODE 9 ● RUN TIME 7:26
Vue Makes it so Easy

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.
10
EPISODE 10 ● RUN TIME 12:27
Vue, Laravel, and AJAX

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.
11
EPISODE 11 ● RUN TIME 6:22
Vue Resource

If your only need for jQuery is to perform AJAX requests, then, instead, you should use Vue's resource plugin.
12
EPISODE 12 ● RUN TIME 8:27
Component Exercise #1

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.
13
EPISODE 13 ● RUN TIME 11:18
Vue and Laravel Workflow

Let's begin learning what your workflow might look like, once you mix Vue with Laravel.
14
EPISODE 14 ● RUN TIME 7:26
Vue Filter Essentials

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.
15
EPISODE 15 ● RUN TIME 8:22
Managing Custom Events

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.
16
EPISODE 16 ● RUN TIME 21:29
Custom Directives and Asynchronous Forms

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?

View the source for this lesson on GitHub.
17
EPISODE 17 ● RUN TIME 8:14
Vue Transitions and Animations

We haven't yet reviewed Vue's transition system. As you'll find, it takes a very simple approach. Apply a custom attribute, write a bit of CSS, and you're all set to go. Or, you could take it one step further, and integrate Animate.css with Vue. I'll show you how.
18
EPISODE 18 ● RUN TIME 6:19
Managing Duplicate State

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.
19
EPISODE 19 ● RUN TIME 6:34
Swapping View-Specific Components

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.
20
EPISODE 20 ● RUN TIME 7:50
Workflow for Swapping Components

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.

View the source code for this lesson on GitHub.
21
EPISODE 21 ● RUN TIME 13:36
Alert Component From Scratch

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.

View the source code for this lesson on GitHub.
22
EPISODE 22 ● RUN TIME 6:42
Vue Mixins
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!