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

`v-if` conditionally renders elements by actually adding or removing them from the DOM. When false, the element and its component are destroyed.

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` always renders the element but controls visibility with `display: none`. `v-if` actually mounts/unmounts the element and its component lifecycle.

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

`@click` is the shorthand for `v-on:click`. It binds a Vue event listener that calls `handleClick` when the button is clicked.

Question 4

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

Accepted Answer

Calls event.preventDefault() on the event

Answer

`.prevent` calls `event.preventDefault()`, which prevents the browser's default action for the event (e.g., stopping form submission or link navigation).

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

`v-for="item in items"` iterates over the `items` array. The `:key` attribute is required for Vue to efficiently track and reorder list items.

Vue JS Practice Test

Vue JS Practice Test

Vue JS Directives and Event Handling