Vue — Directives

What are directives?

Directives are special attributes with v- prefix that apply reactive behavior to the DOM.

v-text

<span v-text="message"></span>
<!-- Same as: <span>{{ message }}</span> -->

v-html

<div v-html="rawHtml"></div>

v-bind

<a v-bind:href="url">Link</a>
<img v-bind:src="imageUrl">
<button v-bind:disabled="isDisabled">Submit</button>

<!-- Shorthand -->
<a :href="url">Link</a>

v-on

<button v-on:click="handleClick">Click</button>
<form v-on:submit.prevent="onSubmit">Submit</form>

<!-- Shorthand -->
<button @click="handleClick">Click</button>
<button @click="count++">Click</button>

v-if / v-else

<div v-if="isLoggedIn">Welcome back!</div>
<div v-else>Please log in</div>

<div v-if="type === 'A'">Type A</div>
<div v-else-if="type === 'B'">Type B</div>
<div v-else>Other type</div>

v-show

<div v-show="isVisible">Visible content</div>

v-for

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.name }}
  </li>
</ul>

<div v-for="(item, index) in items" :key="index">
  {{ index }}. {{ item.name }}
</div>

v-model

<input v-model="text">
<textarea v-model="textArea"></textarea>

v-pre

<span v-pre>{{ this will not be compiled }}</span>

v-cloak

<div v-cloak>{{ message }}</div>

Mini Practice

1. Use v-if to toggle elements
2. Loop with v-for
3. Bind attributes with v-bind
4. Handle events with v-on

Up Next

Continue with Conditional Rendering - v-if vs v-show.