<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Welcome to Vue.js',
      description: 'This is a simple example of using data.'
    };
  }
};
</script>

Welcome to Vue.js
This is a simple example of using data.

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="updateMessage">Click Me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  methods: {
    updateMessage() {
      this.message = 'You clicked the button!';
    }
  }
};
</script>

<template>
  <div>
    <h1>{{ counter }}</h1>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    };
  },
  methods: {
    increment() {
      this.counter++;
    },
    decrement() {
      this.counter--;
    }
  }
};
</script>

<template>
  <div>
    <button @click="greet('Alice')">Greet Alice</button>
    <button @click="greet('Bob')">Greet Bob</button>
  </div>
</template>

<script>
export default {
  methods: {
    greet(name) {
      alert(`Hello, ${name}!`);
    }
  }
};
</script>

<template>
  <form @submit.prevent="submitForm">
    <input v-model="name" placeholder="Enter your name" />
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    };
  },
  methods: {
    submitForm() {
      alert(`Form submitted with name: ${this.name}`);
    }
  }
};
</script>