Vue 3 — HTML and Directives
Tags: vue, webdev, programming, javascript
Published: 2021-01-25 23:38:11

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

Vue 3 is the up and coming version of Vue front end framework.

It builds on the popularity and ease of use of Vue 2.

In this article, we’ll look at how to create templates with Vue 3.

### Raw HTML

We can render raw HTML with the `v-html` directive.

For example, we can write:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <p>{{ rawHtml }}</p>
      <p><span v-html="rawHtml"></span></p>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            rawHtml: `<b>foo</b>`
          };
        }
      }).mount("#app");
    </script>
  </body>
</html>
```

We have the `rawHtml` property returned with the object we return in the `data` method.

If we pass raw HTML into the mustache, it’ll be sanitized. This means the raw code will be displayed.

If we pass it into the `v-html` directive, it’ll be displayed as HTML, so it’ll be bold.

Therefore, if we use `v-html` , we should be careful of cross-site scripting vulnerabilities.

We should only display trusted content with `v-html` .

### Attributes

If we want to set attribute values dynamically, we’ve to use the `v-bind` directive.

For instance, we can write:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <div v-bind:id="dynamicId"></div>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            dynamicId: `foo`
          };
        }
      }).mount("#app");
    </script>
  </body>
</html>
```

to set the `id` attribute of the div to `foo` by using `v-bind` .

If we have boolean attributes, its existence means we set the value to`true` .

For example, we can write:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <button v-bind:disabled="disabled">Button</button>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            disabled: true
          };
        }
      }).mount("#app");
    </script>
  </body>
</html>
```

We disabled the button by passing in the `disabled` value to `v-bind:disabled` , which is `true` .

### JavaScript Expressions

We can put JavaScript expressions between the double curly braces.

For instance, we can write:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      {{message.split('').reverse().join('')}}
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            message: "hello world"
          };
        }
      }).mount("#app");
    </script>
  </body>
</html>
```

to reverse `'hello world'` in the template.

We can only put in single expressions and not statements, so we can’t write:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      {{ var a = 1 }}}
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            message: "hello world"
          };
        }
      }).mount("#app");
    </script>
  </body>
</html>
```

The Vue template compiler will give us an error.

### Directives

Directives are special attributes that starts with `v-` .

The values they expect are single JavaScript expressions.

`v-for` and `v-on` are exceptions to this.

We reactively apply the side effects to the DOM when the value of its expression changes.

For instance, we can write:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <p v-if="show">hello world</p>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            show: true
          };
        }
      }).mount("#app");
    </script>
  </body>
</html>
```

to show the ‘hello world’ message with `v-if` since `show` is `true` .

`v-if` is a directive that shows something when its value is truthy.

### Conclusion

Templates can have raw HTML, attributes, and directives.

Directives are special attributes that take values.