1. directives - app.vue and main.js

app.vue
<script setup>
import { ref } from 'vue'

// v-model
const name = ref('')

// v-if
const showMessage = ref(true)

// v-for
const subjects = ref([
  'Computer Science',
  'Mathematics',
  'Artificial Intelligence',
  'Web Development',
  'Database Management'
])

// v-bind
const buttonColor = ref('blue')

function changeColor() {
  if (buttonColor.value === 'blue') {
    buttonColor.value = 'green'
  } else if (buttonColor.value === 'green') {
    buttonColor.value = 'red'
  } else {
    buttonColor.value = 'blue'
  }
}
</script>

<template>
  <div class="container">

    <h1>Vue.js Directives</h1>
    <p class="subtitle">Practical Demonstration</p>

    <!-- 1. V-MODEL -->
    <section class="card">
      <h2>1. v-model Directive</h2>

      <input
        type="text"
        v-model="name"
        placeholder="Enter your name"
      />

      <p>Hello, <strong>{{ name }}</strong>!</p>
    </section>

    <!-- 2. V-IF -->
    <section class="card">
      <h2>2. v-if Directive</h2>

      <button @click="showMessage = !showMessage">
        Toggle Message
      </button>

      <p v-if="showMessage" class="success">
        Welcome to Vue.js!
      </p>

      <p v-else class="error">
        Message is hidden.
      </p>
    </section>

    <!-- 3. V-FOR -->
    <section class="card">
      <h2>3. v-for Directive</h2>

      <ul>
        <li
          v-for="(subject, index) in subjects"
          :key="index"
        >
          {{ index + 1 }}. {{ subject }}
        </li>
      </ul>
    </section>

    <!-- 4. V-BIND -->
    <section class="card">
      <h2>4. v-bind Directive</h2>

      <p>Click below to change the button color.</p>

      <button
        v-bind:style="{ backgroundColor: buttonColor }"
        @click="changeColor"
      >
        Change Color
      </button>

      <p>Current color: {{ buttonColor }}</p>
    </section>

  </div>
</template>

<style scoped>
* {
  box-sizing: border-box;
}

.container {
  max-width: 700px;
  margin: 30px auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  color: #333;
}

h1 {
  text-align: center;
  color: #35495e;
}

.subtitle {
  text-align: center;
  color: gray;
  margin-bottom: 25px;
}

.card {
  background: white;
  padding: 22px;
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

h2 {
  color: #42b883;
  margin-bottom: 15px;
}

input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 12px;
  font-size: 15px;
}

button {
  background: #35495e;
  color: white;
  padding: 11px 18px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin: 10px 0;
}

button:hover {
  opacity: 0.8;
}

ul {
  padding-left: 25px;
}

li {
  padding: 7px;
}

.success {
  color: green;
}

.error {
  color: red;
}
</style>

main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
