template syntax & directives

23 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 - update element text content

v-text updates the element's textContent property, which will overwrite any existing content inside the element. It expects a string value. If you need to update only part of the textContent, use mustache interpolations instead. v-text="msg" is equivalent to {{msg}}.

v-html directive - update element innerHTML

v-html updates the element's innerHTML with the provided string value. Contents are inserted as plain HTML and Vue template syntax will not be processed. Security warning: dynamically rendering arbitrary HTML can lead to XSS attacks - only use v-html on trusted content, never on user-provided content. In Single-File Components, scoped styles will not apply to content inside v-html because that HTML is not processed by Vue's template compiler. Use CSS modules or an additional global <style> element with a manual scoping strategy like BEM to target v-html content.

v-show directive - toggle visibility with CSS display

v-show toggles the element's visibility by setting the display CSS property via inline styles. It respects the initial display value when the element is visible. It triggers transitions when its condition changes. It expects any value type.

v-if directive - conditionally render element

v-if conditionally renders an element or template fragment based on the truthy-ness of the expression value. When a v-if element is toggled, the element and its contained directives and 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. This directive triggers transitions when its condition changes. When used together with v-for, v-if has a higher priority than v-for, and using these two directives together on one element is not recommended.

v-else-if directive - else if block for v-if chain

v-else-if denotes the else if block for v-if and can be chained. It expects any value type. 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 - render element multiple times

v-for renders the element or template block multiple times based on source data. It expects Array, Object, number, string, or Iterable. The directive's value must use the special syntax 'alias in expression' to provide an alias for the current element being iterated on. You can also specify an alias for the index or key: (item, index) in items or (value, key) in object or (value, name, index) in object. The default behavior tries to patch elements in-place without moving them. To force reordering, provide an ordering hint with the key special attribute. v-for can work on values implementing the Iterable Protocol, including native Map and Set.

v-on directive - attach event listener

v-on attaches an event listener to the element. Shorthand is @. It expects Function, Inline Statement, or Object (without argument). Argument is 'event' (optional if using Object syntax). The event type is denoted by the argument. 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. If using inline statement, the statement has access to the special $event property. v-on also supports binding to an object of event/listener pairs without an argument, but the object syntax does not support any modifiers.

v-on modifiers

v-on supports these modifiers: .stop calls event.stopPropagation(); .prevent calls event.preventDefault(); .capture adds event listener in capture mode; .self only triggers handler if event was dispatched from this element; .{keyAlias} only triggers handler on certain keys; .once triggers handler at most once; .left only triggers handler for left button mouse events; .right only triggers handler for right button mouse events; .middle only triggers handler for middle button mouse events; .passive attaches a DOM event with { passive: true }.

v-bind directive - bind attributes and props

v-bind dynamically binds one or more attributes or a component prop to an expression. Shorthand is : or . (when using .prop modifier). Without value, it requires 3.4+ and expands when attribute and bound value have the same name. It expects any value (with argument) or Object (without argument). Argument is 'attrOrProp' (optional). When used to bind class or style attribute, v-bind supports additional value types such as Array or Objects. By default, Vue 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. When used without an argument, it can bind an object containing attribute name-value pairs.

v-bind modifiers

v-bind supports these modifiers: .camel transforms the kebab-case attribute name into camelCase; .prop forces a binding to be set as a DOM property (3.2+); .attr forces a binding to be set as a DOM attribute (3.2+).

v-bind .prop shorthand

The .prop modifier has a dedicated shorthand using . notation: :someProperty.prop="someObject" is equivalent to .someProperty="someObject".

v-bind .camel modifier for in-DOM templates

.camel modifier allows camelizing a v-bind attribute name when using in-DOM templates. For example, for the SVG viewBox attribute: :view-box.camel="viewBox". The .camel modifier is not needed if you are using string templates or pre-compiling the template with a build step.

v-model directive - two-way binding

v-model creates a two-way binding on a form input element or a component. It expects values that vary based on the form input element or output of components. It is limited to: <input>, <select>, <textarea>, and components. Modifiers are .lazy (listen to change events instead of input), .number (cast valid input string to numbers), and .trim (trim input).

v-pre directive - skip compilation

v-pre skips compilation for the element and all its children. It does not expect an expression. Inside the 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 - render element once only

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

v-cloak directive - hide un-compiled template

v-cloak is used to hide un-compiled template until it is ready. It 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 will remain 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.

Why you should not use v-if with v-for on the same element

When used together, v-if has a higher priority than v-for. Using these two directives together on one element is not recommended because of prioritization issues and performance considerations. See the list rendering guide for details on proper alternatives.

v-on event handler with $event special property

When using an inline statement with v-on, the statement has access to the special $event property which provides the native DOM event. Example: v-on:click="handle('ok', $event)" passes the event as the second argument.

v-for syntax with destructuring

v-for supports destructuring syntax. Basic pattern: (item, index) in items for arrays. For objects: (value, key) in object or (value, name, index) in object for accessing the value, key, and index positions.

v-on dynamic event example

v-on supports dynamic event names using square brackets: v-on:[event]="doThis" or @[event]="doThis" in shorthand, where the event variable contains the event name to listen to.

v-bind same-name shorthand expansion

In Vue 3.4+, v-bind supports omitting the value when the attribute and bound value have the same name. :src expands to :src="src".

v-bind class binding with object and array syntax

v-bind supports binding class with object syntax: :class="{ red: isRed }" and array syntax: :class="[classA, classB]" or mixed: :class="[classA, { classB: isB, classC: isC }]".

v-bind style binding

v-bind supports binding style with object syntax: :style="{ fontSize: size + 'px' }" and array syntax: :style="[styleObjectA, styleObjectB]".

Give your agent this brain