Reference

Directives by category

There are 257 registered attributes. This page covers the main ones, grouped by subject. The complete and exact list of what is registered comes out of V.directives in the browser console, it reflects the build you loaded, not the documentation.

How an attribute is read

v-on:click.prevent.once="save()"
│  │  │     │              └── expression
│  │  │     └── modifiers, separated by dots
│  │  └── argument, after the colon
│  └── directive name
└── prefix

What you write	Same as
`@click="..."`	`v-on:click="..."`
`:href="..."`	`v-bind:href="..."`
`.value="..."`	`v-bind:value.prop="..."`
`data-v-name`	`v-name`, always accepted

Modifiers are always bare names, because an = inside the attribute name does not survive the HTML parser. When a directive needs a number, it offers an attribute of its own , v-debounce, v-autosave-delay, v-mask-decimals, or takes the value as a modifier directly, as in @hold.2s.

Execution order

On a single element the order is fixed, and does not depend on how you wrote the attributes:

v-ignore and v-pre cancel everything in that subtree.
Terminal directives, v-for, v-if, v-else-if, v-else, take control.
v-data and v-component create the scope used by the rest.
The others run in decreasing priority: v-ref, v-mask, v-model, v-bind, everything else, v-init, and finally the transition classes.
The children are walked with the resulting scope.

State and rendering

Directive	What it does
`v-data="{ ... }"`	Creates a reactive scope
`{ expression }`	Interpolates text. `{{ }}` works too
`v-text="value"`	Writes text, escaping HTML
`v-html="content"`	Inserts HTML and initializes the directives inside it
`v-show="cond"`	Toggles `display` without taking the element out of the DOM
`v-if`, `v-else-if`, `v-else`	Inserts into and removes from the DOM
`v-for="item in list"`	Repeats, diffing by key via `:key`
`v-once="value"`	Renders once and watches no further
`v-teleport="body"`	Moves the element somewhere else in the document
`v-cloak`	Hides the element until Voodoo takes over
`v-ignore`, `v-pre`	Turns Voodoo off in that subtree
`v-component="name"`	Mounts a registered component onto the element

Attributes, classes and styles

Directive	Example
`v-bind:attr` or `:attr`	`:href="url"`, `:disabled="loading"`
`:class`	`:class="{ active: selected, error: hasError }"`
`:style`	`:style="{ color: color, width: width + 'px' }"`
`v-bind="object"`	Applies several attributes at once
`.prop`	`.value="text"` writes to the property, not to the attribute

Events

Directive	Example
`@event` or `v-on:event`	`@click`, `@input`, `@keyup`
`v-click`, `v-input`, `v-keyup`	Direct shorthands, one per line
`@hover`, `@tap`, `@press`	Friendly aliases
`@hold.2s`	Held down for a length of time
`@outside`	Click outside the element
`@visible`	Entered the visible area
`@swipeleft`, `@swiperight`	Swipe gestures
`v-hotkey="ctrl+k"`	Global keyboard shortcut

Modifiers: .prevent, .stop, .once, .self, .capture, .passive, .window, .document, .outside, .debounce, .throttle, and key filters such as .enter, .esc, .ctrl and .shift.

Forms and validation

Directive	What it does
`v-model`	Two-way binding, with `.number`, `.trim`, `.lazy`, `.debounce` and `.single`
`v-submit="/api/x"`	Submits the form over AJAX
`v-method="PUT"`	HTTP verb of the submission
`v-validate`	Turns on automatic field validation
`v-required`, `v-email`, `v-cpf`, ...	Field rules
`v-validate-<rule>`	Any registered rule, including your own
`v-error-message`, `v-error-target`	The message and where to show it
`v-mask="cpf"`	Typing mask, with `.unmask`
`v-mask-currency`	Currency, typed from right to left
`v-upload`, `v-dropzone`	File upload with a progress bar
`v-autosave`	Saves the draft on its own
`v-guard`	Warns before leaving with unsaved changes
`v-reset-success`, `v-redirect`	What to do after success

Requests

Directive	What it does
`v-get`, `v-post`, `v-put`, `v-patch`, `v-delete`	Fires the request
`v-target`, `v-swap`	Where and how to put the result
`v-trigger`, `v-poll`	When to fire
`v-body`, `v-params`, `v-headers`	What to send
`v-as`, `v-json-path`, `v-template`	How to handle the response
`v-loading`, `v-loading-class`, `v-disable-loading`	Loading state
`v-on-success`, `v-on-error`, `v-on-complete`	Callbacks
`v-confirm`, `v-toast-success`, `v-toast-error`	The question and the notice
`v-cache`, `v-retry`, `v-timeout`, `v-offline-queue`	Network
`v-resource="name: /url"`	Data, loading and error in one object
`v-search`, `v-param`, `v-min-length`, `v-debounce`	Search as you type
`v-load`, `v-load-visible`	Loads a piece of HTML

Lifecycle and references

Directive	What it does
`v-init="load()"`	Runs after the DOM for that round has been applied
`v-ref="searchField"`	Stores the element in `$refs`
`v-effect="..."`	Runs the expression whenever the dependencies change
`v-watch="action"`	Reacts to the change of the `v-model` on the same element

Special state

Directive	What it does
`v-persist="key"`	The state survives a reload
`v-sync="channel"`	The state follows the other tabs, live
`v-history`	Undo and redo, with `v-undo` and `v-redo`
`v-storage="key"`	Binds a field straight to local storage

Interface

v-modal, v-modal-content, v-modal-close, v-drawer, v-dropdown, v-tooltip, v-popover, v-tabs, v-accordion, v-collapse, v-toggle, v-command, v-sortable, v-draggable, v-droppable, v-focus-trap, v-scrollspy, v-sticky, v-lazy-src, v-lazy-bg, v-skeleton, v-copy, v-share, v-print, v-download, v-fullscreen, v-resizable, v-infinite-scroll, v-theme-toggle, v-idle, v-online, v-offline.

An implementation detail that solves a real problem

The side drawer moves the panel to the body of the document while it is open, so it works even when the v-drawer lives inside a container with filter, transform or backdrop-filter, properties that would break fixed positioning. The dropdown menu does the same with overflow: hidden.

Sound

Directive	What it does
`v-sound="click"`	Plays an effect on click
`v-sound:mouseenter="hover"`	Picks another event as the trigger
`v-mute`	A button that turns the sound on and off, with `aria-pressed`

Only in the full build

Animation, charts, routes and languages live only in voodoo.full.min.js: v-motion, v-motion-scroll, v-motion-hover, v-motion-tap, v-motion-stagger, v-parallax, v-flip, v-count, v-typewriter, v-chart, v-router-view, v-link, v-route-active, v-t, v-t-params and v-locale.

The attributes disappear from the HTML

<!-- you write -->
<button v-click="save()" :disabled="loading">Save</button>

<!-- the inspector shows -->
<button disabled>Save</button>

The values stay stored in the runtime, so the behavior does not change. Two consequences: never write CSS that leans on selectors like [v-tab], and el.getAttribute('v-something') returns null after mounting. To turn it off, use V.config.cleanAttributes = false, or the data-keep-attributes attribute on the <script> tag.