ویو جی اس

آموزش قدم به قدم Vue 2

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 any type of application, it's no wonder why folks have gravitated to it as much as they have.

If you'd like to jump on board, let me show you, step by step, exactly what you need to know. It's the best way to learn Vue!

سطح متوسط 49 جلسه آموزشی 07:43:00 ساعت
قسمت 1

Basic Data Binding

Let's begin with a review of basic data binding in Vue. You'll get your first glimpse into the framework's wonderful, and automatic, reactivity.

قسمت 2

Setup Vue Devtools

Let's install Vue Devtools sooner, rather than later. As you'll see, this gives us a portal into any Vue instance on the page. Especially in these early stages, you'll get a lot of use out of this Chrome extension.

قسمت 3


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 proce...

قسمت 4

Vue Event Listeners

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.

قسمت 5

Attribute and Class Binding

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.

قسمت 6

The Need for Computed Properties

Often, you'll find that a piece of data needs a bit of calculation, before it's rendered onto the page. In such instances, Vue's computed properties are exactly what you require.

قسمت 7

Components 101

Let's begin reviewing Vue components. You'll make heavy use of these, as you begin to harness all that Vue has to offer, so pay special attention to the next several episodes.

قسمت 8

Components Within Components

Not only can we create single components, but, of course, any component may further consist of child components. In this episode, let's review a basic example of that very thing.

قسمت 9

Practical Component Exercise #1: Message

Let's begin reviewing the process of creating an assortment of practical components for your own projects. We'll start with a simple one: convert Bulma's "message" component into a full-fledged Vue component with behavior.

قسمت 10

Practical Component Exercise #2: Modal

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 no...

قسمت 11

Practical Component Exercise #3: Tabs

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 t...

قسمت 12

Component Communication Example #1: Custom Events

Let's begin reviewing the options you have, when it comes to communication between Vue components. Or, in other words, how can one component notify another about a particular action or event that just took place?

قسمت 13

Component Communication Example #2: Event Dispatcher

The next choice you have, to allow for communication between Vue components, is creating your own event dispatcher. Don't worry: this is much easier than it sounds, due to the fact that every Vue instance already implements the necessary interface!

قسمت 14

Named Slots in a Nutshell

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

قسمت 15

Single-Use Components and Inline Templates

Not every component needs to be generic and reusable. Sometimes, a single, view-specific component is exactly what the doctor ordered. In this episode, we'll review the basic concept, and then discuss when you might reach for the inline-template attr...

قسمت 16

Webpack and vue-cli

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

قسمت 17

Hot Module Replacement

Hot module replacement is incredibly cool. Yes, it will automatically refresh the page each time you change a component; however, what's particularly neat is that the state for all components will remain unchanged. Think of it like "Live Reload" for...

قسمت 18

Vue Ajax Requests With Axios

Vue doesn't provide any specific AJAX functionality out of the box. Instead, you have the entire spectrum of the JavaScript community to pull from. Maybe you're already using jQuery? If so, $.ajax will do the trick. Want a native option? Consider the...

قسمت 19

Object-Oriented Forms: Part 1

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 star...

قسمت 20

Object-Oriented Forms: Part 2

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 finish...

قسمت 21

Object-Oriented Forms: Part 3

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

قسمت 22

Webpack Config From Scratch

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, whi...

قسمت 23

This is Laravel Mix

One issue, with any build tool, is that for each new project, you have to reproduce the entire setup again and again. Wouldn't it be useful if we could optimize for the 80% of folks who simply want general ES2015 + module compilation, some CSS prepro...

قسمت 24

Shared State 101

Let's begin reviewing shared state. You'll absolutely run into this before too long. If you have multiple Vue instances or components that need access to the same data - and they also need to be in sync with one another - how exactly do we allow for...

قسمت 25

Custom Input Components

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

قسمت 26

Vue SPA Essentials: Routing

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 scratc...

قسمت 27

SPAs and the Backend

