Use directives to control screen display!

Directives are used to dynamically change HTML elements. By using directives, you will be able to output the data defined in Vue.js to HTML.

Vue.js provides some directives by default, and you can also create your own directives.

Here, I will introduce the default directives that come standard with Vue.js.

List of default directives

The default directives provided by Vue.js are as follows.

| directive name | description | | ————————————————- ————————————————– - | ———————————————— ————————————————– ————————————————– —— | | v-text | Used to insert text for an element. | | v-html | Used to insert HTML for the element. | | v-show | Shows/hides an element conditionally. | Unlike | v-if , the element is always present and toggles the CSS display property. | | v-if | Shows/hides an element conditionally. For example, v-if=“show” will show the element if the show variable is true and hide it if it is false. | Used with the | v-else | v-if directive to display if the v-if condition is false. | | v-else-if | Used with the v-if directive to display the first true among multiple conditions. | | v-for | Generate elements dynamically from arrays and objects. | | For example, v-for=“item in items” will generate an element from the array stored in the items variable. | | v-on | Adds an event listener for the element. | | For example, v-on:click=“doSomething” binds the click event to the doSomething function. | | v-bind | Dynamically bind a property of an element. | | For example, v-bind:href=“url” binds the value of the url variable to the href attribute. | | v-model | Two-way bind the value of the element and the data of the Vue instance. For example, by setting v-model=“message”, the value of the element and the message variable are bound in both directions. | | v-slot | Inserts arbitrary content inside the component. | | v-pre | Ignore bindings, directives, etc. | | v-cloak | Before Vue.js data binding is applied to the element, you can hide the style display. | | By using this directive, you can prevent the appearance from collapsing temporarily. | | v-once | The data binding to the element will be executed once and will not be updated after that. | | v-memo | This is a feature that allows you to remember static elements used in your component and not re-render them unless they change. | | This can improve the performance of your component. | | v-is | Deprecated in 3.1.0. Use is attribute with vue: prefix instead. | | | |

Text rendering (v-text)

<html>
  <head>
    <title>Text Rendering</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <div id="app">
    <body>
      <div>
        <div style="text-align: center">
          <h1 v-text="message"></h1>
        </div>
      </div>
    </body>
  </div>
</html>
<script>
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        message: "Hello World",
      };
    },
  }).mount("#app");
</script>

With v-text you can output text inside the tag element.

Unlike v-html, v-text cannot output HTML tags as they are. Therefore, by using v-text, you can avoid XSS (Cross-Site Scripting) vulnerabilities.

HTML rendering (v-html)

<html>
  <head>
    <title>innerHTML rendering</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <div id="app">
    <body>
      <div>
        <div style="text-align: center" v-html="message"></div>
      </div>
    </body>
  </div>
</html>
<script>
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        message: "<h1>Hello World</h1>",
      };
    },
  }).mount("#app");
</script>

Used to inject HTML for an element.

You can insert the HTML itself, provided you trust the HTML string you insert. Injecting malformed HTML can lead to XSS (Cross-Site Scripting) vulnerabilities.

Conditional display (v-show)

<html>
  <head>
    <title>Conditional Display</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <div id="app">
    <body>
      <div style="text-align: center">
        <button v-on:click="reverseFlg">Click Me</button>
        <h2 v-show="showFlg">{{ message }}</h2>
      </div>
    </body>
  </div>
</html>
<script type="text/javascript">
  const { createApp } = Vue;
  createApp({
    el: "#intro",
    data() {
      return {
        message: "Hello World",
        showFlg: true,
      };
    },
    methods: {
      reverseFlg: function () {
        this.showFlg = !this.showFlg;
      },
    },
  }).mount("#app");
</script>

Unlike conditional rendering (v-if), the element is always kept in the DOM. Display and emergency switching are done by css.

Since the switching is done with CSS, the cost of switching the display is low. Use conditional display (v-show) instead of conditional rendering (v-if) for frequent switching.

Conditional rendering (v-if)

<html>
  <head>
    <title>Conditional Rendering</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <div id="app">
    <body>
      <div style="text-align: center">
        <button v-on:click="reverseFlg">Click Me</button>
        <h1 v-if="showFlg === 1">{{ message1 }}</h1>
        <h1 v-else-if="showFlg === 2">{{ message2 }}</h1>
        <h1 v-else>{{ message3 }}</h1>
      </div>
    </body>
  </div>
</html>
<script type="text/javascript">
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        message1: "Hello World",
        message2: "Hello",
        message3: "World",
        showFlg: 0,
      };
    },
    methods: {
      reverseFlg: function () {
        this.showFlg = ++this.showFlg % 3;
      },
    },
  }).mount("#app");
</script>

With conditional rendering, you can use directives provided by Vue.js such as if, if-else, if-else-if, show, etc. to output only when the condition is met.

-if Output if the condition is true.

-if-else Output if the condition is false.

-if-else-if Presents another condition if the if condition is false.

List rendering (v-for)

<html>
  <head>
    <title>List rendering</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <div id="app">
    <body>
      <div id="intro">
        <h1>Big Three Frameworks</h1>
        <ul>
          <li v-for="flamework in flameworks">{{ flamework }}</li>
        </ul>
      </div>
    </body>
  </div>
</html>
<script>
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        flameworks: \["vue", "react", "angular"\],
      };
    },
  }).mount("#app");
</script>

List rendering is useful when you want to control the display of complex data such as arrays.

Specify the flameworks array with v-for and repeat for the number of elements. When iterated the elements are stored in the variable flamework.

Event listener (v-on)

<html>
  <head>
    <title>Event Listener</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <div id="app">
    <body>
      <div>
        <div style="text-align: center">
          <h1 v-text="count"></h1>
          <button v-on:click="countUp">Count up</button>
        </div>
      </div>
    </body>
  </div>
