Directive with arguments and modifiers in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a directive argument in Vue directives?

A directive argument is a way to pass a specific target or key to a Vue directive, written after a colon (:). For example, in v-bind:href, href is the argument specifying what to bind.

beginner

How do modifiers change the behavior of Vue directives?

Modifiers are special suffixes added after a dot (.) in a directive to tweak its behavior. For example, v-on:click.prevent prevents the default click action.

beginner

Example: What does v-on:submit.prevent do?

It listens for the submit event on a form but prevents the browser's default submit action, allowing you to handle it with JavaScript instead.

intermediate

How do you access directive arguments and modifiers inside a custom directive?

Inside a custom directive's hook, you can access binding.arg for the argument and binding.modifiers for an object of modifiers (true/false).

intermediate

Why use arguments and modifiers in Vue directives?

They let you write flexible and reusable directives by customizing what the directive targets (argument) and how it behaves (modifiers) without writing multiple directives.

In Vue, what symbol introduces a directive argument?

A @

B .

C #

D :

Arguments come after a colon (:), like in v-bind:src where 'src' is the argument.

What does the modifier '.stop' do in a Vue directive like v-on:click.stop?

A Delays the event

B Prevents the default browser action

C Stops event propagation

D Makes the event passive

The '.stop' modifier stops the event from bubbling up to parent elements.

How do you check if a modifier is used inside a custom directive?

A binding.modifiers

B binding.value

C binding.expression

D binding.arg

Modifiers are available as an object in binding.modifiers with keys as modifier names.

Which of these is a valid Vue directive with argument and modifier?

A v-on:click.stop

B v-bind:href.prevent

C v-model.lazy

D v-if:condition

v-on:click.stop uses an argument 'click' and a modifier 'stop'.

What is the purpose of the argument in a directive like v-bind:title?

A To specify the event type

B To specify the property to bind

C To add a CSS class

D To define a variable

The argument 'title' tells v-bind which attribute to bind the value to.

Explain how arguments and modifiers work together in Vue directives and why they are useful.

Think about how you tell a directive what to do and how to do it.

Describe how you would access and use directive arguments and modifiers inside a custom Vue directive.

Look inside the binding object passed to directive hooks.