A single-page application still needs to fetch its data from somewhere. In this episode, we'll work with Laravel a bit to build up a Status model, and its associated data. Then, once we register the necessary route endpoint, we can return this data a...

قسمت 28

Vue Filters

In the previous episode, we referenced a simple function to render a relative date for each stream. However, Vue filters are more appropriate for basic string manipulation operations like this.

قسمت 29

Dedicated Form Components

Let's continue with our Stream demo app, and review the process of adding new statuses to the stream. To allow for this, we'll create a dedicated form component, pull in the Form and Errors classes from the Object-Oriented Forms episodes, and then up...

قسمت 30

Testing Vue: Part 1

In this episode, we'll setup the excellent Ava test framework, and begin testing a basic Vue component from scratch. As you'll find, there are a few small gotchas that you'll want to be aware of. You may view the source for this episode on GitHub.

قسمت 31

Vue Component Responsibility

Let's take a few moments to discuss structure and responsibility, as it relates to your Vue components. Specifically, we'll review a hidden child component that is begging to be extracted.

قسمت 32

Vue Subclassing

From time to time, you may find that components of a certain type require special functionality. Rather than copying and pasting this logic from file to file, what else might be a possibility? Well, though we could create a mixin for this purpose, le...

قسمت 33

Scoped Slots

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, templ...

قسمت 34

Wrap Existing Tools into Components

In this episode, we'll wrap the popular Flickity carousel library into a dedicated Vue component. As you'll find, doing so will allow us to expose a simple interface, while isolating all awareness of Flickity to a single file. View the source code...

قسمت 35

Create a Testimonials Component With Me

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 thro...

قسمت 36

The Difference Between Debounce and Throttle

Most front-end developers never take the time to fully learn the difference between debounce and throttle. Instead, they substitute each option, hoping to achieve their desired end result. In this episode - though not directly related to Vue - we'll...

قسمت 37

Mega Menus and One-to-One Relationships

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.

قسمت 38

Vue Portal Use Case #2

Let's review one more example for when you might reach for a portal. If you need a way to move a link within a Vue component file to a different part of the page, Vue portals to the rescue!

قسمت 39

Workshop - Contact Support Modal

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 o...

قسمت 40


In the Modern CSS for Backend Developers, one of the lessons focused on constructing both the CSS and JavaScript for an accordion-like component. In this episode, we'll review the Vue-specific code we wrote in that lesson, and review how we can make...

قسمت 41

Reusability: Part 2

Let's continue with our accordion component refactor. In this lesson, we'll create two components: Accordion and AccordionItem. This will allow us to use a data-driven approach to declaring the visibility of each item's associated body. View the ext...

قسمت 42

Fixed to the Top

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 s...

قسمت 43

Fixed to the Top: Part 2

Now that we have the basic functionality from the previous episode working, let's refactor the code into something far more reusable. Note: JavaScript is necessary to allow for this functionality across all browsers. However, if you have the means,...

قسمت 44

Tooltips Three Ways

In this episode, we'll construct a standard tooltip using three techniques: data attributes, Vue directives, and dedicated Vue components. View the source code for this episode on GitHub.

قسمت 45

Render Functions: Part 1

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

قسمت 46

Extract and Generalize: Infinite Scrolling Refactor

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 ev...

قسمت 47

Count Up

Let's review another real-life example. We need to construct a Vue component that counts from 0 to a given number very quickly. However, this counting should not begin until the element is within the user's viewport. View the source code for this...

قسمت 48

Conditional Visibility and Vue Transitions

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 su...

قسمت 49

Two-Way Databinding Review

If you ever find yourself desperately trying to juggle state between parent and child components, ask yourself if there should instead be a single source of truth. In this lesson, we'll review Vue's two-way "sync" data-binding convention using a real...

دوره در حال اجرا

این دوره هنوز به پایان نرسیده است و در آینده درس های دیگری به آن افزوده خواهد شد.