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…
