Directive Reference

This page provides a quick reference for all built-in directives available in pocket-vue.

Directive	Syntax	Description
v-scope	v-scope="{ count: 0 }"	Marks an element as a component and defines its scope.
v-if	v-if="ok", v-else-if, v-else	Conditionally render elements.
v-show	v-show="ok"	Toggles visibility using CSS display.
v-for	v-for="item in items"	Iterate over arrays or objects.
v-model	v-model="msg"	Two-way data binding on form inputs.
v-on	@click="doThis", v-on:submit.prevent	Attach event listeners.
v-bind	:src="imageSrc", v-bind:class	Reactive attribute binding.
v-effect	v-effect="console.log(count)"	Run reactive side effects.
v-text	v-text="msg"	Update element text content.
v-html	v-html="rawHtml"	Update element innerHTML.
v-cloak	v-cloak	Hides uncompiled templates until ready.
v-pre	v-pre	Skip compilation for this element.
v-once	v-once	Render once and skip future updates.
ref	ref="myDiv"	Register a reference to an element.

---

Directives Summary

v-scope

Initializes reactive state for a DOM element and its children.

v-if

Toggle elements based on conditions. Elements are created/destroyed.

v-for

Repeat elements based on source data (arrays, objects, or ranges).

v-model

Create two-way data bindings for form inputs like text, checkbox, radio, and select.

v-on (@)

Handle browser events with optional modifiers like .prevent, .stop, and keyboard keys.

v-bind (: )

Dynamically update HTML attributes, classes, and styles.

v-show

Toggle visibility using the display CSS property without removing the element from the DOM.

v-effect

Perform complex side effects or integrate with 3rd-party libraries reactively.