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 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.Introduction2 lessons, 03:20
2.Setup2 lessons, 17:58
3.Key Concepts4 lessons, 19:14
4.Template Syntax5 lessons, 19:11
5.Computed, Watchable, and Filtered Data2 lessons, 12:11
6.Modular and Flux Architecture3 lessons, 28:00
7.Single-Page Apps3 lessons, 17:21
8.To-Do App7 lessons, 38:00
9.Conclusion1 lesson, 01:23
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.