Vue.js for Beginners: Up and Running with Vue
- 2 hours on-demand video
- 5 articles
- 1 coding exercise
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- Moving from jQuery to VueJS
- How to add VueJS to a simple web page.
- Create your first VueJS Application
Welcome to "Up and running with VueJS", my name is Dan Vega and I will be your instructor for this course. This course isn't meant to teach you everything you need to know about Vue instead I am taking a little bit of a different approach and creating smaller courses that focus on one specific topic. This course is meant to give you an introduction and to help you get "Up and Running with Vue". In this course we will cover:
What is Vue?
Why would you want to use it?
Moving from jQuery to Vue
Vue Core Concepts
Resources & Next Steps
I don't know about you but when I want to learn something new it helps me to have a little context for what I am learning and why I might want to learn it. In this lesson, we are going to spend just a couple of minutes covering what Vue is.
What happens when I don't want to buy into that whole process and I just want to add some interactive content to an existing application? I mentioned earlier that Vue is a progressive framework and this means that we can drop it onto a page or in an existing project without all of that complexity. As our needs grow, Vue will grow with us.
No programming tutorial would be complete without the quintessential Hello, World example. In this lesson, you will build your first application by writing a "Hello, Vue" application from scratch.
Welcome to this section Vue Core Concepts where we are going to learn about the different building blocks in vue through a series of tutorials and exercises. I just wanted to let you know that all of the source code for the examples is here on my Github and it is broken down by lesson with starting code and a finished solution.
In the previous lesson, you learned how to write your first Hello World application in Vue. In this lesson, I want to build on that and talk about a core concept in Vue called Data Binding. You saw an example of this in the hello world application but we didn't get a chance to talk about it.
One of the first things you might want to do is display a list of things on a page. In Vue, we can do this pretty easily thanks to something called the v-for directive. Now that you know what directives are this should make more sense but let's head over to the documentation and take a look at what v-for can do for us.
In this tutorial, you will be creating a counter application. We already saw an example of methods earlier but in this example, you are going to learn how to create your own. With methods in place, you will be ready to learn another core concept in Vue, event handling. In fact, the ability to respond to user interaction is a fundamental component of any web application.
In this lesson, you are going to create an application that displays the current time. While that alone isn't exciting it gets pretty fun when you have to update the current time every second. We are also going to look at another concept in Vue which is lifecycle hooks.
Each Vue instance goes through a series of initialization steps when it’s created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it also runs functions called lifecycle hooks, giving users the opportunity to add their own code at specific stages.
In this final challenge, you are going to take what you have learned in this course and build a small application. In a previous lesson, we built a friends application that looped over a list of friends using the `v-for` directive. We are going to do something similar here but add some functionality to it.
- Visual Studio Code (free)
Vue is a progressive framework and that might sound like a bunch of marketing jargon to you but I promise you it isn't. This means that you can get started using Vue quickly and easily and as your needs grow the framework will grow with you.
You will learn how to build Vue applications through a series of tutorials, exercises and quizzes meant to reinforce the concepts you learn in this course. You will have access to all of the starting code so that you don't have to spend time writing boilerplate and can focus in on the task at hand. You will also have access to all of the solutions in case you get stuck.
This course is meant to help beginners get up and running with Vue JS. What are you waiting for? Enroll in this course today and learn something new.
- Beginners who want to learn what Vue is
- Developers who want to write their first Vue application