Vue JS Part:6 (VueJS Text Output Template Syntax)

To show a simple text output in VueJS, you have to enter the name of the variable in cur} that is, double curly braces. Curly braces (second brackets) are also called “Mustache” syntax. See the example below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
   <head>
      <title>Templates</title>
       <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   </head>
   <body>
   <div id="vue_template">
      <h2>Welcome {{name}}!</h2>
   </div>
      <script type = "text/javascript">
         var app = new Vue({
            el: '#vue_template',
              data: {
               name: "Evan You"
            }
         })
      </script>
   </body>
</html>

Output:

Welcome Evan You!

But you can also use VueJS’s v-text directive if you want. And the v-text directive works exactly like {}}. This means that <div v-text = “content”> </div> will output exactly the same as <div> {{content}} </div>. See the example below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
     <div id="app">
         <div v-text="content"></div>
     </div>
     <script>
     new Vue ({
            el: '#app',
        data: {
                content: 'Hello World'
        }
             })
   </script>
 </body>
</html>

Output:

Hello World

When you pass HTML markup to v-text. Then it will encode HTML markup in HTML entities. See the example below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
     <div id="app2">
         <div v-text="content"></div>
     </div>
     <script>
     new Vue ({
            el: '#app2',
        data: {
                content: '<h3<Hello World</h3>'
        }
             })
   </script>
 </body>
</html>

Output:

<h3>Hello world</h3>