Tutorials covering Vue.js from fundamentals through advanced patterns. Each chapter follows a consistent structure: intro prose, key point callout, motivation section, detailed walkthroughs with code, a complete example session, quick reference tables, best practices, common pitfalls, real-world examples, ASCII diagrams, and a summary. Topics include template syntax, attribute binding, event handling, conditional and list rendering, computed properties, watchers, component communication, slots, the Composition API, reactivity internals, lifecycle hooks, and ecosystem tooling like Vite, Vue Router, and Pinia. Every chapter uses real, verifiable code with no invented data, and each builds on the previous without cross-contaminating other framework series.
The previous chapter covered event handling with v-on and the @ shorthand. It introduced modifiers briefly—.stop, .prevent, .once, and others—as suffixes that change how a handler responds to an event. This chapter takes the modifier system in full. Modifiers are not sugar. They are a declarative interface to the DOM event model, and they replace…
A click is not just a click. It can be a left click, a right click, a middle click, a Ctrl+click, a Shift+click, a Meta+click. A keypress is not just a keypress. It can be Enter, Escape, Tab, an arrow key, or a key with Ctrl, Alt, or Shift held. The browser reports all of…
A form input and a piece of component state need to stay synchronized. The user types, the state updates. The state changes, the input updates. Vue’s v-model directive expresses this two-way binding in a single attribute. Under the hood, it is shorthand for a :value binding and an @input handler—the same controlled input pattern covered…
The previous chapter introduced v-model as two-way binding and mentioned three modifiers—.lazy, .number, and .trim—as adjustments to the default behavior. This chapter covers them in full. They are small. Each one changes a single aspect of how the binding works. But those aspects matter: the timing of updates, the type of the bound value, and…
A class is a string. A style is a string. Both can be bound with :class and :style using the same expression syntax as any other attribute. But Vue provides additional syntax for these two attributes specifically, because they are the ones that change most often in response to state. A button’s class depends on…
A Vue application is a tree of components. The root component is mounted to a DOM element, and it renders child components, which render their own children. Each component is a self-contained unit: it has its own template, its own logic, and its own styles. The framework handles the communication between them. This is the…
