Vue.js Counter with Watch and Class Binding - Vue-js Typing CST Test
Loading…
Vue.js Counter with Watch and Class Binding — Vue-js Code
Watches counter changes and applies theme classes dynamically 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>Vue-js Language Guide
Vue.js is a progressive, open-source JavaScript framework for building user interfaces and single-page applications. It emphasizes simplicity, declarative rendering, and reactive data binding.
Primary Use Cases
- ▸Single-page applications (SPAs)
- ▸Interactive web interfaces and dashboards
- ▸Progressive web apps (PWAs)
- ▸Front-end integration for multi-page apps
- ▸Rapid prototyping of UI components
Notable Features
- ▸Reactive data binding with a virtual DOM
- ▸Component-based architecture
- ▸Vue CLI for project scaffolding
- ▸Single-file components (.vue files) with scoped styles
- ▸Integration with Vuex for state management
Origin & Creator
Created in 2014 by Evan You, a former Google engineer, inspired by Angular but with a simpler core.
Industrial Note
Vue.js is specialized for building modern front-end web applications and integrating into existing projects incrementally.