Template Syntax
Vue's HTML-based template language: interpolation, directives for conditionals, lists, bindings, events and forms, plus custom directives and template refs. A fast test of Vue fluency.
part ofVue.jsoverview, primer and where to startread it →on this pageshowhide
explore
- Interpolation & Expressions5 questions
- V-If & V-Show4 questions
- Looping with V-For4 questions
- Class, Style & Attribute Binding5 questions
- Event Listeners & Modifiers5 questions
- Form Input Bindings5 questions
- Custom DOM Directives5 questions
- Element & Child Refs5 questions
questions
page 2 of 2A Vue 3 component's template ref reads null exactly when code needs the element; what usually causes that, and how do you fix each cause?
basics
~20 sA template ref is null before mount, while its element sits in an unrendered v-if branch, right after state changes but before the re-render, or when the ref key or name does not match. Read it later, await nextTick(), or fix the link.
In Vue 3, what do the v-pre and v-cloak directives do, and why does a build-step SFC app not need v-cloak?
basics
~20 sVue's v-pre skips compiling an element and its children, so mustaches render literally; v-cloak stays on an element until its component mounts, letting CSS hide raw in-DOM templates. SFCs are precompiled, so no raw template ever flashes.
In Vue 3, what happens when you apply a custom directive to a component instead of a plain element, and why is it discouraged?
basics
~20 sThe directive is applied to the component's root element, much like fallthrough attributes. With several root nodes it is ignored and a development warning appears, and unlike attributes it cannot be redirected with v-bind="$attrs", so the docs advise against it.
In Vue 3, how does the template compiler treat v-on's .once, .capture and .passive differently from .stop, .prevent, .self and the mouse-button modifiers?
basics
~10 sVue's compiler turns .once, .capture and .passive into addEventListener options, while .stop, .prevent, .self, system keys and mouse buttons become runtime guards wrapped around the handler. @click.right listens to contextmenu and @click.middle to mouseup.
In Vue 3, when is a function ref such as `:ref="(el) => ..."` called, and what arguments does it receive?
basics
~20 sA function bound with :ref is called with the element or component instance when it mounts, again on each update of that element, and with null when it unmounts. You decide where to store the value, which suits maps keyed by id.
A Vue 3 template binds an object to an element and it arrives as "[object Object]", while another binding never shows in the markup — how does v-bind choose property or attribute, and when do .prop and .attr help?
basics
~20 sOn an element, Vue 3's v-bind sets a DOM property when the key exists on the element and an attribute otherwise, with a few forced exceptions. .prop forces a property, .attr an attribute, and .camel camelizes names in in-DOM templates.
A Vue 3 dropdown uses v-show="open", yet it stays invisible when open is true; what in its CSS or markup explains this?
basics
~20 sVue's v-show only writes inline display: when true it restores the element's original inline value, often empty, so a stylesheet rule setting display: none still hides it. Placing v-show on <template> or a multi-root component also fails.
A Vue 3 newsletter form previews a display name through v-model, but for Japanese users the preview lags until each word is confirmed — why, and how do you fix it?
basics
~20 sVue 3's text v-model skips input events while an IME composition is active and syncs once when it ends. For live updates during composition, replace v-model with a :value binding plus your own @input handler.
showing 31–38 of 38