A thorough introduction to Vue.js

Vue is a very popular JavaScript front-end framework, one that’s experiencing a huge amount of growth.

It is simple, tiny (~24KB), and very performant. It feels different from all the other JavaScript front-end frameworks and view libraries. Let’s find out why.

First, what is a JavaScript front-end framework?

If you’re unsure what a JavaScript framework is, Vue is the perfect first encounter with one.

A JavaScript framework helps us to create modern applications. Modern JavaScript applications are mostly used on the Web, but also power a lot of Desktop and Mobile applications.

Until the early 2000s, browsers didn’t have the capabilities they have now. They were a lot less powerful, and building complex applications inside them was not feasible performance-wise. The tooling was not even something that people thought about.

Everything changed when Google unveiled Google Maps and GMail, two applications that ran inside the browser. Ajax made asynchronous network requests possible. Over time, developers started building on top of the Web platform, while engineers worked on the platform itself — browsers, the Web standards, the browser APIs, and the JavaScript language.

Libraries like jQuery and Mootools were the first big projects that built upon JavaScript and were hugely popular for a while. They basically provided a nicer API to interact with the browser and provided workarounds for bugs and inconsistencies among the various browsers.

Frameworks like Backbone, Ember, Knockout, and AngularJS were the first wave of modern JavaScript frameworks.

The second wave, which is the current one, has React, Angular, and Vue as its main actors.

Note that jQuery, Ember and the other projects I mentioned are still being heavily used, actively maintained, and millions of websites rely on them.

That said, techniques and tools evolve, and as a JavaScript developer, you’re now likely to be required to know React, Angular or Vue rather than those older frameworks.

Frameworks abstract the interaction with the browser and the DOM. Instead of manipulating elements by referencing them in the DOM, we declaratively define and interact with them, at a higher level.

Using a framework is like using the C programming language instead of using the Assembly language to write system programs. It’s like using a computer to write a document instead of using a typewriter. It’s like having a self-driving car instead of driving the car yourself.

Well, not that far, but you get the idea. Instead of using low-level APIs offered by the browser to manipulate elements, and building hugely complex systems to write an application, you use tools built by very smart people that make our life easier.

Flavio Copes

I write tutorials for developers at https://flaviocopes.com

  • Introduction
  • Your first Vue App
  • The Vue CLI
  • The Vue DevTools
  • Setup VS Code to work with Vue
  • Introducing Vue Components
  • Single File Components
  • Vue Templates
  • Styling components using CSS
  • Directives
  • Events
  • Methods
  • Watchers
  • Computed Properties
  • Methods vs Watchers vs Computed Properties
  • Props: pass data to child components
  • Handling Events in Vue
  • Event modifiers
  • Inject content using slots
  • Filters, helpers for templates
  • Communication among components
  • Manage state using Vuex
  • Handle URLs using Vue Router