built-in-directives

24 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

v-text directive signature and usage

v-text updates the element's textContent property and expects a string value. It overwrites any existing content inside the element. To update only part of the textContent, use mustache interpolations instead. Example: <span v-text="msg"></span> is equivalent to <span>{{msg}}</span>.

v-html directive signature and usage

v-html updates the element's innerHTML property and expects a string value. Contents are inserted as plain HTML and Vue template syntax will not be processed. In Single-File Components, scoped styles will not apply to v-html content because the HTML is not processed by Vue's template compiler. Use CSS modules or an additional global <style> element with manual scoping strategy like BEM if needed.

v-html security warning

Dynamically rendering arbitrary HTML can lead to XSS attacks. Only use v-html on trusted content and never on user-provided content.

v-show directive signature and usage

v-show toggles the element's visibility based on the truthy-ness of the expression value and expects any value. It works by setting the display CSS property via inline styles and tries to respect the initial display value when the element is visible. It also triggers transitions when its condition changes.

v-if directive signature and usage

v-if conditionally renders an element or template fragment based on the truthy-ness of the expression value and expects any value. When a v-if element is toggled, the element and its contained directives/components are destroyed and re-constructed. If the initial condition is falsy, the inner content won't be rendered at all. Can be used on <template> to denote a conditional block containing only text or multiple elements. Triggers transitions when its condition changes.

v-if has higher priority than v-for

When v-if and v-for are used together, v-if has a higher priority than v-for. Using these two directives together on one element is not recommended.

v-else-if directive signature and usage

v-else-if denotes the else if block for v-if and can be chained, expecting any value. Restriction: the previous sibling element must have v-if or v-else-if. Can be used on <template> to denote a conditional block containing only text or multiple elements.

v-for directive syntax and usage

v-for renders the element or template block multiple times based on source data and expects Array | Object | number | string | Iterable. The directive's value must use special syntax 'alias in expression' to provide an alias for the current element being iterated on. Can specify an alias for the index: <div v-for="(item, index) in items"></div>. For objects: <div v-for="(value, key) in object"></div> or <div v-for="(value, name, index) in object"></div>. Use the key special attribute to force reordering: <div v-for="item in items" :key="item.id"></div>. v-for can work on values that implement the Iterable Protocol, including native Map and Set.

v-on directive signature and modifiers

v-on attaches an event listener to the element with shorthand @. Expects Function | Inline Statement | Object (without argument). Optional argument: event (not needed if using Object syntax). Modifiers: .stop (calls event.stopPropagation()), .prevent (calls event.preventDefault()), .capture (add event listener in capture mode), .self (only trigger if event was dispatched from this element), .{keyAlias} (only trigger on certain keys), .once (trigger handler at most once), .left (only trigger for left button mouse events), .right (only trigger for right button mouse events), .middle (only trigger for middle button mouse events), .passive (attaches DOM event with { passive: true }).

v-on usage details

The event type is denoted by the argument. The expression can be a method name, inline statement, or omitted if modifiers are present. When used on a normal element, it listens to native DOM events only. When used on a custom element component, it listens to custom events emitted on that child component. When listening to native DOM events, the method receives the native event as the only argument. With inline statement, the statement has access to special $event property: v-on:click="handle('ok', $event)". v-on supports binding to an object of event/listener pairs without an argument, but object syntax does not support any modifiers.

v-bind directive signature and modifiers

v-bind dynamically binds one or more attributes, or a component prop to an expression. Shorthand: : or . (when using .prop modifier). Can omit value when attribute and bound value have the same name (requires 3.4+). Expects any (with argument) | Object (without argument). Optional argument: attrOrProp. Modifiers: .camel (transform kebab-case attribute name into camelCase), .prop (force binding to be set as DOM property, 3.2+), .attr (force binding to be set as DOM attribute, 3.2+).

v-bind usage details

When binding class or style attribute, v-bind supports additional value types such as Array or Objects. Vue by default checks whether the element has the key defined as a property using an 'in' operator check. If the property is defined, Vue sets the value as a DOM property instead of an attribute. Override this behavior by explicitly using .prop or .attr modifiers, sometimes necessary with custom elements. When used for component prop binding, the prop must be properly declared in the child component. When used without argument, can bind an object containing attribute name-value pairs.

v-bind .prop shorthand with dot notation

The .prop modifier has a dedicated shorthand using dot notation: <div .someProperty="someObject"></div> is equivalent to <div :someProperty.prop="someObject"></div>.

v-bind .camel modifier for SVG attributes

The .camel modifier allows camelizing a v-bind attribute name when using in-DOM templates, such as for the SVG viewBox attribute: <svg :view-box.camel="viewBox"></svg>. .camel is not needed if using string templates or pre-compiling the template with a build step.

v-model directive signature and usage

v-model creates a two-way binding on a form input element or a component. Expects value type that varies based on the form input element or output of components. Limited to: <input>, <select>, <textarea>, and components. Modifiers: .lazy (listen to change events instead of input), .number (cast valid input string to numbers), .trim (trim input).

v-slot directive signature and usage

v-slot denotes named slots or scoped slots that expect to receive props. Shorthand: #. Expects JavaScript expression that is valid in a function argument position, including support for destructuring. Optional - only needed if expecting props to be passed to the slot. Optional argument: slot name (defaults to 'default'). Limited to: <template> and components (for a lone default slot with props).

v-pre directive signature and usage

v-pre skips compilation for an element and all its children and does not expect an expression. Inside an element with v-pre, all Vue template syntax will be preserved and rendered as-is. The most common use case is displaying raw mustache tags.

v-once directive signature and usage

v-once renders an element and component once only and skips future updates, and does not expect an expression. On subsequent re-renders, the element/component and all its children are treated as static content and skipped. Can be used to optimize update performance.

v-memo directive signature and usage

v-memo memoizes a sub-tree of the template and is only supported in 3.2+. Expects a fixed-length array of dependency values to compare for memoization. If every value in the array was the same as last render, then updates for the entire sub-tree will be skipped. Example: <div v-memo="[valueA, valueB]">. When the component re-renders, if both valueA and valueB remain the same, all updates for this <div> and its children will be skipped, and even Virtual DOM VNode creation will be skipped since the memoized copy of the sub-tree can be reused.

v-memo memoization array requirements

It is important to specify the memoization array correctly in v-memo, otherwise updates that should be applied may be skipped. v-memo with an empty dependency array (v-memo="[]") would be functionally equivalent to v-once.

v-memo with v-for usage

v-memo is provided solely for micro optimizations in performance-critical scenarios and should be rarely needed. The most common case where this may prove helpful is when rendering large v-for lists (where length > 1000). v-memo can be used on the same element as v-for, but v-memo does not work inside v-for. When using v-memo with v-for and the item is keyed, Vue automatically infers the item's key from the `:key` binding and you don't need to include it in the memo dependency array.

v-cloak directive signature and usage

v-cloak is used to hide un-compiled template until it is ready and does not expect an expression. This directive is only needed in no-build-step setups. When using in-DOM templates, there can be a flash of un-compiled templates where the user may see raw mustache tags until the mounted component replaces them with rendered content. v-cloak remains on the element until the associated component instance is mounted. Combined with CSS rules such as [v-cloak] { display: none }, it can hide raw templates until the component is ready.

v-bind short syntax with colon

The :title syntax is a short form for v-bind:title, used for reactively binding element attributes and properties to state.

Reactive attribute binding with v-bind

v-bind is used to reactively bind element attributes and properties to component state.

Give your agent this brain