Back Button JavaScript

Learning Vue 1.0: Step By Step

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.

Beginner
Difficulty
22 episodes
3:14:36 hrs
Start Series
This series has been archived. We instead recommend: Learn Vue 2: Step By Step A series is marked as archived when the content is no longer up-to-date or relevant to most viewers.

Learning Vue 1.0: Step By Step

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.

  • 01

    Episode 1 Run Time 5:02

    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

    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

    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

    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

    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

    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

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

  • 08

    Episode 8 Run Time 5:34

    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

    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

    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

    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

    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

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

  • 14

    Episode 14 Run Time 7:26

    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

    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

    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

    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

    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

    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

    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

    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

    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!

You May Also Enjoy...

Here are some additional series that may be up your alley.

8 Lessons
1:17:24 hrs

Testing Vue

10 Lessons
2:10:04 hrs
10 Lessons
2:10:04 hrs