Template Syntax

Vue's v-if adds and removes its block, destroying child components and listeners, and renders nothing while false; v-show always renders and only toggles inline display. Use v-show for a frequently toggled dropdown, v-if for a rarely shown admin panel.

Vue's template compiler treats a v-on value that is a name or property path (save, form.save) as a method handler, called with the native event. Anything else (save('draft'), count++) is an inline handler, where the event is available as $event.

Bound to a boolean, a checkbox's v-model stores true or false. Bound to an array or Set, each checked box adds its own value attribute to the collection and unchecking removes it, so every box in the group needs a distinct value.

Put ref="email" on the input, get it with useTemplateRef('email') (Vue 3.5) or a same-named ref(null), and call focus() in onMounted. During setup the element does not exist yet, so the ref is still null.

Vue's {{ }} inserts escaped text into part of an element, v-text replaces the whole textContent, and v-html replaces innerHTML with raw markup that Vue never compiles, so it holds no bindings or components and is an XSS risk.

In Vue 3, v-if takes priority over v-for on the same element, so the condition cannot see the loop alias; Vue 2 ran v-for first. Move the loop to a wrapping <template> or the condition to a container.

Without :key, Vue 3 patches each v-for element in place by position instead of moving DOM nodes; that is only safe when rows hold no component state or DOM state such as input values or focus.

With :key="index" Vue reuses the row component at each position after sorting; only its props change, and a draft initialised once in setup stays with the position. Keying by row.id moves each instance with its row.

In Vue 3, v-html on unsanitized CMS HTML, compiling CMS strings as Vue templates, and mounting Vue over server-rendered user content are all unsafe. Sanitize with an allowlist before v-html, or render structured content through your own components.

Declare const vFocus = { mounted: (el) => el.focus() } in script setup and write v-focus on the element. Use mounted because the element is in the document only then; the function shorthand would refocus on every update.

Vue 3's v-for iterates arrays (item, index), plain objects (value, key, index), an integer n (1 to n, plus a 0-based index), strings, and any iterable such as Map or Set.

For boolean attributes such as disabled, Vue 3 includes the attribute for truthy values and '' and omits it for other falsy values. For other attributes, false renders as the string "false"; only null or undefined remove them.

v-bind without an argument spreads an object's keys as attributes or props. In Vue 3 the later declaration wins on a clash, except class and style, which merge. Since 3.4, :id alone is shorthand for :id="id".

Vue's :style takes a CSS string, an object of properties, or an array of objects merged left to right. Vue adds vendor prefixes when needed and clears properties that disappear or become null, but it never appends units such as px to numbers.

No. Vue 3's compiler gives every v-if, v-else-if and v-else branch its own automatic key, so switching branches unmounts one input and mounts a fresh one; Vue 2 reused same-tag elements unless you added keys.

Each hook gets el, binding, vnode and, in beforeUpdate and updated, prevVnode. For v-tooltip:top.delay="hint" the binding has value = hint's value, arg = 'top', modifiers = { delay: true }, plus instance and dir; oldValue is set only in beforeUpdate and updated.

Use @keydown.ctrl.enter.exact="submit". .enter matches the key, .ctrl requires Ctrl held, and .exact rejects the event if any other system modifier (Shift, Alt, Meta) is also pressed; without .exact, Ctrl+Shift+Enter would fire too.

Vue runs v-on's guard modifiers in the order written. @click.prevent.self calls preventDefault on every click reaching the element, including clicks bubbling from children, then checks .self; @click.self.prevent checks .self first, so only clicks on the element itself are prevented.

v-model treats the bound JavaScript state as the only source of truth, so on mount it overwrites the element's value, checked or selected state from the model. Declare the initial value in the ref or reactive state, not in the markup.

On a Vue 3 text input, .lazy syncs on change instead of input, .trim strips surrounding whitespace, and .number casts with parseFloat. When parseFloat fails, such as on an empty field, .number keeps the original string, so the model can hold ''.

Bind the choice with v-bind: a radio or option with :value stores the raw JavaScript value, and a checkbox's true-value and false-value set what checked and unchecked store. A static value attribute always yields a string.

Vue 3 renders a derived view by iterating a computed that returns a new filtered or sorted array; sort() and reverse() mutate the source in place, so a computed must copy first, as in [...items].sort().

A script setup component is closed by default: a parent's template ref receives a proxy that exposes none of its setup bindings. The child must call defineExpose({ reset }) before any await, and the parent then calls childRef.value.reset() after mount.

A ref inside v-for collects an array of all rendered elements or component instances. Vue does not guarantee that the array matches the source list's order, so look items up by an identifier, not by index.

A Vue 3 directive reads name:argument.modifiers="value"; a bracketed argument is a JavaScript expression that must evaluate to a string, or null to remove the binding, and cannot contain spaces or quotes.

Vue 3 template expressions see only the component's scope plus a restricted globals allowlist (Math, Date, JSON and similar); window is not on it, so it resolves to undefined. Each binding must be one expression, not statements.

Register one document listener in mounted and store it keyed by the element, update the stored callback in updated when binding.value changes, and remove the listener in unmounted. Leaks come from adding in updated or never removing; stale calls come from capturing binding.value once.

Use a custom directive only when the behaviour needs direct DOM manipulation on a plain element, such as focusing or detecting outside clicks. Use a component when it renders markup, a composable for stateful logic, and built-in bindings whenever they can express it.

When a press starts in the dialog and ends on the backdrop, browsers dispatch click to the nearest common ancestor — the backdrop — so .self passes. Record whether mousedown began on the backdrop and close only if it did.