vue to prevent curly braces from being seen when page loads

As shown below:

<style>
  [v-cloak]{
    display:none
  }
</style>

v-cloak v-text v-html

v-cloak is used in large segments

v-text for single tag

v-html is used for processing with tags

Supplementary knowledge:The problem of unsuccessful data binding of vue curly braces

I won't say much nonsense, let's just look at the case~

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;script src="js/" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;&lt;!--Introducedvue--&gt;
  &lt;script src="js/" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;&lt;!--Introducedmain--&gt;
  &lt;body&gt;
    &lt;div &gt;
      &lt;p&gt;{{message}}&lt;/p&gt;
    &lt;/div&gt;

  &lt;/body&gt;
&lt;/html&gt;

As shown in the figure below, it only contains message information and is bound to a div with id as the app.

var app=new Vue({
  el:'#app',
  data:{
    message:'hhh'
  }
})

The results show:

{{message}}

Both the js you wrote are referenced in the head, and the ideal message information cannot appear.

Change the introduction order:

First introduce - then write html content - and finally introduce the js code you wrote yourself. success! The reason is not clear yet, and I will fill in the pit in the future...

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <script src="js/" type="text/javascript" charset="utf-8"></script>
  <body>
    <div >
      <p>{{message}}</p>
    </div>
  </body>
  <script src="js/" type="text/javascript" charset="utf-8"></script>
</html>

The above vue solution to prevent curly braces from being seen when the page is loaded is all the content I share with you. I hope you can give you a reference and I hope you can support me more.