Directive Hooks — Arguments, Modifiers, Values

In the NOVA LAB Command Center, every system requires precise parameters. Vue directives offer a rich set of data through the

binding

object.

The Binding Object

Each directive hook receives two main parameters:

el

(the DOM element) and

binding

(an object with data):

1app.directive('demo', {
2  mounted(el, binding) {
3    // binding.value    — the passed value: v-demo="123" => 123
4    // binding.arg      — the argument: v-demo:color => 'color'
5    // binding.modifiers — modifiers: v-demo.bold => { bold: true }
6    // binding.oldValue — the previous value (in updated)
7  }
8})

Directive Value: binding.value

The value is the JavaScript expression passed after

=

:

1<template>
2  <div v-color="'#00ff88'">Green text</div>
3  <div v-color="themeColor">Dynamic color</div>
4  <div v-color="{ bg: '#0a0e27', text: '#00ff88' }">Object</div>
5</template>

1app.directive('color', (el, binding) => {
2  if (typeof binding.value === 'string') {
3    el.style.color = binding.value
4  } else {
5    el.style.backgroundColor = binding.value.bg
6    el.style.color = binding.value.text
7  }
8})

Arguments: binding.arg

The argument is the part after the colon — it lets you specify what the directive should modify:

1<template>
2  <div v-style:color="'#00ff88'">Text color</div>
3  <div v-style:backgroundColor="'#0a0e27'">Background color</div>
4  <div v-style:fontSize="'20px'">Font size</div>
5</template>

1app.directive('style', (el, binding) => {
2  if (binding.arg) {
3    el.style[binding.arg] = binding.value
4  }
5})

Dynamic Arguments

The argument can be dynamic — use square brackets:

1<script setup>
2import { ref } from 'vue'
3const prop = ref('color')
4</script>
5
6<template>
7  <div v-style:[prop]="'#00ff88'">Dynamic attribute</div>
8</template>

Modifiers: binding.modifiers

Modifiers are boolean flags after a dot:

1<template>
2  <p v-format.bold.uppercase>nova lab station</p>
3</template>

1app.directive('format', (el, binding) => {
2  if (binding.modifiers.bold) {
3    el.style.fontWeight = 'bold'
4  }
5  if (binding.modifiers.uppercase) {
6    el.textContent = el.textContent.toUpperCase()
7  }
8  if (binding.modifiers.italic) {
9    el.style.fontStyle = 'italic'
10  }
11})

Putting It All Together

Full directive syntax:

1v-name:argument.modifier1.modifier2="value"

Example:

1<div v-tooltip:top.slow="'Station information'">
2  Hover over me
3</div>

Where:

• tooltip

  — directive name

• top

  — argument (position)

• slow

  — modifier (animation)

• 'Station information'

  — value (text)