Vue.js (cli3): Interpolations, first directives, Javascript in the HTML template and Binding | EN 👊

Part 5. of Tutorial : Vue.js (cli 3) for Beginner/Pour débutants ✔️ |2019| EN/FR

FR : Version française disponible ici

Part. 6 Available here (FR only, EN soon)

Always in our momentum on the learning of Vue.js in full, we go in this part to study the different syntaxes of the Template of Vue.js

You should know that Vue.js uses what is called “an HTML-based template syntax” which links the rendering of the DOM to the data of our instance of Vue.

For those who ask the question that Vue.js delivers us a HTML code “Valid”. All the accessibility rules you want to include will be present in your final deliverable. This code can also be scanned by browsers or bots that parses your HTML and output a result that comply with W3C specifications and standards.

The primary purpose of Vue.js is through the use of functions that will make the rendering of our page, succeed in performing the least possible manipulation of the DOM to achieve its purpose.

The first things we will see in this part are the interpolations

Interpolations

The simplest syntax to study when you start with Vue.js is what is called text interpolation: The goal here is to display a variable in our HTML in a fairly traditional way. You know that in computing, the base is to use the famous “Hello World” so let’s do it with an example here:

<template>
   <span> Hello {{ message }} </span>
</template><script>
  export default {
     data() {
       return {
          message: "World"
       }
    }
  }
</script>

This will show on our web page the following result:

Hello World

Some explanations are to provide: know that any component Vue.js is constituted of its default export {} inside which we will find all the methods and variables related to the component. The first thing to see about the data () method that can also be written in this way:

data: function () {   }

But the previous syntax is still faster and readable. This method should only return the variables of our component.
In our case, it only returns a message but we can have several variables of any type such as:

data() {
       return {
          message: "World",
          compteur: 13,
          pourcentage: 60,7
          estActif: true,
          tableauVide: []     }
 }

As you can see it is possible to use empty variables or not.
Another point to see about this, to display this variable in our code we use so called “Mustaches syntax” because the 2 braces form a species of mustache ({{)
On the official documentation of Vue.js, textual interpolation provides a quick introduction to the directives by specifying that it is possible when declaring a component to make only once and once this variable assignment, because yes, if your variable changes, the content is re-generated in your component to update the interface.
If you do not want this to happen more than once you can use a special directive called “v-once”, we’ll see it right after a short introduction

Small introduction to the guidelines

In Vue.js, a directive is an attribute that is placed at the level of an HTML tag.

If you are unfamiliar with HTML tag attributes, you probably use a lot of them, for example when you declare an image with

<img href = “myImage.png” /> and the href is an attribute.

With Vue.js, the attribute always starts with the -v prefix
The purpose of directives in Vue.js is to quickly perform operations on the DOM when an expression changes in your code.
The simplest of the directives is surely v-if, as its name implies, displays or not the HTML element on which it is located. (In fact it’s a little more complicated for the case of v-if, but we’ll get back to it pretty quickly.)

<span v-if="estVisible"> Mon Texte </span>

In this example:

• If isVisible = true then the <span> My Text </ span> tag will be visible
  If isVisible = false then the tag will not appear

To come back with our case presented above (the data of a component), it is possible to use a directive named v-once which if it is put on a tag, will prevent its content to be re-generated, by example:

The code is not changed

Script
data() {
  return {
     a: 1
  }
}
Template
<span @click="execute" v-once> Chiffre {{ a }} </span>
Render
Chiffre 1
Suppose we have an "execute ()" function that when we click on the span increments a by 1 (a + = 1) Then the new rendering will be:
Chiffre 1 (instead of "2")

This is normal since the v-once directive prevents variables in the <span> from being modified

Warning: You may be able to see that there is a v-html directive that allows to generate HTML instead of a classic variable, I do not recommend it because it is enough for a malicious user to use what is call “HTML injections” in your page, it would then be possible for him to find a flaw to flatten your application, see stealing data from your users

It is also possible to make dynamic / responsive attributes of classic HTML such as attributes related to accessibility (aria) or HREF / SRC of your links and / or images
To do this you must use the v-bind syntax: here is a concrete case:

<img src="myImage.png />
If you want to display an image then change to X or Y because this image dynamically you must use the syntax:
<img v-bind:src="myImage" />
Having correctly taken the time to declare in your component the corresponding data:
data() {
  return {
    myImage: "http://..../../myImage.png"
  }
}
If "myImage" changes, the src attribute of your image will also change and your page will change in real time

Important:

1. However, you will rarely see this syntax because it is possible to shorten a directive like v-bind: src by for example :src
The syntax of the two small dots thus replaces the “v-bind”
2. Also think that when you use a v-bind (or just the two small dots), you pass a variable and not a string.
(If you write src=“./ myImage.png” it is a character string whereas if you write: src = “./myImage.png” => Vue.js will try to find in your component a variable which is called ./monImage.png which will cause an error 😄

There are a lot of directives in Vue.js, these also include events (click, press a key and others), what is more commonly called DOM events.

<button v-on:click=”onClickOnMyButton”> test </button>

This syntax allows you to run the onClickOnMyButton () method when you click on your button. (we’ll see the methods later)

Note: Vue.js once again provides a contraction of this call for more speed and readability in your code, you can use @click syntax which is equivalent to v-on: click

Take the time to test some of your instructions from the official documentation (or forum / tutorial on the net) as well as different events (practice with the keys of the keyboard for example, see combination of 2 keys if you are hot!) 😅

I will not speak for the moment in this part of the modifiers in Vue.js because we would need bigger examples but know that it is possible during an event @click for example, to specify to Vue.js that the we want to use a JavaScript method linked to Event, directly in the directive. Let me explain, you probably already know all the famous case where we have a form with a button type = “submit”, and where we are forced to perform an event.preventDefault () when onClick this button. And well Vue.js provides “modifiers” that can avoid this kind of case using for example the syntax:

<button 
   type="submit" 
   @click.prevent="onClickBtnSubmit"
> 
   Ok 
</button>

What’s new in directives from Vue version 2.6.0 and above

Be aware that the latest feature on the directives is available from Vue 2.6 (to know your version open a console and type “vue --version”
This new feature allows you to add dynamic arguments in the call to our directives, allowing Vue.js to evaluate these arguments as a string of characters
For example, if we want to reproduce our example with the image:

<img v-bind:src="myImage" />    (CODE 1)

Vue.js now allows us to dynamically manage the element “src” with for example:

<img v-bind:[dynamicElement]="myImage" />   (CODE 2)

If we declare in our component a variable:

data() {
  return {
    dynamicElement: "src"
  }
}

So Code 2 will provide the same result as Code 1

Short summary since the official doc:

Part. 6 Available here (FR only, EN soon)

Thanks to follow this part😊

In the next part we will see what are the Computed and Watchers, their differences, what they serve, how and where to use them, it promises to be nice!

CLAP This Article — EMAIL ME (thibault.jeanpierre.dev@gmail.com)

— CONTACT ME ON LINKEDIN — SHARE THIS ARTICLE

😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