Interpolations, Directives, and Components are VueJS terms. Directives and Components are also essential building blocks to build beautiful Front-End interfaces. This topic tries to cover all these VueJS terms and concepts briefly.

Declarative rendering:

Let's focus on the difference between the declarative and imperative conceptions. You don't have to say the step-by-step way what you want in a declarative programming language. So the question in a declarative world would be: "What would you like to achieve?" The proper answer is "I would like to be a Vue master"!
In an imperative world, you will have to say how to get what you want in a step-by-step way. So the question would be: "How would you like to achieve?" The correct answers:

1. I want to learn the basics first.
   a. Read the introduction section.
   b. Write the Hello World.
   c. Understand the central concepts.
   d. etc.

VueJS is a declarative framework. You need to define what you want to achieve.

<div id="app">
{{message}}
</div>

const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#app')

Interpolations in VueJS

We can talk about Interpolation when VueJS exchanges a property to its assigned value or when it evaluates an expression or returns the result of a function. All these operations are interpolations. If Vue found a pair of curly brackets in the template during the compilation phase, it would modify it at once. Interpolation doesn't depend on curly brackets. In the following example, we changed the curly brackets to a v-once attribute, and the output will be the same. You could say what magic! But in reality, it is just a directive. So we got the same result because we used a Directive.

Directives in VueJS

Well, Directives are an essential building block of VueJS. It is an attribute with a value that we declare on a starting tag of an HTML element. It has a 'v-' full notation and a shorter dot notation. The official term for the latter one is shorthand notation anyway. The other important thing we need to note is the syntax of the events. VueJS, similarly to the native JavaScript, contains events. We can invoke them, ( eg. 'v-on:click' ). The shorthand version of this is the (@click).

Components in VueJS

VueJS components are reusable instances with a name. The main 'app' is also a component, but it is a root component, and it is not reusable. So this is an exception. We can modify a component behavior with optional parameters.

We can use the following properties to modify a component behavior.

The Data property is a function that returns the component data information. It can be String, Number, Boolean, Object, Array.

Props are for the parent component data properties that the current child component is inherited. It can be an Array or Object type. If that is an Object, we can validate the inherited data property type.

In the Computed block, we can create dynamic properties that need to meet certain criteria.

Methods block is for functions that are callable from the component's template.

We can use event listeners to detect dynamic property changes in the watch block. In case of objects changes, we need to use the deep watch.

To notify the parent component about any modification of a property, we need to use the emit feature of VueJS.

Conclusion and closing

In the previous post, I wrote about a plain simple sandbox configuration. In this post, I have tried to dive into the main functionalities of VueJS. Although there are many things left, I covered a lot briefly.