Q: What does this template render?

Correct answer: One <li per element in items. v-for="item in items" iterates over the items array, creating one <li per element and binding item to each element in that iteration's scope, so {{ item.name }} shows each item's own name.

Q: What is :href="url" shorthand for in a Vue template?

Correct answer: v-bind:href="url". The colon : prefix is shorthand for v-bind:, which binds an HTML attribute to a reactive expression. :href="url" and v-bind:href="url" are exactly equivalent.

Q: What is @click="handleClick" shorthand for in a Vue template?

Correct answer: v-on:click="handleClick". The @ prefix is shorthand for v-on:, which attaches an event listener. @click="handleClick" and v-on:click="handleClick" are exactly equivalent.

Q: What happens when this template renders?

Correct answer: This is invalid — v-else must be on the element immediately following the v-if element. v-else (and v-else-if) must be placed on the sibling element that immediately follows the element carrying v-if. Inserting another element (like <hr /) between them breaks that adjacency, so Vue cannot associate the v-else with the v-if and this is invalid usage.

Q: Why does Vue recommend giving each v-for item a unique :key?

Correct answer: It gives Vue a stable identity per item. The key gives Vue's virtual DOM diffing algorithm a stable identity for each item, so when the list changes (reorder, insert, remove) Vue can match old nodes to new ones correctly instead of just patching them in index order — this preserves component state and avoids visual glitches.

Question 1

In Vue 3, what is the core difference between v-if and v-show?

Accepted Answer

Correct answer: v-if adds/removes the element from the DOM. v-if conditionally renders (or destroys) the element and its component instance entirely — nothing exists in the DOM when false. v-show always renders the element and simply toggles the inline display: none CSS property, so the element stays in the DOM and keeps its component state.

Question 2

What does this template render?

Accepted Answer

Correct answer: One <li per element in items. v-for="item in items" iterates over the items array, creating one <li per element and binding item to each element in that iteration's scope, so {{ item.name }} shows each item's own name.

Question 3

What is :href="url" shorthand for in a Vue template?

Accepted Answer

Correct answer: v-bind:href="url". The colon : prefix is shorthand for v-bind:, which binds an HTML attribute to a reactive expression. :href="url" and v-bind:href="url" are exactly equivalent.

Question 4

What is @click="handleClick" shorthand for in a Vue template?

Accepted Answer

Correct answer: v-on:click="handleClick". The @ prefix is shorthand for v-on:, which attaches an event listener. @click="handleClick" and v-on:click="handleClick" are exactly equivalent.

Question 5

What happens when this template renders?

Accepted Answer

Correct answer: This is invalid — v-else must be on the element immediately following the v-if element. v-else (and v-else-if) must be placed on the sibling element that immediately follows the element carrying v-if. Inserting another element (like <hr /) between them breaks that adjacency, so Vue cannot associate the v-else with the v-if and this is invalid usage.

Question 6

Why does Vue recommend giving each v-for item a unique :key?

Accepted Answer

Correct answer: It gives Vue a stable identity per item. The key gives Vue's virtual DOM diffing algorithm a stable identity for each item, so when the list changes (reorder, insert, remove) Vue can match old nodes to new ones correctly instead of just patching them in index order — this preserves component state and avoids visual glitches.

Frontend Vue Directives Templates Interview Questions

Sample questions

By specialization

By seniority

Other fields