Binding
ELI5 — The Vibe Check
Binding is connecting your data to your HTML so they stay in sync. You bind a variable to an input and when the variable changes the input shows the new value. It's like tying a string between your code and your UI.
Real Talk
Data binding is the mechanism that synchronizes data between the component's logic and its template. One-way binding flows data from component to template (v-bind in Vue, JSX expressions in React). Two-way binding syncs in both directions (v-model in Vue).
Show Me The Code
<!-- Vue one-way binding -->
<img :src="user.avatar" :alt="user.name" />
<!-- Vue two-way binding -->
<input v-model="user.name" />
When You'll Hear This
"Bind the disabled prop to the loading state so the button disables while fetching." / "Are you using one-way or two-way binding there?"
Related Terms
Directive
Directives are special HTML attributes that tell Vue (or Angular) to do something special with an element.
Props
Props are how you pass information INTO a component, like giving a coffee machine its settings.
Reactive
Reactive means your data and your UI are connected — when the data changes, the screen updates automatically, like magic.
State
State is a component's memory — data that can change over time and causes the UI to update when it does. Think of a counter: the number is state.
Two-way Binding
Two-way binding means your data and your input field are best friends who always tell each other what changed. Type in the box and the data updates.