Directives

There are quite a few directives built-in to Vue. But for the sake of simplicity, only ones that I think are necessary and often used will be included. For example, v-html can be used to add HTML to your component, but it comes with security risks AND scoped stylings will not apply. Therefore it isn’t included.

v-text

Sets the element’s text content. In JavaScript terms, it changes this part of an element:

document.getElementById(”divA”).textContent

• Type Input: string

//Can either be implemented within the element<span v-text=”varName”> </span>//Or you can use mustache interpolations:<span> { { varName } } </span>

v-show

Show and element whether or not the expression within is truthy.

• Type Input: any

<div v-show=”isItTruthy”> </div>

v-if

Renders the elements based on whether the expression is truthy.

<div v-if=”isItTruthy”> </div>

When the logic is triggered, the element is destroyed and re-constructed. This is more expensive after the render, where v-show is more expensive during the render.

If false, then the element won’t be rendered. This will also allow transitions, unlick toggling display: none → display: block.

v-else-if

Part of a logical chain of if, else-if, and else statements. Renders if condition is truthy.

v-else

The last part of the logical chain of an if-else. Renders if the other parts do not meet truthy requirements.

• Type Input: any

<div v-if="participants === 1">    1 Player</div><div v-else-if="participants === 2">    2 Player</div><div v-else="participants === 3">    3 Player</div>

v-for

Takes in a piece of data and iterates through it to render multiple times based on the amount of elements in the source.

• Type Input: Array, Object, number, string

v-on

Also appears as the shorthand “@” and attaches an event listener to an element.

• Type Input: Function, Inline Statement, Object
• Common Modifiers
  • .prevent - call event.preventDefault()
  • .once - trigger handler one time
  • .left - only trigger from left button mouse events.
  • .right - only trigger from right button mouse events.
  • .passive - Makes a DOM event passive .
• Examples:

//These are both the same, just one uses the shorthand "@" syntax.<button v-on:click="aMethod"> </button><button @click="aMethod"> </button>//This is a dynamic event so you can run different pieces// of logic depending on what you choose to insert.<button @[event]="aMethod">  </button>//Submits (a form for example) and adds the event.preventDefault()// so a page refresh does not occur.<button @submit.prevent>  </button>//Listens for when the user let’s the “enter” key up.<button @keyup.enter="aMethod">  </button>

v-bind

This will be one of the most commonly used directives. Instead of only allowing a hard-coded string, v-bind will allow you to input variables allowing for more dynamic use. It can be used on a class, style, src, or an object of multiple attributes.

• Type Input: any

This directive is fairly complex with modifiers that will force bindings into a DOM property or attribute, but to keep it straight forward, you will use this directive whenever wanting to input a variable (number, string, array, object, etc) into an element’s attribute within the template.

• Examples:

//These are the same<img v-bind:src="imagePath" /><img :src="imagePath" />//This defines the class name as “className” and accepts a truthy value.// To make this more usable, the truthy value would instead be a variable in// data or a computed property.<button @[event]="aMethod">  </button>//Submits (a form for example) and adds the event.preventDefault()// so a page refresh does not occur.<button @submit.prevent>  </button>//Listens for when the user let’s the “enter” key up.<button @keyup.enter="aMethod">  </button>

You can also use expressions to make your style bindings reactive as shown in the binded divs below. The displayType and sizes can be changed depending on how you choose to compute those properties.

<!-- Without binding --><div style="fontSize: 35px"> </div><!-- With binding --><div :style="{ display: displayType }"> </div><div :style="{ marginTop: size + 'px'}"> </div>

v-model

When creating forms, it’s very useful to create a binding between the user’s input and a state variable in your program. V-model allows us to simplify this process to create a two-way binding of data.

• Can be used with: <input>, <textarea>, <select>, and <components>
• Example:

<input v-model=”searchText” /><p> { { searchText } } </p>

In the example, assume we have already declared a variable called “searchText” in options api via “data”. We then enter this variable into the v-model which now binds that input’s value to the searchText state variable.

Whatever we enter into the input will also display in the paragraph tag.

We can bind data between components using props.

Parent component:

<input v-model=”searchText” /><ComponentName :inputText="searchText" />

Child component:

//In Template<p> { { inputText } } </p><ComponentName :inputText="searchText" />//In Scriptprops: {    inputText: String}

We declare v-model in the parent component, declare the searchText data variable, and then we send a prop down to the child component which is also using v-bind (because we sending a variable through).

Then in the child component, we handle the data just like a regular prop. Declare the props with it’s type and then you can use it with mustache syntax.

v-slot

v-pre

v-once

v-memo

v-cloak