Introduction to Vue - key concepts and why it's so awesome

What is Vue.js

In the past 2 years Vue came a long way from barely known hipster framework to second one in terms of usage and popularity surpassing React and Angular in number of GitHub stars. In opposite to competitors Vue hasn't got a giant company behind its back yet it's gaining popularity faster than frameworks backed by Facebook and Google.

The main reasons behind Vue's popularity (except it's vibrant and active community) are also the main characteristics of the framework.

Vue.js is:

1. Approachable
   • If you're already familiar with HTML, CSS and JavaScript learning Vue wouldn't be a problem for you. By knowing only a few basic concepts you'll be able to write an app that fulfils most of the common use cases.
2. Versatile
   • Vue just scales well and adapts perfectly to the needs. You can use it either to make a small interactive component that plays well with the rest of your website or a fully-featured giant web application. What's even more important - Vue plays with other code better than any other mainstream framework.
3. Performant
   • Gzipped version of Vue is only 20 kB which makes it a perfect fit for performance-oriented web apps or as a replacement for libraries focused on DOM manipulations (like jQuery).

Vue is also a framework focused on getting things done with amazing learning curve. Many people say that it has the best documentation in the industry which makes it even easier to jump in.

All of the above makes Vue the fastest growing framework with the biggest satisfaction ratio according to State of JS report

Now that we know why Vue is worth trying let's explore it's key concepts.

Component-Based Architecture

Vue is a framework that allows to build web apps in Component-Based Architecture. It means that you're building the app from self-contained, reusable components. Ideally none of the components should depend on each other. It's a great way to build large-scale maintainable applications.

In Vue every part of the application is a component. Let's use the image below to better understand this concept:

Image loading...

On the left side we see a typical website divided into sections. Each section can be a separate component. This barely visible, lightgray rectangle wrapping all other figures is called a root component.

Root component is just a container for our application. Every components inside of it are called it's children , components inside of them will be their children and so on. We can see that our root component has three children: header (top one), main content (left) and a sidebar (right). Some of them has their own children like a single post. On the right side we can see a tree representing parent-children relations of components inside the application. It turns out that every Vue application can be represented as such tree.

Single File Components

Usually no matter which framework we use every component has it's markup (HTML), styles (CSS) and business logic (JavaScript). In frameworks like Angular or React each or some of this parts are usually located in a separate files.

In Vue there is a very neat concept of so called Single File Components (SFC). This feature allows you to put all the code related to particular component in one file with .vue extension. Let's see a very simple example demonstrating how SFC could look like:

html
<template>
  <div>
    <p class="hello-msg">{{ message }}</p>
    <button v-bind:click="sayBye">
      Bye!
    </button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: "Hello World!"
    }
  },
  methods: {
    sayBye () {
      this.message = "Bye bye!"
    }
  }
}
</script>

<style>
.hello-msg {
  font-size: 30px;
  color: red;
}
</style>

Every SFC is divided into three sections:

• template : HTML markup
• script : exported component instance with JavaScript logic
• style : styling in CSS or some preprocessor like SCSS

As you probably noticed it's a great way to keep all of the code related to a particular component in one place. Moreover such components can be shared and reused much easier that splitted ones. This is one of the many reasons why it's extremely easy to maintain even very complex applications written in Vue.

These three sections are tied together and can influence each other. Styles from style section are directly applied to the template and data properties and methods from script section can be used there too.

Let's quickly review the above code to better understand what's going on:

In template section we are displaying a paragraph. This curly braces inside of it are actually something called mustache interpolation. You can write a JavaScript code inside of it and access the "data", "methods" and "computed" (that we will learn about later) properties from the component instance (in script section). As you probably guessed the result of {{ message }} code is just a "Hello world!" text.

Below we have a button that is meant to invoke "sayHello" method as a response to click event. v-bind is a Vue directive. We will learn about directives later but for now you just need to know that v-bind allows you to bind any DOM event into it and pass a function as a callback so v-bind:click="sayHello" is more or less an equivalent of button.addEventListener('click', sayHello).

Below template in script section we are exporting component instance that contains it's state (data) and methods to modify it (methods). Knowing only this two properties you can do almost every basic task in Vue! You can access data properties and methods inside the component instance through this keyword.

Vue reactivity

Before we can go further there is one more important concept you need to know. In Vue there is something called reactivity system. In short words it tracks changes in variables and changes their values everywhere you used it so by invoking sayBye we are changing the value of this variable not only in the data property but also in the template. The changes will be immediately reflected on the screen.

Summary

We learned about Vue characteristics, key concepts and why it's a great framework for either small or complex applications. With strong theoretical fundamentals we can confidently jump into the code and build our first Vue application.

Next in series: Vue instance and its properties