Vue.js Basics 5 lessons
  1. 1 The friendliest way into modern front end
  2. 2 Components, data and templates sign in to open
  3. 3 Building an application sign in to open
  4. 4 Making it production ready sign in to open
  5. 5 Vue in this market sign in to open
Course overview
Data: video · change

This lesson: 122KB

Vue.js Basics · Lesson 1 of 5

The friendliest way into modern front end

Know why you would choose this.

Vue does the same job as React and Angular: it keeps what is on screen in step with your data. It is generally considered the easiest of the three to learn, and that is a real advantage rather than a marketing claim.

Why it is easier. The template looks like HTML with some extra attributes, so somebody who knows HTML can read it immediately. State management is simpler. And the official documentation is unusually good, which matters more than people expect.

You can add it to an existing page. A single script tag and Vue manages one part of an existing site, which means you can improve an old project incrementally rather than rewriting it. React and Angular are much less comfortable used that way, and for agencies here maintaining older sites this is genuinely useful.

Where it stands commercially. Smaller job market in Pakistan than React, larger than Angular in the small and medium business segment, and popular with agencies and with Laravel projects. Internationally it is widely used, particularly in Asia and Europe.

Learn JavaScript properly first. A framework learned on top of a weak JavaScript foundation produces somebody who can follow a tutorial and cannot debug anything, which is the commonest pattern among self taught front end developers.

Two styles exist: the options approach, which is simpler to read for a beginner, and the composition approach, which is where Vue is going and which suits larger applications. Learn the second for new work, and expect to meet the first in existing projects.

Lab — try it yourself

Add Vue to one existing page with a script tag and make one part of it reactive. That incremental route is not comfortable in the alternatives.

Check what you learned

Create your free BvLogic ID to take the quiz and record your score.

Create your BvLogic ID
Continue to lesson 2 Up next 2. Components, data and templates