Full-Stack Web Development with Vue.js and Node

Building the Real Application Chapter 5

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 variable message, the div element with

that directive also gets updated.