Vue JS Directives and Event Handling

Question 1

What is the purpose of the `v-if` directive in Vue 3?

Accepted Answer

Conditionally renders an element based on a truthy expression; the element is added/removed from the DOM

Answer

Hides an element with CSS display:none

Answer

Toggles a CSS class on an element

Answer

Conditionally applies a v-bind binding

Question 2

What is the difference between `v-if` and `v-show`?

Accepted Answer

`v-if` adds/removes elements from the DOM; `v-show` toggles CSS `display` property only

Answer

`v-show` supports v-else; `v-if` does not

Answer

`v-if` only works on components; `v-show` works on HTML elements

Answer

They are identical in behavior

Question 3

How do you listen to a DOM click event and call a method in Vue 3?

Accepted Answer

<button @click="handleClick">Click</button>

Answer

<button v-on-click="handleClick">Click</button>

Answer

<button onclick="handleClick">Click</button>

Answer

<button v-click="handleClick">Click</button>

Question 4

What does the `.prevent` event modifier do in Vue 3?

Accepted Answer

Calls event.preventDefault() on the event

Answer

Stops event propagation to parent elements

Answer

Prevents the event from firing more than once

Answer

Prevents the browser from scrolling

Question 5

How do you use `v-for` to render a list and what must you always include?

Accepted Answer

— always include a unique :key

Answer

Answer

Answer

Question 6

What is a custom directive in Vue 3 and how do you register one?

Accepted Answer

An object with lifecycle hooks (mounted, updated, etc.) registered via app.directive('name', directiveObj)

Answer

A component that acts like a built-in directive

Answer

A Composition API composable that starts with v-

Answer

A plugin that extends Vue's directive system