directives & binding

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

Custom directives in <script setup>

Globally registered custom directives work normally in `<script setup>`. Local custom directives must follow the naming scheme `vNameOfDirective`. Example: const vMyDirective = {beforeMount: (el) => {...}} allows using v-my-directive in templates.

Importing and renaming custom directives

When importing a directive from elsewhere in `<script setup>`, it can be renamed to fit the required naming scheme. Example: import { myDirective as vMyDirective } from './MyDirective.js'

v-bind directive for attribute binding

The v-bind directive keeps an HTML attribute in sync with a component property. The syntax is v-bind:attributeName="propertyName", for example <div v-bind:id="dynamicId"></div>. If the bound value is null or undefined, the attribute will be removed from the rendered element.

v-bind shorthand syntax

The v-bind directive has a dedicated shorthand syntax using a colon: <div :id="dynamicId"></div> instead of <div v-bind:id="dynamicId"></div>.

v-bind same-name shorthand (Vue 3.4+)

In Vue 3.4+, if the attribute has the same name as the variable being bound, the syntax can be shortened to omit the value: <div :id></div> is equivalent to <div :id="id"></div>. This also works with full syntax: <div v-bind:id></div>.

v-bind with boolean attributes

The v-bind directive handles boolean attributes specially. The disabled attribute will be included if the bound value is truthy or an empty string. For other falsy values the attribute will be omitted. Example: <button :disabled="isButtonDisabled">Button</button>.

v-bind without argument for multiple attributes

When v-bind is used without an argument, it can bind multiple attributes at once from a JavaScript object: <div v-bind="objectOfAttrs"></div> where objectOfAttrs is an object like { id: 'container', class: 'wrapper', style: 'background-color:green' }.

JavaScript expressions in bindings

Vue supports the full power of JavaScript expressions inside data bindings, including arithmetic operations, ternary operators, and method calls. Examples: {{ number + 1 }}, {{ ok ? 'YES' : 'NO' }}, {{ message.split('').reverse().join('') }}, <div :id="`list-${id}`"></div>.

Binding expressions can only contain one single expression

Each binding can only contain one single expression. An expression is code that can be evaluated to a value; a simple check is whether it can be used after 'return'. Statements like var a = 1 or flow control like if statements do not work.

Functions in binding expressions should not have side effects

Functions called inside binding expressions will be called every time the component updates, so they should not have any side effects, such as changing data or triggering asynchronous operations.

Template expressions have restricted global access

Template expressions are sandboxed and only have access to a restricted list of globals such as Math and Date. User-attached properties on window are not accessible. Additional globals can be defined by adding them to app.config.globalProperties.

Directives are special attributes with v- prefix

Directives are special attributes prefixed with v- that apply special reactive behavior to the rendered DOM. Vue provides built-in directives including v-html, v-bind, v-if, v-on, v-for, and v-slot.

Directive arguments syntax

Some directives can take an argument denoted by a colon after the directive name. For example, v-bind:href="url" where href is the argument. The v-on directive also takes arguments representing event names: v-on:click="doSomething".

Dynamic directive arguments with square brackets

JavaScript expressions can be used as directive arguments by wrapping them with square brackets: <a v-bind:[attributeName]="url"></a> or shorthand <a :[attributeName]="url"></a>. Similarly for v-on: <a v-on:[eventName]="doSomething"></a> or <a @[eventName]="doSomething"></a>.

Dynamic argument value constraints

Dynamic arguments are expected to evaluate to a string, with the exception of null. The special value null can be used to explicitly remove the binding. Any other non-string value will trigger a warning.

Dynamic argument syntax constraints

Dynamic argument expressions have syntax constraints because certain characters like spaces and quotes are invalid inside HTML attribute names. Example: <a :['foo' + bar]="value"></a> triggers a compiler warning. In in-DOM templates, avoid naming keys with uppercase characters as browsers coerce attribute names to lowercase. Single-File Component templates are not subject to this constraint.

Modifiers are directive postfixes with dot notation

Modifiers are special postfixes denoted by a dot that indicate a directive should be bound in a special way. Example: the .prevent modifier tells v-on to call event.preventDefault() on the triggered event: <form @submit.prevent="onSubmit">...</form>.

v-text directive usage and differences from mustache

v-text updates an element's text content by setting the textContent property, which overwrites any existing content inside the element. v-text expects a string value. It is equivalent to using mustache interpolation syntax. Use mustache interpolations instead of v-text if you need to update only part of the text content while keeping other content.

v-html directive and security warning

v-html updates an element's innerHTML by inserting contents as plain HTML. Vue template syntax will not be processed inside v-html. Never use v-html on user-provided content due to XSS attack risks; only use it on trusted content. In Single-File Components, scoped styles do 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 manual scoping like BEM to target v-html content.

v-bind directive shorthand and usage

v-bind dynamically binds one or more attributes, or a component prop to an expression. Shorthand: : or . (when using .prop modifier). Shorthand for omitting value: when attribute and bound value has the same name, use just :attributeName (requires 3.4+). It expects any value type (with argument) or Object (without argument). The argument is attrOrProp (optional). When used without an argument, can bind an object containing attribute name-value pairs.

v-bind modifiers: camel, prop, and attr

v-bind has three modifiers: .camel transforms kebab-case attribute names into camelCase (useful in in-DOM templates for SVG viewBox); .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+). The .prop modifier has a dedicated shorthand '.': <div .someProperty="someObject"> is equivalent to <div :someProperty.prop="someObject">. The .camel modifier is not needed when using string templates or pre-compiling templates.

v-bind with class and style attributes

When used to bind the class or style attribute, v-bind supports additional value types such as Array or Objects. Class binding examples: :class="{ red: isRed }" or :class="[classA, classB]" or :class="[classA, { classB: isB, classC: isC }]". Style binding examples: :style="{ fontSize: size + 'px' }" or :style="[styleObjectA, styleObjectB]".

v-bind property versus attribute behavior

When setting a binding on an element, 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 will set the value as a DOM property instead of an attribute. This should work in most cases, but you can override this behavior by explicitly using .prop or .attr modifiers. This is sometimes necessary when working with custom elements.

v-pre directive for skipping compilation

v-pre skips compilation for an 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 for static content

v-once renders an 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-once can be used on single elements, elements with children, components, and with v-for directives.

v-cloak directive for hiding uncompiled templates

v-cloak is used to hide un-compiled template until it is ready. It 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 sees raw mustache tags until the mounted component replaces them. 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 be used to hide raw templates until the component is ready. It does not expect an expression.

Dynamic attribute binding with v-bind

Element attributes and properties can be reactively bound to state using the v-bind directive. This allows attributes to update when the state changes.

Colon shorthand for v-bind

The colon syntax `:attribute` is shorthand for `v-bind:attribute`. For example, `:title` is equivalent to `v-bind:title`.

Give your agent this brain