Learn VUE-JS with Real Code Examples

<template>
    <div :class="{ 'dark-theme': isDark, 'light-theme': !isDark }">
        <h2>Counter: {{ count }}</h2>
        <div>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="reset">Reset</button>
        </div>
        <button @click="toggleTheme">Switch to {{ isDark ? 'Light' : 'Dark' }} Theme</button>
    </div>
</template>

<script>
export default {
    data() {
        return { count: 0, isDark: false };
    },
    methods: {
        increment() { this.count++; },
        decrement() { this.count--; },
        reset() { this.count = 0; },
        toggleTheme() { this.isDark = !this.isDark; }
    }
};
</script>

<style>
.dark-theme { background-color: #222; color: #eee; }
.light-theme { background-color: #fff; color: #000; }
</style>

Demonstrates a simple counter component using Vue.js reactive data and methods.

<template>
    <div>
        <h2>{{ message }}</h2>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
    </div>
</template>

<script>
export default {
    data() { return { count: 0 }; },
    methods: { increment() { this.count++; }, decrement() { this.count--; } },
    computed: { message() { return `Counter: ${this.count}`; } }
};
</script>

Uses a computed property to display a message based on the counter value in Vue.js.

<template>
    <div>
        <h2>Counter: {{ count }}</h2>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
    </div>
</template>

<script>
export default {
    data() { return { count: 0 }; },
    methods: { increment() { this.count++; }, decrement() { this.count--; } },
    watch: { count(newVal) { console.log('Counter changed to:', newVal); } }
};
</script>

Uses a watcher to log changes when the counter value updates in Vue.js.

<template>
    <div>
        <h2>Counter: {{ count }}</h2>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="reset">Reset</button>
    </div>
</template>

<script>
export default {
    data() { return { count: parseInt(localStorage.getItem('count') || '0', 10) }; },
    methods: {
        increment() { this.count++; this.save(); },
        decrement() { this.count--; this.save(); },
        reset() { this.count = 0; this.save(); },
        save() { localStorage.setItem('count', this.count); }
    }
};
</script>

Persists the counter value using localStorage in Vue.js.

<template>
    <div>
        <h2>Counter: {{ count }}</h2>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
    </div>
</template>

<script>
export default {
    props: { initialCount: { type: Number, default: 0 } },
    data() { return { count: this.initialCount }; },
    methods: { increment() { this.count++; }, decrement() { this.count--; } }
};
</script>

Receives an initial counter value via props in Vue.js.

<template>
    <div>
        <h2>Counter: {{ count }}</h2>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
    </div>
</template>

<script>
export default {
    data() { return { count: 0 }; },
    methods: {
        increment() { this.count++; this.$emit('update', this.count); },
        decrement() { this.count--; this.$emit('update', this.count); }
    }
};
</script>

Emits counter value changes to a parent component in Vue.js using $emit.

<template>
    <div :class="themeClass">
        <h2>Counter: {{ count }}</h2>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="toggleTheme">Toggle Theme</button>
    </div>
</template>

<script>
export default {
    data() { return { count: 0, isDark: false }; },
    computed: { themeClass() { return this.isDark ? 'dark-theme' : 'light-theme'; } },
    methods: { increment() { this.count++; }, decrement() { this.count--; }, toggleTheme() { this.isDark = !this.isDark; } }
};
</script>

Demonstrates dynamic class binding for dark/light theme in Vue.js.

<template>
    <div :class="{ 'dark-theme': isDark, 'light-theme': !isDark }">
        <h2>Counter: {{ count }}</h2>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
    </div>
</template>

<script>
export default {
    data() { return { count: 0, isDark: false }; },
    methods: { increment() { this.count++; }, decrement() { this.count--; } },
    watch: { count(newVal) { this.isDark = newVal % 2 === 0; } }
};
</script>

Watches counter changes and applies theme classes dynamically in Vue.js.

<template>
    <div>
        <h2>Counter: {{ count }}</h2>
        <slot name="controls">
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        </slot>
    </div>
</template>

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

Uses slots to allow custom button placement in Vue.js counter component.

<template>
    <div>
        <h2>Counter: {{ count }}</h2>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
    </div>
</template>

<script>
export default {
    data() { return { count: 0 }; },
    mounted() { console.log('Component mounted. Counter initialized to', this.count); },
    methods: { increment() { this.count++; }, decrement() { this.count--; } }
};
</script>

Demonstrates use of mounted lifecycle hook to initialize counter in Vue.js.