Vue.js Overview

A View into Vue

When Vue came out in 2014, it took the web development world by storm, offering a refreshingly approachable, yet powerful, way to build dynamic and interactive web applications.

Even with recent updates, at their core philosophy, we can notice a certain "less is more" approach. As a framework, Vue can create feature-rich user interfaces with relatively minimal overhead and free of unnecessary bloat.

With its lightweight design, Vue.js provides a smooth and efficient experience for both developers and end-users. Some of the key features that make this possible are reactive data binding, a template syntax that has a reasonable learning curve, and a wide range of tools for customizing components.

So, what are some other aspects that make Vue so special?

Let's dig into some of the technicalities. But first, Let's take a closer look at the prerequisites for learning the framework.

Preconditions for Learning Vue.js

One can easily notice a pattern. To no surprise, for learning any JavaScript-based framework you need to be familiar with the JavaScript basics.

Now, this is not to say that you can't just jump into learning the framework. The official docs are some of the most beautifully written and explained resources you can find online. However, you'll find yourself checking what concepts mean and you may have difficulty going through the basic examples.

To get the most out of Vue, we recommend paying attention to ES6 syntax, familiarity with HTML and CSS as well as some other web development essentials which you'll eventually come across in the documentation.

You can check out our JavaScript resource page and go through the knowledge base as you deem fit.

For more experienced users, any pre-existing knowledge of React or Angular will come in handy. Additionally, this will also give you an understanding of how Vue fits into the larger landscape of frameworks.

Single-File Components as a Defining Feature

One of the defining features of Vue.js is its use of single-file components. In some use cases, we can write all the necessary code for a component in one file. The approach makes the structure easier to follow as it contains all the logic, and style in one place, allowing for better maintenance, organization, and reusability.

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: 'Hello from Vue.js!'
    }
  }
}
</script>

<style>
h1 {
  color: green;
}
</style>

You might have already noticed that we have a single .vue file that contains the template, script, and style for the component. The template section defines the HTML that will be rendered when our component is used. Logically, the script section contains the JavaScript logic and the component's data. Finally, the style section adds some color to our <h1>.

The Template Syntax

Vue.js uses HTML-based template syntax to bind the component's data and logic which is fairly easy to understand and use.

Furthermore, the templates are parsed into virtual DOM render functions by the compiler and then applied to the components. In a similar fashion to other frameworks, the templates provide a high-level abstraction over the rendering process, so we can better understand and reason with our application.

We can use a template for text interpolations, as well as attribute and event bindings.

Now, let's observe this in the following example:

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="incrementCounter">{{ counter }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Click Counter",
      counter: 0,
    };
  },
  methods: {
    incrementCounter() {
      this.counter++;
    },
  },
};
</script>

We see that the message and counter properties are bound to the template with double curly braces {{ }}. When the data changes, the template updates automatically, keeping the view in sync with the data.

We also notice that the template syntax supports event handling, like in the button element where the @click directive is used to bind the incrementCounter method to the click event. The method is defined in the script part of the component, where we also define the data properties and methods.

Reactivity and Declarative Rendering

Another fundamental feature of the framework is its reactivity system, which makes it possible to react to changes in the component's data and update the corresponding parts of the template accordingly.

Specifically, this process enables declarative rendering in Vue.js, meaning that the framework will automatically update the UI whenever the underlying data changes.

<template>
  <div>
    <h1>{{ message }}</h1>
    <input v-model="message">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue students!'
    };
  }
};
</script>

In the example, we can see that the component has a message property in its data, displayed in the template as a heading. Now, the v-model directive on the input element binds the value of the input to the message property, so whenever the value of the input changes, the message property will be updated and the heading will be automatically re-rendered.

Components and Props in Vue.js

Like many of its competitors, Vue has a component-based architecture. The component is essentially a Vue instance with a specific set of options and templates. These options can include data, computed properties, methods, and lifecycle hooks, to name a few.

In addition, a prop is a way for a parent component to pass data down to its child component that receives the prop as an input, much like a function receives its parameters.

The file structure for components and props in Vue.js might look something like this:

// my-component.vue
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    message: String
  }
};
</script>

<style>
h1 {
  color: blue;
}
</style>

For clarity, we're going to use the same single-file component structure.

The template section uses the double curly brace syntax {{ }} to dynamically render data from the component's props object. Here, the component accepts two props: title and message. In the script section, we export an object that defines the component's behavior, and in this case, it specifies that the component accepts the two props.

To use this component, we can import it and pass in the required props like so:

// App.vue
<template>
  <div>
    <my-component title="Hello" message="Welcome to Vue.js"></my-component>
  </div>
</template>

<script>
import MyComponent from "./my-component.vue";

export default {
  components: {
    MyComponent
  }
};
</script>

In this file, my-component is brought into the parent component and registered locally. We then use it in the template by providing the necessary props title and message.

Final Thoughts

Vue was created to make web development more accessible to a wider range of developers. It is designed to be incrementally adoptable, meaning that you can integrate it into an existing project and gradually build up your understanding of the framework as you go along. Additionally, it's flexible enough to use for a variety of projects, from simple single-page applications to complex, feature-rich web apps.

At the same time, the framework offers a powerful set of features and tools for more experienced developers. This includes advanced features like state management with Vuex or Pinia, server-side rendering with Nuxt.js, and a vast library of plugins and components.

Additional Resources

The Official Vue.js Documentation

Playground for a quick start in Vue.js