Back Button Vue

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.

22 episodes
3:14:36 hrs
Start Series
Notification bell 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.
    1. Run Time 5:02 Free

      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!

    2. Run Time 4:20 Free

      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?

    3. Run Time 6:17 Free

      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!

    4. Run Time 11:12 Free

      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").

    5. Run Time 6:14 Free

      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.

    6. Run Time 16:17 Free

      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.

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

    8. Run Time 5:34 Free

      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.

    9. Run Time 7:26 Free

      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. Run Time 12:27 Free

      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. Run Time 6:22 Free

      If your only need for jQuery is to perform AJAX requests, then, instead, you should use Vue's resource plugin.

    12. Run Time 8:27 Free

      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. Let's begin learning what your workflow might look like, once you mix Vue with Laravel.

    14. Run Time 7:26 Free

      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. Run Time 8:22 Free

      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. 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. 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. 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. 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. 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. Run Time 13:36 Free

      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. Run Time 6:42 Free

      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.

Laravel Charting and You

At some point, you'll be called upon to prepare a series of graphs, or charts for your business. It's scary at first; where do you even begin? But, lu...

1:17:24 hrs
Vue Learn Vue 2: Step By Step

Vue is easily one of the most exciting additions to the front-end world in many years. With its intuitive API, and the fact that it can be applied to...

7:43:06 hrs
Testing Testing Vue

How in the world are we supposed to unit test Vue components? Is it even possible? Why, yes. Yes it is! I'll show you the full process, step by step....

2:10:04 hrs