Vue Directives

Directives are special attributes starting with

v-

. Each directive is like an instruction for the Mars base control system.

v-bind - Attribute Binding

1<template>
2  <div class="control-panel" style="background: #0a0e27; padding: 1rem;">
3    <!-- Full syntax -->
4    <img v-bind:src="sensorImage" v-bind:alt="sensorName">
5
6    <!-- Shorthand syntax (recommended) -->
7    <img :src="sensorImage" :alt="sensorName">
8
9    <!-- Dynamic attributes -->
10    <a :href="documentationUrl" :class="linkClass">Documentation</a>
11
12    <!-- Boolean attributes -->
13    <button :disabled="isProcessing" class="btn-neon">Launch</button>
14  </div>
15</template>
16
17<script setup>
18import { ref } from 'vue'
19
20const sensorImage = ref('/images/oxygen-sensor.png')
21const sensorName = ref('Oxygen Sensor MK-7')
22const documentationUrl = ref('https://nova-lab.mars/docs')
23const linkClass = ref('neon-link')
24const isProcessing = ref(false)
25</script>
26
27<style>
28.btn-neon {
29  background: transparent;
30  border: 2px solid #00ff88;
31  color: #00ff88;
32  padding: 0.5rem 1rem;
33  cursor: pointer;
34}
35.btn-neon:hover {
36  background: #00ff8822;
37  box-shadow: 0 0 10px #00ff88;
38}
39</style>

v-on - Event Handling

1<template>
2  <div class="reactor-controls" style="background: #0a0e27; color: #00b4d8;">
3    <!-- Full syntax -->
4    <button v-on:click="handleActivation">Activate</button>
5
6    <!-- Shorthand syntax (recommended) -->
7    <button @click="handleActivation" class="btn-reactor">Activate Reactor</button>
8
9    <!-- Inline handler -->
10    <button @click="powerLevel++">Increase Power</button>
11
12    <!-- With argument -->
13    <button @click="sendSignal('ALPHA-BASE')">Send Signal</button>
14
15    <!-- With event object -->
16    <button @click="handleActivation($event)">Event Info</button>
17  </div>
18</template>
19
20<script setup>
21import { ref } from 'vue'
22
23const powerLevel = ref(0)
24
25function handleActivation(event) {
26  console.log('Reactor activated!', event)
27}
28
29function sendSignal(baseCode) {
30  alert(`Sending signal to: ${baseCode}`)
31}
32</script>

Event Modifiers

1<template>
2  <div class="mission-control">
3    <!-- Prevent default -->
4    <form @submit.prevent="onSubmit" class="mission-form">
5
6    <!-- Stop propagation -->
7    <div @click.stop="onClick" class="stop-zone">
8
9    <!-- Only once -->
10    <button @click.once="launchSequence" class="btn-launch">Start Sequence</button>
11
12    <!-- Capture mode -->
13    <div @click.capture="onCapture" class="capture-zone">
14
15    <!-- Self only -->
16    <div @click.self="onSelf" class="self-zone">
17
18    <!-- Combination -->
19    <a @click.stop.prevent="onClick" class="safe-link">
20  </div>
21</template>