Data and UI Binding

VueJunior~2 min read

In Vue.js, the template (<template>) is reactively bound to the component's data. This means: when you change a value in data(), ref(), or reactive(), the interface automatically updates without manual DOM manipulation.

1. How data binding works

Vue implements a two-way data binding mechanism (data binding):

From code -> to template: data from the component is automatically displayed in the DOM.
From template -> to code (for example, when typing text into an input): the user's changes can automatically update the data in the component (via v-model).

2. One-way binding (Data -> Template)

Example:

javascript

<template>
  <h1>Hello, {{ name }}!</h1>
</template>

<script setup>
import { ref } from 'vue'

const name = ref('Oleh')
</script>

Here:

{{ name }} - interpolation (substituting data into the template);
ref('Oleh') makes name reactive;
if you change name.value = 'Bob', Vue itself updates the text on the page.

3. Attribute binding (`v-bind`)

The v-bind: directive (or : for short) is used to dynamically change HTML attributes.

javascript

<template>
  <img :src="avatarUrl" :alt="userName" />
</template>

<script setup>
import { ref } from 'vue'

const avatarUrl = ref('/images/user.png')
const userName = ref('Oleh')
</script>

v-bind binds the attribute to a variable's value and updates the DOM on changes.

4. Event handling (`v-on`)

The v-on: directive (or @ for short) is used to connect data and actions.

javascript

<template>
  <button @click="increment">Counter: {{ count }}</button>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
function increment() {
  count.value++
}
</script>

When the user clicks the button, a function is called that changes count, and Vue automatically updates the text in the template.

5. Two-way binding (`v-model`)

If data and interface changes need to happen in both directions (for example, when typing text), v-model is used.

javascript

<template>
  <input v-model="message" placeholder="Enter text" />
  <p>You entered: {{ message }}</p>
</template>

<script setup>
import { ref } from 'vue'
const message = ref('')
</script>

When message changes -> the input updates. When text is typed into the input -> message updates.

6. What Vue does "under the hood"

Vue creates reactive references to data (ref, reactive).
The template compiles into a render function.
When data changes, Vue:
1. Marks the component as "dirty" (needs an update),
2. Recomputes the template via the Virtual DOM,
3. Finds the differences and surgically updates the real DOM.

Summary

In Vue.js, the template and the component's data are bound reactively:

through interpolations ({{ }}) for outputting values,

v-bind for dynamic attributes,

v-on for events,

v-model for two-way binding.

When the state changes, Vue automatically updates the interface, without manual DOM manipulation.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.