Basic Syntax of Vue.js

In this tutorial, we are going to see the basic syntax of Vue.js. Something that, logically, we will use constantly throughout the rest of the course.

Vue.js syntax is based on combining HTML, CSS, and JavaScript in a declarative and reactive way. Undoubtedly, this is one of the reasons for Vue.js’s success.

It basically focuses on letting us write code easily while Vue.js takes care of the “heavy” part (reactivity and DOM updates).

So let’s see the fundamentals of Vue.js syntax 👇.

Vue.js is Component-Based

Like many other technologies, Vue.js is component-based. They are the 🧱 “building blocks” 🧱 with which most modern web applications are built (and non-web ones, and not-so-modern ones 😅).

As such, a component is a reusable block of code that can have its own state, properties, methods, and lifecycle.

Components allow us to organize and structure our application in a modular way, which facilitates development and maintenance of the application, and makes it smell better (this last point is not 100% verified).

Structure of a Vue.js Component

A component in Vue.js is simply a file with the extension .vue. The syntax contains three main sections.

For example, like this:

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

<script setup>
import { ref } from 'vue';

const message = ref('Hello, Vue.js 3!');
</script>

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

Using <template> to Group Elements

In Vue.js, <template> is a special tag that allows grouping multiple elements without the need for a root container.

That is, it’s a “fictitious” grouping, as if we had a <div>. But with the difference that the <template> tag will not appear in the HTML5 code.

<template>
  <h1>{{ title }}</h1>
  <p>{{ description }}</p>
</template>

<script setup>
import { ref } from 'vue';

const title = ref('Welcome to Vue.js 3');
const description = ref('This is an example of multiple elements in <template>.');
</script>

String Interpolation

String interpolation is a way to display dynamic data within HTML. For this, the double curly brace syntax {{ }} is used.

Vue.js will automatically replace the expressions inside {{ }} with their corresponding values.

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

<script setup>
import { ref } from 'vue';

const message = ref('Hello, Vue.js 3!');
</script>

Expressions in Interpolations

In addition to displaying simple variables, we can also use JavaScript expressions inside the interpolation braces {{ }}.

These expressions can include mathematical operations, method calls, ternary operators, concatenations, etc.

<template>
  <div>
    <p>{{ message.toUpperCase() }}</p>
	<p>The sum of 2 + 2 is {{ 2 + 2 }}</p>
    <p>{{ isActive ? 'Active' : 'Inactive' }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('Hello, Vue.js 3!');
const isActive = ref(true);
</script>

Basic Directives

Directives are special attributes we add to HTML that Vue.js uses to provide additional functionality.

Directives in Vue.js always start with v- and are used to manipulate the DOM declaratively. They also will not appear in the generated HTML code.