Vue Best Practices — Directives

Vue is an easy front end framework to work with. It lets us create apps easily.

However, there are still many things that we should look out for when we write apps with them.

In this article, we’ll look at the best practices for using directives.

Make Sure v-html is Valid

When we use the v-html directive, we shouldn’t have any modifiers added to it.

And we should have an argument with the expression that stores the HTML code as a string.

For instance, we can write:

<div v-html="foo"/>

where foo is a variable.

Make Sure that v-if is used Properly

v-if shouldn’t have modifiers.

But it should have an argument with the expression to check whether to display anything.

For instance, instead of writing:

<div v-if:abc="foo"/>

or:

<div v-if/>

We write:

<div v-if="foo"/>

Make Sure v-model is Used Properly

v-model may have some modifiers.

The argument is also required so that it binds to the variable indicated in the argument.

Also, they should be added to input controls.

For instance, we can write:

<input v-model="foo">

or:

<input v-model.lazy="foo">

Make Sure that we use v-on Properly

v-on should be used properly to bind to variables.

It can have arguments to run an event handler when an event is triggered.

Also, it can have no arguments to pass events from a child to a parent.

For instance, we can write:

<div v-on="foo"/>

or:

<div v-on:click="foo"/>

@ is short for v-on , so we can write:

<div @click="foo"/>

or:

<div @click.right="foo"/>

where foo is the event handler to run.

Make Sure that v-once is used Properly

v-once indicates that a component or element should only be rendered once.

It takes no arguments or modifiers.

The element or component will be treated as static elements on subsequent rendered.

For instance, we use it by writing:

<div v-once/>

Using v-pre Properly

v-pre is another directive that doesn’t take any argument or modifiers.

It’s used to skip compilation for the element with this directive and all its children.

Therefore, we can use it to display raw Vue or other kinds of code.

We use it by writing:

<span v-pre>{{ raw code }}</span>

Make Sure we use v-show Properly

v-show is used to display something conditionally by showing or hiding it with CSS.

It takes an argument with the boolean expression that’s checked for displaying something if it returns true .

For instance, we use it by writing:

<div v-show="foo"/>

Using v-text Properly

The v-text is equivalent to the mustache for interpolating expression within an element.

It takes an argument for the expression return value to display.

For instance, we can write:

<span v-text="msg"></span>

Which is the same as:

<span>{{msg}}</span>

No Custom Modifiers on v-model

v-model only takes a few modifiers.

It can take a few modifiers like trim to trim leading and trailing whitespaces.

lazy for lazy evaluation.

And number to convert the inputted value to a number.

However, it doesn’t accept any custom modifiers.

So to use v-model properly, we write:

<input v-model="foo" />

or:

<input v-model.trim="foo" />

or:

<input v-model.lazy="foo" />

or:

<input v-model.number="foo" />

No Multiple Template Root

Our template should only have one root element.

Otherwise, Vue will throw an error.

For instance, we can write:

<template>foo bar</template>

But we can’t write something like:

<template>
  <div v-for="todo in todos"/>
</template>

since it renders multiple items.

Instead, we write:

<template>
  <div>
    <div v-for="todo in todos"/>
  </div>
</template>

v-bind.sync should be Used Properly

v-bind.sync needs to be used properly.

v-bind.sync doesn’t need a value prop in the child.

It uses the same prop as we have in the parent.

For instance, we can use it as follows:

App.vue

<template>
  <div id="app">
    <Input :msg.sync="msg"/>
    <p>{{msg}}</p>
  </div>
</template>

<script>
import Input from "./components/Input";

export default {
  name: "App",
  components: {
    Input
  },
  data() {
    return {
      msg: "Hello Vue!"
    };
  }
};
</script>

Input.vue

<template>
  <input :value="msg" @input="$emit('update:msg', $event.target.value)">
</template>

<script>
export default {
  name: "Input",
  props: {
    msg: String
  }
};
</script>

:msg.sync passes the value of msg to the child and allows it to emit some with update: name.

We have the value prop set to the msg prop value passed from the parent in Input.vue .

Then we emit an update:msg event to emit msg back to the parent.

Now when we type on the screen, we’ll see what we typed displayed.

Conclusion

Making sure that we use Vue directives properly is a big part of writing Vue apps that don’t have bugs.

We should make sure that the syntax is correct and no typos in our modifiers or arguments if they’re included.