How to bind text in Vue.js?

Normally we know inside of a sfc file there are three high level portions.

1. tempalte as html
2. script as js
3. style as css

Binding means creating a relation between teamplate and script's data property. You may ask what is data property? Data properties are a list of property of an object which is returned by a method called data.

There are two ways to bind text in Vue.js
1.using mustache syntax
2.using special html propery that start with prefix v-text

Here mustache syntax can be used multiple times inside of a html tag where v-text html attribute is used for a completely blank html tag. because v-text will override the inner html of a particular tag.

A short example is given below:

<script>
  export default {
    data(){
      return{
        message: "A dynamic Message",
        lorem: `Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam quod repellat vel. Aut fuga, nobis voluptate, labore culpa sint repellendus qui asperiores praesentium optio, delectus error nam porro nesciunt iste?`
      }
    }
  }
</script> 

<template>
  <h1>{{ message }}</h1>
  <p v-text="lorem"></p>
</template>

<style>

</style>