</html>
<script>
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        count: 0,
      };
    },
    methods: {
      countUp: function () {
        this. count++;
      },
    },
  }).mount("#app");
</script>

You can register event listeners using v-on.

It is described as v-on:click, but you can omit this and use the equivalent function by writing :click.

Data binding (v-bind)

<html>
  <head>
    <title>Data Binding</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <div id="app">
    <body>
      <div style="text-align: center">
        <a v-bind:href="url" target="\_blank">Go to Google</a><br />
      </div>
    </body>
  </div>
</html>
<script>
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        url: "http://www.google.com",
      };
    },
  }).mount("#app");
</script>

You can bind properties of HTML elements to data in your Vue.js instance. Binding refers to dynamically updating an HTML element’s property value with data from Vue.js.

As a shorthand for v-bind you can also use :.

In the sample code, the url defined in the Vue instance is bound to the href attribute.

Two-way binding (v-model)

<html>
  <head>
    <title>Two-way data binding</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <div id="app">
    <body>
      <div style="text-align: center">
        <input v-model="message" />
        <p>{{ message }}</p>
      </div>
    </body>
  </div>
</html>
<script>
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        message: "Hello World",
      };
    },
  }).mount("#app");
</script>

Vue.js has a feature called two-way data binding.

This is a feature that improves the complexity and implementation redundancy of one-way data binding.

The difference between one-way data binding and two-way data binding is as follows.

Unidirectional data binding
- Changes to vue.js data are automatically reflected in view
- In order to reflect changes in view to the data, it is necessary to use event handlers and update the data.
Two-way data binding
- Changes to vue.js data are automatically reflected in View
- Changes in view automatically reflected in vue.js data

In short, when the view visible to the user is changed, it automatically updates the actual Vue.js data without using event handlers.

Template insert (v-slot)

You can customize the contents of the component.

Skip binding (v-pre)

<html>
  <head>
    <title>Binding skip</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <div id="app">
    <body>
      <div style="text-align: center">
        <h1 v-pre>{{ message }}</h1>
      </div>
    </body>
  </div>
</html>
<script>
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        message: "Hello World",
      };
    },
  }).mount("#app");
</script>

Tells the Vue.js compiler to skip compilation for a specific element and its children. This means that any Vue.js bindings, directives, etc. will be ignored for that element.

Used for elements that don’t need to be updated by Vue.js for faster rendering.

Binding cloak (v-cloak)

<html>
  <head>
    <title>Binding Cloak</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <div id="app">
    <body>
      <div>
        <div style="text-align: center">
          <h1 v-cloak v-text="message"></h1>
        </div>
      </div>
    </body>
  </div>
</html>
<script>
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        message: "Hello World",
      };
    },
  }).mount("#app");
</script>

A Vue.js directive allows you to hide an HTML element before Vue.js data binding is applied to the element.

Vue.js waits for any styles applied to the element before applying data bindings. This specification assumes that the design may collapse for a moment for elements whose data binding has not been completed. Use v-cloak to prevent that. v-cloak will automatically show hidden HTML elements when data binding is applied.

once binding (v-once)

<html>
  <head>
    <title>Once Binding</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <div id="app">
    <body>
      <div style="text-align: center">
        <input v-model="message" />
        <p v-once>{{ message }}</p>
      </div>
    </body>
  </div>
</html>
<script>
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        message: "Hello World",
      };
    },
  }).mount("#app");
</script>

A data binding to an element will be performed only once and will not be updated after that.

Vue.js automatically updates elements on data changes, but you can suppress that by using v-once.

Memo rendering (v-memo)

<!DOCTYPE html>
<html>
  <head>
    <title>Note Binding</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <div style="text-align: center">
        <ul>
          <li v-for="memo in memos" v-memo="\[\]">{{ memo.name }}</li>
        </ul>
        <button @click="addMemos">Add memos</button>
      </div>
    </div>
  </body>
</html>
<script>
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        memos: \[
          { id: 1, name: "memo 1" },
          { id: 2, name: "memo 2" },
          { id: 3, name: "memo 3" },
        \],
      };
    },
    methods: {
      addMemos() {
        for (let i = 4; i <= 10; i++) {
          this.memos.push({ id: i, name: \`memo ${i}\` });
        }
      },
    },
  }).mount("#app");
</script>

A feature that allows you to remember static elements used within a component and not re-render them unless they change. This can improve the performance of your component.

List components that display large amounts of data: List components are used to display large amounts of data, but do not need to re-render the list elements unless the data changes. By using v-memo we can avoid re-rendering list elements unless the data has changed. This will improve the performance of your component.

at the end

By using Vue.js’s directive feature, developers can create components more easily and efficiently. In particular, basic directives such as v-bind and v-on make it easy to implement element binding and event handling, increasing development efficiency. In addition, since directives such as v-if and v-for that perform conditional branching and iterative processing can be easily seen and implemented, the maintainability of the code is also high. In addition, there are performance-oriented directives such as v-memo that can also improve the performance of your application.

In general, Vue.js’s directive function is useful for improving development efficiency and code maintainability, so let’s use it as much as possible.

https://github.com/wiblok/Vue.js

Use directives to control screen display!

List of default directives #

Text rendering (v-text) #

HTML rendering (v-html) #

Conditional display (v-show) #

Conditional rendering (v-if) #

List rendering (v-for) #

Event listener (v-on) #

Data binding (v-bind) #

Two-way binding (v-model) #

Template insert (v-slot) #

Skip binding (v-pre) #

Binding cloak (v-cloak) #

once binding (v-once) #

Memo rendering (v-memo) #

at the end #