1. Introducing the course

Welcome to Build Your First Vue.js App. This is a hands-on course for web developers who've never used Vue.js before, or want to brush up on the fundamentals.

My name is Anthony Gore and I'll be your instructor on this course. Let me tell you a little bit about it!

In this course we're going to cover many of the fundamental features of Vue, including stuff like:

  • Installing Vue
  • Adding Vue to a web page
  • Creating Vue data and methods
  • Template syntax

And so on.

We'll also build a simple app called Vue.js Poster Shop, which will allow you to practice all the theory you've learned in a real-world app.

Let's take a look at the finished product so you can get a sense of what you're going to be able to do with Vue by the end of the course.

Demo of the finished product

This is Vue.js Poster Shop. It allows you to search for a kind of poster you might want to buy. For example, here's a search for "cat", because who doesn't want a poster of a cat, right?

If you're more of a dog person, though, you can use the search bar at the top and search for that.

Cart

When you see a poster you want to purchase, you can add it to the cart like that.

From the cart, you can increase the quantity of an item if you want more than one. You can also decrease the quantity, and if you decrease it to 0, it's going to be removed from the cart entirely.

So you can see we have complete shopping cart functionality here, and you'll be surprised at how easy it is to do all this with Vue.

Scroll loading

There are also a variety of other subtle features of the app that give it a really nice user experience.

One I'll show you now is the scroll loading feature.

So you can see from the message at the top of the page that a search for "cat" has returned 11 results.

As I start to scroll down the page to view the results, notice the scroll bar over here on the right of the page.

You'll see that it suddenly jumps up as I scroll toward the bottom of the results.

The reason is that not all 11 of the results are added to the page at once; in fact, only 4 are added at a time, and more get added as we keep scrolling.

This feature that makes the page load faster and run smoother.

You'll be able to advanced Vue.js features like this by the end of the course as well.

Complete and Continue  
Discussion

0 comments