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>