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>
<script type="text/javascript">
export default {
  data() {
    return {
      message: 'Hello there, how are you this morning?',
    };
  },
};
</script>

The code inside the script tag is a data variable, which binds the data defined inside it to this component. When you change the value of that...