Basic Syntax of Vue.js

4 min
Beginner

In this tutorial, we will see the basic syntax of Vue.js. This is something that we will logically use constantly throughout the rest of the course.

The syntax of Vue.js 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 mainly focuses on allowing us to write code easily while Vue.js handles the “heavy” part (reactivity and DOM updates).

However, it also follows criteria from other modern frameworks. So, it’s easy to get the hang of it if you have seen any of them.

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

Vue.js is component-based

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

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

In general, they almost always correspond to a UI element, such as a button, a list, a card, etc.

Components allow us to organize and structure our application in a modular way, making development and maintenance easier, and making it smell better (the latter is not 100% verified).

Structure of a component in Vue.js

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

Element	Description
`<template>`	Defines the HTML structure of the component.
`<script>`	Contains the JavaScript logic of the component.
`<style>`	Defines the CSS styles of the component.

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, the <template> is a special tag that allows grouping multiple elements without the need for a root container.

That is to say, it is a “fictional” 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>

In this example, the <template> contains two elements (h1 and p) without the need for a container.

We have seen that in the syntax of a component, <template> is used. This is because, under the hood, a component can have a single HTML node.

But this is not the only place where we will see <template> used. It will be necessary in other cases where we also need to group HTML elements.

String interpolation

String interpolation is a way of displaying dynamic data within HTML. For this, we use the double curly braces syntax {{ }}.

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>

In this example:

{{ message }} displays the value of the variable message.
{{ 2 + 2 }} shows the result of the expression 4.

Expressions in interpolations

In addition to displaying simple variables, we can also use JavaScript expressions within 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>

In this example:

{{ message.toUpperCase() }} converts the message to uppercase.
{{ isActive ? 'Active' : 'Inactive' }} uses a ternary operator to display conditional text.

Although it is possible to use complex expressions in interpolation, it is not advisable to overuse them. In such cases, it’s better to use methods or computed properties.

Basic directives

The directives are special attributes we add to HTML that Vue.js uses to provide additional functionalities.

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

We see it in,

Directives in Vue.js.