Vue.js directives

Directives are used with a markup language to perform some functions on the DOM elements. For example, in HTML markup language, when we write:

<div class='app'></div>

The class used here is a directive for HTML language. Similarly, Vue.js also provides a lot of such directives to make application development easier, such as:

• v-text
• v-on
• v-ref
• v-show
• v-pre
• v-transition
• v-for

v-text

You can use v-text when you want to display some variables that you have to define dynamically. Let's see with an example. In src/components/Home.vue, let's add the following:

<template>
  <v-layout>
    <div v-text="message"></div>
  </v-layout>
</template...