In real life, we're often working with arrays, rather than strings. In this episode, you'll learn how to use the
v-for directive to filter through a list of items and render them on the page. We'll also continue our review of reactivity, in the process.
In the previous episode, we defaulted to traditional event listeners and DOM traversal. Luckily, though, there's a simpler way with Vue. Let's review the
v-on directive for registering event listeners.
We haven't yet reviewed attribute binding in Vue. This is a key concept to understand, so make sure that you pay attention over the next few minutes. We can use the
v-bind directive to bind a property in our model to any element attribute.
Let's move on to our next practical component exercise. A traditional modal box provides some key learning points. In particular, we're going to learn how to communicate between components. What happens if one Vue instance or component needs to be notified when a particular action takes place? How might we broadcast such things?
Let's review one more practical component exercise, before moving on to new topics. Let's re-create the common tabs feature that you've seen on so many websites. This will give us a number of interesting techniques to review.
View the source for this episode on GitHub.
So far, we've only reviewed default component slots. Or, in other words, "take this bit of content, and insert it right there, as designated by the
slot tags. But what about when we require more control? A modal component is a perfect example of this. If you want to slot a header section in one place, and a footer section in another, named slots are exactly what you need.
View the source code for this example on GitHub.
inline-templateattribute to nest your template directly in your HTML file.
Let's begin focusing on structure, and how you'll build actual applications with Vue. That means we're ready to learn both Webpack and vue-cli. I will warn you ahead of time: this can be a little confusing. But just stick with me, and we'll iron out all the kinks as best as we can.
As an aside, if you use Laravel, you'll be happy to know that the framework offers some facilities to make this whole process even simpler. We'll review that soon.
$.ajaxwill do the trick. Want a native option? Consider the fetch API (just don't forget to include a polyfill for older browsers). Or, maybe a general purpose library will do the trick? In this lesson, we'll review Axios: a clean and simple HTTP request API that you can be integrated into any project within seconds.
Let's review some techniques that we might implement to DRY up our form interactions. If you've ever noticed yourself writing the same exact code, over and over, for each form, then extracting a
Form class may be exactly what you need. Let's get started with part one of this two-part series.
Now that we have our validation error handling in place, we can move on to extracting a dedicated
Form class. This class can be responsible for resetting itself, submitting the AJAX request to our server, and more. Ready to dig in?
Once you finished this lesson, it's over to you. How might you expand these two classes two simplify your form interaction even further? Get started, and then let us know what you came up with in the comments.
The completed source code for this lesson is available on GitHub.
Let's take one more episode to refactor our code and address some community questions from the previous episode. Specifically, we'll update the
Form class to return a
Promise when submitted, we'll create a few AJAX helper methods, and, lastly, we'll refactor two methods to improve clarity. Ready?
You've learned a bit about vue-loader already; however, for learning purposes, let's build up a Webpack configuration file from scratch, so that we can begin extracting and importing modules. This will give you a solid review of the fundamentals, while also providing an opportunity to review just how powerful (yet initially confusing) all this stuff can be. Don't worry: in the next episode, I'll show you some options to simplify new projects that use Webpack.
You'll surely come across instances in your own projects, where you'd like to wrap a form input within a custom component. This way, you can have a single place to attach all custom sanitization, validation, and behavior. However, in the process, you'll also find that the useful
v-model directive no longer works the way it usually does.
In this episode, we'll learn exactly what Vue's
v-model does, and then review how to make it work on any custom component. View the demo for this lesson on GitHub.
As a workflow exercise, over the next few episodes, we'll review some essential topics related to building a full SPA with Vue 2. First up, we should discuss client-side routing, and how that fits into Vue. As always, we'll start entirely from scratch, and build up our project.
View the source code for this episode on GitHub.
Statusmodel, and its associated data. Then, once we register the necessary route endpoint, we can return this data as JSON. This way, Vue and Axios can easily fetch the data they require from our server.
Errorsclasses from the Object-Oriented Forms episodes, and then update our Laravel backend code.
Scoped slots allows us to treat any given Vue component slot as a reusable template that you can pass data to. If you've ever needed to override the markup for a given slot within a parent, but don't have access to the relevant underlying data, template scoping is the solution.
In this episode, come along as I create a testimonials component for the upcoming (at the time of this writing) Laracasts UI refresh. We'll discuss the benefits of isolating all related behavior within a single file, as well as one technique for throttling the avatar mouseover event handler to an acceptable frequency.
Most front-end developers never take the time to fully learn the difference between
throttle. Instead, they substitute each option, hoping to achieve their desired end result. In this episode - though not directly related to Vue - we'll take some time to learn and review the differences between the two, as well as when you might reach for each.
Review the external demo for this lesson here.
In this lesson, come along as we construct a mega-menu from scratch. We'll learn how to create an explicit link between an anchor tag and its associated menu, while allowing both pieces to live within the same Vue component and consume the same data.
In this episode, we'll work together on the Laracasts codebase, as I create a pop-up modal for the "Contact Support" link. Why redirect to a new page and download all the necessary assets simply to fill out a form? Instead, we'll add a layer on top of the main page, and submit an Ajax request with the user's question.
Let's continue with our accordion component refactor. In this lesson, we'll create two components:
AccordionItem. This will allow us to use a data-driven approach to declaring the visibility of each item's associated body.
View the extended source code for this lesson on GitHub.
In this episode, we'll learn how to fix an HTML element to the top of the page, based upon the current scroll position. This is a common feature in countless websites. We'll tackle the implementation in two steps. First, we'll get it to work in the simplest way possible. Then, we'll refactor toward a reusable component that can be applied anywhere.
Now that we have the basic functionality from the previous episode working, let's refactor the code into something far more reusable.
So far in this series, we've used templates to declare our desired HTML structures. However, there's another way: render functions. Though you won't reach for them nearly as often, they nonetheless serve an important role. In this lesson we'll review the basics.
If you notice that a segment of logic in your component might be useful and necessary elsewhere in your project, this is likely an indication that you should extract the relevant code into its own component, generalize the specifics, and then emit events to handle side effects on a case-by-case basis.
Imagine that your UX designer gives you instructions to only display a call-to-action button if a different button is not currently visible to the user. This is fairly common: scroll the page a bit - hiding the navigation bar in the process - and suddenly a new CTA button becomes visible. How exactly might we implement such a feature, while considering reusability?