Vue Js Tutorial Free

Posted on  by admin

Before I get to the article, I just want to share that I’m building a product, and I would love to collect some data about how to better serve web developers. I created a short questionnaire to check out before or after reading this article. Please check it out — thanks!

And now, back to our regular scheduled programming. You might not know what Vue is — and that’s OK — and heck, you might not, definitely not, know who I am! I’m Zaydek, and I’m an experienced graphic designer and programmer. I just released a free course to help developers learn some Vue!

Composing with Components

I’m here to enlighten you about all the possibilities that learning and using this amazing open-source framework present. In this article, I detail how to think about Vue. I also iterate the building-blocks needed to start programming static and dynamic websites with an order of magnitude more ease than with vanilla JavaScript.

Getting Started

Vue is both a paradigm for writing web apps and an idiomatic guide to learning and programming JavaScript. The course is taught on, which is a new and interactive website for learning and sharing how to code.

Screencasts can be interrupted and edited, making learning active and fun to experiment with. A framework can be thought of as a general-use toolbox, equipped with tools that solve different problems but all together help with some task.

Ready for More?

That task, where Vue is concerned, is building maintainable and idiomatic web apps with ease — really — and having fun while we’re at it! Let’s put things into perspective. Vue can be as simple as a script tag that we can include in our websites to turn them into web apps.

Handling User Input

But it can also be an entire ecosystem that relies on a build-process to make engineering complex and powerful web apps easier. In this article and in the course, I focus on learning the core concepts Vue presents, and assume no knowledge of the command-line or what a build-process is.

Declarative Rendering

The course is three parts:. learning the minimum JavaScript needed to get started with Vue. learning the core concepts of Vue, and.

Conditionals and Loops

an overview of two more advanced examples (two cute and fun web apps I made: Schrödinger’s Div ? What I love about Vue is that it proposes some interesting ideas for how to think about and how to build web apps.

What is Vue.js?

There are a few ideas that I think are most interesting — though this is not suggestive of all that Vue can do:.

Vue is not one thing

separating the data from the DOM. idiomatic JavaScript. templating and component-based HTML. managing event-handling. But before we can get into that, let’s first cover how to connect Vue via a simple script tag to a website:.

Relation to Custom Elements

You can think of a web app as being inside or on top of a website. So a web app begins it’s life at the

, where from inside the script tag it is plugged in via new Vue({ el: "#app" }).

Hello Internet!

That is how we create a relationship from the JavaScript to the HTML (where el is short for element).

What the course covers

VueJS Useful Resources. Selected Reading. VueJS is a progressive JavaScript framework used to develop interactive web interfaces. Focus is more on the view part, which is the front end.

11. Vuex for Everyone – by Vue School

It is very easy to integrate with other projects and libraries. The installation of VueJS is fairly simple, and beginners can easily understand and start building their own user interfaces.

12. Vue.js Fundamentals – by DevMarketer

The content is divided into various chapters that contain related topics with simple and useful examples. This tutorial is designed for software programmers who want to learn the basics of VueJS and its programming concepts in a simple and easy manner. This tutorial will give the readers enough understanding on the various functionalities of VueJS from where they can take themselves to the next level.

13. Vue.js 2 – Getting Started – by Academind

Before proceeding with this tutorial, readers should have a basic understanding of HTML, CSS, and JavaScript. You’re browsing the documentation for v2.x and earlier.

14. Vue.js 2 & Vuex (Basics) – by Academind

For v3.x, click here. Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable.

15. Develop Basic Web Apps with Vue.js – by Greg Thoman

The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects.

Vue.js Example Open Source Projects

On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries. If you’d like to learn more about Vue before diving in, we created a video walking through the core principles and a sample project.

Official Vue.js Example Projects

If you are an experienced frontend developer and want to know how Vue compares to other libraries/frameworks, check out the Comparison with Other Frameworks. The official guide assumes intermediate level knowledge of HTML, CSS, and JavaScript.

If you are totally new to frontend development, it might not be the best idea to jump right into a framework as your first step - grasp the basics then come back!


Prior experience with other frameworks helps, but is not required. The easiest way to try out Vue.js is using the Hello World example. Feel free to open it in another tab and follow along as we go through some basic examples. Or, you can create an index.html file and include Vue with:.


The Installation page provides more options of installing Vue. Note: We do not recommend that beginners start with vue-cli, especially if you are not yet familiar with Node.js-based build tools.

More Vue.js Resources

If you prefer something more interactive, you can also check out this tutorial series on Scrimba, which gives you a mix of screencast and code playground that you can pause and play around with anytime.

  • At the core of Vue.js is a system that enables us to declaratively render data to the DOM using straightforward template syntax:.
  • We have already created our very first Vue app! This looks pretty similar to rendering a string template, but Vue has done a lot of work under the hood.
  • The data and the DOM are now linked, and everything is now reactive.
  • How do we know? Open your browser’s JavaScript console (right now, on this page) and set app.message to a different value.
  • You should see the rendered example above update accordingly.

Using Vue.js in Your Projects

Note that we no longer have to interact with the HTML directly. A Vue app attaches itself to a single DOM element (#app in our case) then fully controls it. The HTML is our entry point, but everything else happens within the newly created Vue instance. In addition to text interpolation, we can also bind element attributes like this:.

Hover your mouse over me for a few seconds to see my dynamically bound title! Here we are encountering something new. The v-bind attribute you are seeing is called a directive.