Vue Examples

Welcome to The Coding College! In this tutorial, we’ll explore a variety of practical Vue.js examples to showcase its flexibility and ease of use. These examples range from basic setups to advanced implementations, giving you insights into how Vue works in real-world scenarios.

Why Learn Through Examples?

Examples provide hands-on experience and a deeper understanding of concepts. By seeing how Vue works in different scenarios, you can quickly adapt these patterns to your own projects.

1. Basic Examples

Example 1: Hello, Vue!

<!DOCTYPE html>
<html>
<head>
  <title>Hello Vue</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>

  <script>
    const app = Vue.createApp({
      data() {
        return { message: 'Hello, Vue!' };
      }
    }).mount('#app');
  </script>
</body>
</html>

Output: Displays Hello, Vue! on the screen.

Example 2: Two-Way Data Binding

<div id="app">
  <input v-model="inputValue" placeholder="Type something" />
  <p>You typed: {{ inputValue }}</p>
</div>

<script>
  const app = Vue.createApp({
    data() {
      return { inputValue: '' };
    }
  }).mount('#app');
</script>

Output: Displays the text entered in the input field in real time.

Example 3: Conditional Rendering

<div id="app">
  <button @click="toggle">Toggle Message</button>
  <p v-if="showMessage">You can see this message!</p>
</div>

<script>
  const app = Vue.createApp({
    data() {
      return { showMessage: true };
    },
    methods: {
      toggle() {
        this.showMessage = !this.showMessage;
      }
    }
  }).mount('#app');
</script>

Output: Toggles the visibility of a message when the button is clicked.

2. Intermediate Examples

Example 4: List Rendering with v-for

<div id="app">
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
</div>

<script>
  const app = Vue.createApp({
    data() {
      return { items: ['Vue.js', 'React', 'Angular'] };
    }
  }).mount('#app');
</script>

Output: Displays a list of items dynamically rendered using v-for.

Example 5: Event Handling with v-on

<div id="app">
  <button @click="increment">Click me</button>
  <p>Clicked {{ count }} times</p>
</div>

<script>
  const app = Vue.createApp({
    data() {
      return { count: 0 };
    },
    methods: {
      increment() {
        this.count++;
      }
    }
  }).mount('#app');
</script>

Output: Increments and displays the count each time the button is clicked.

Example 6: API Fetching with Axios

<div id="app">
  <button @click="fetchData">Fetch Data</button>
  <ul>
    <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return { posts: [] };
    },
    methods: {
      async fetchData() {
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
        this.posts = response.data;
      }
    }
  }).mount('#app');
</script>

Output: Fetches and displays posts from an API when the button is clicked.

3. Advanced Examples

Example 7: Parent-Child Communication

Parent Component

<template>
  <div>
    <ChildComponent @childEvent="handleChildEvent" />
    <p>Message from child: {{ message }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  data() {
    return { message: '' };
  },
  methods: {
    handleChildEvent(payload) {
      this.message = payload;
    }
  }
};
</script>

Child Component

<template>
  <button @click="$emit('childEvent', 'Hello from child!')">Send Message</button>
</template>

<script>
export default {
  name: 'ChildComponent'
};
</script>

Example 8: Dynamic Components

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">Show A</button>
    <button @click="currentComponent = 'ComponentB'">Show B</button>
    <component :is="currentComponent" />
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return { currentComponent: 'ComponentA' };
  },
  components: { ComponentA, ComponentB }
};
</script>

Example 9: Animations with transition

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <transition name="fade">
      <p v-if="show">Hello, Vue Animations!</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return { show: true };
  },
  methods: {
    toggle() {
      this.show = !this.show;
    }
  }
};
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

Conclusion

These examples demonstrate the versatility of Vue.js for creating interactive, dynamic web applications. Whether you’re a beginner exploring the basics or an advanced user tackling complex patterns, Vue has something for everyone.

For more tutorials and examples, visit The Coding College and start building better web applications today!

Leave a Comment