Vue.js Counter with LocalStorage - Vue-js Typing CST Test
Loading…
Vue.js Counter with LocalStorage — Vue-js Code
Persists the counter value using localStorage 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>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.