Interpolation and directives

Text interpolation displays reactive data with {{ expression }}. Directives are special attributes prefixed with v- that apply reactive behavior to the DOM.

Common directives (preview)

• v-bind / : — dynamic attributes (:class, :style, :id)
• v-on / @ — event listeners (@click, @input)
• v-if / v-else — conditional blocks (covered later in depth)
• v-for — list rendering (covered later in depth)
• v-model — two-way form binding (covered later in depth)

Dynamic classes and styles

<p :class="{ active: isActive, 'text-muted': !isActive }">Status</p>
<span :style="{ color: tone }">{{ label }}</span>

Object and array syntax for :class keeps conditional styling declarative instead of manual classList toggles.

Important interview questions and answers

1. Q: Directive vs component?
   A: Directives attach behavior to a single element; components encapsulate template + logic + reuse.
2. Q: Why mustache double braces?
   A: They delimit JavaScript expressions evaluated against the component instance and re-run when dependencies change.

Self-check

1. How do you bind a dynamic class object?
2. What happens to text inside {{ }} when the ref updates?