Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:29Length:2.6 hours

Next lesson playing in 5 seconds


Free Preview: Get Started With Vue


  • Overview
  • Transcript

Vue.js is a front-end JavaScript framework that is easy to learn if you already know HTML and CSS. The versatility of Vue is great for small and large-scale web apps alike. On top of all this, it's blazing fast!

In this course, you'll learn the basics of the Vue framework. You'll learn about core concepts like components, modularity, flux, and routing. After you've covered the basics, you'll take a deep dive into a fully fledged Vue app—a to-do app project that includes all the things you've learnt.

Learn JavaScript: The Complete Guide

We've built a complete guide to help you learn JavaScript, whether you're just getting started as a web developer or you want to explore more advanced topics.

Learn Vue.js

Learn Vue.js with our complete Vue.js tutorial guide, whether you're a seasoned coder or a web designer looking to pick up new front-end development techniques.

1. Introduction

1.1 Introduction

Vue.js is a progressive JavaScript Framework. It's approachable if you already know HTML, CSS, and JavaScript with an easy to learn syntax. The versatility of Vue.js is great for small, and very large scale applications. On top of all of this is a blazing fast framework that increases your development productivity. Hi, I'm Lawrence Turton and in this course I'll be showing you the extensiveness of the Vue.js framework. I'll be walking you through the basics and advanced project setups. You'll be learning about views, two way and one way data binding, directives, single file components, flux architecture, single page applications, roots, and more. We'll also be building a real world notes application with lists, tags, to do's, and notes for each to do, including the Flux architecture and all of the other additions that you can add to the Vue.js framework. So I hope to show you over the next few minutes how to very quickly get set up with Vue.js and discover the power and the features that this framework provides you.

1.2 What We'll Be Building

So this is the Vue.js to do application that we'll be creating towards the end of the course. And even though it may look simplistic, it involves the Flux architecture and single page application routing. So what we first of all have is the lists of to dos. You can add in a new list if you wish, and you can also rename this list, if you wish. You can also go ahead and tag lists with a certain color and filter them up here. Then on top of that, when you have a list, it will display that list on the right-hand side. And what you'll be able to do is you'll be able to see the title right here. And if you rename, you'll see that everything stays together. And also what we can do is add in new to dos on the list. We can show and hide to dos that have been completed. And then also, what you can do is delete to dos as well. Now here's where the single page application part comes in when we add notes to a to do. What I've decided to do is, when you click on Notes, it will take you over to this particular URL. And this URL contains parameters such as the list ID, so we're on list 0 and we're on item 1. And what we do here is, we can simply add in a new note. And you'll be able to see, we can still see the to do item text. We can also have programmatic navigation through Vue.js by simply programming this Back button. Then also what you can do is use the browser's Back and Forward buttons to iterate over the history of this single page application. And this is already done by Vue.js's routing system. So hopefully, you can see that this to do application is quite complex. It's not as simple as what one would first perceive. And this will help you to understand large scale applications.