Vue Templates

❮ Previous Next ❯

Vue Template Syntax

Vue.js uses an HTML-based template syntax.

This syntax allows you to declaratively bind the rendered DOM to the underlying Vue instance's data.

All Vue templates are syntactically valid HTML that can be parsed by specification-compliant browsers.

Text Interpolation

The most basic form of data binding is text interpolation using the "Mustache" syntax (double curly braces).

The mustache tag {{ msg }} will be replaced with the value of the msg property from the data object.

It will also automatically update whenever the msg property changes.

Interpolation Example:

<span>Message: {{ msg }}</span>

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <p>Current Message: <strong>{{ msg }}</strong></p>
  </div>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          msg: 'Hello IntricateDevo Learners!'
        }
      }
    });
    app.mount('#app');
  </script>
</body>
</html>

Raw HTML Interpolation

The double mustaches interpret data strictly as plain text, not HTML.

If your data variable contains actual HTML tags that you want rendered, you must use the v-html directive.

Raw HTML Example:

<p>Using text interpolation: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <p>Using mustaches: {{ rawHtml }}</p>
    <p>Using v-html: <span v-html="rawHtml"></span></p>
  </div>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          rawHtml: '<span style="color: red; font-weight: bold;">This should be red.</span>'
        }
      }
    });
    app.mount('#app');
  </script>
</body>
</html>

Warning: Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use v-html on trusted content!

Using JavaScript Expressions

Inside the mustache tags, you are not limited to just variable names.

Vue supports the full power of standard JavaScript expressions.

You can perform math, run string methods, and use ternary operators directly inside the template.

Expression Example:

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

The only restriction is that each binding can only contain exactly one single expression.

Exercise 1 of 2

What is the visual syntax used for basic text interpolation in Vue templates?

Single curly braces { } Double curly braces {{ }} Square brackets [ ]

Exercise 2 of 2

How do you output actual rendered HTML tags from a data variable, rather than plain text?

Using the v-html directive Using the v-bind directive By wrapping the mustaches in bold tags