Vue.js Data Binding

What is data binding in Vue.js?

Data binding in Vue.js is the process of synchronizing the data between the Vue instance and the DOM. It allows developers to create dynamic and interactive user interfaces by automatically updating the view whenever the underlying data changes and vice versa.

What are the types of data binding in Vue.js?

There are two primary types of data binding in Vue.js:

• One-way data binding: Data flows in one direction, from the Vue instance to the DOM. This is commonly used for displaying values.
• Two-way data binding: Data can flow both ways, allowing for changes in the input fields to update the Vue instance and vice versa. This is achieved using the v-model directive.

How do you implement one-way data binding in Vue.js?

One-way data binding can be implemented using curly braces for interpolation, which binds data from the Vue instance to the DOM elements.

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  template: '<h1>{{ message }}</h1>' // One-way binding
});

What is v-model and how is it used for two-way data binding?

The v-model directive in Vue.js is used to create two-way data binding on form input elements. It automatically synchronizes the input value with the corresponding data property in the Vue instance.

const app = new Vue({
  el: '#app',
  data: {
    inputText: ''
  },
  template: `
    <div>
      <input v-model="inputText" placeholder="Type something...">
      <p>You typed: {{ inputText }}</p>
    </div>
  `
});

How does Vue.js handle changes in data with one-way binding?

In one-way binding, when the data in the Vue instance changes, the DOM is automatically updated to reflect those changes. Vue.js uses a reactivity system that detects changes to the data properties and re-renders the affected parts of the DOM.

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  mounted() {
    setTimeout(() => {
      this.message = 'Data updated!'; // Updating data
    }, 2000);
  },
  template: '<h1>{{ message }}</h1>'
});

What are computed properties and how do they relate to data binding?

Computed properties in Vue.js are properties that are derived from reactive data. They are recalculated automatically when their dependencies change, allowing for dynamic data binding without explicitly defining watchers. Computed properties are used for complex data transformations and calculations based on existing data.

const app = new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`; // Computed property
    }
  },
  template: '<p>Full Name: {{ fullName }}</p>'
});

What is the purpose of watchers in Vue.js?

Watchers in Vue.js are used to observe changes in reactive data properties and execute custom logic in response to those changes. They are particularly useful for performing asynchronous operations or complex data manipulations based on changes in data.

const app = new Vue({
  el: '#app',
  data: {
    count: 0
  },
  watch: {
    count(newValue) {
      console.log(`Count changed to: ${newValue}`); // Watcher function
    }
  },
  template: `
    <div>
      <button @click="count++">Increment</button>
      <p>Count: {{ count }}</p>
    </div>
  `
});

How can you bind classes and styles dynamically in Vue.js?

You can bind classes and styles dynamically using the v-bind directive. This allows you to apply classes or inline styles based on the component's data or computed properties.

const app = new Vue({
  el: '#app',
  data: {
    isActive: true,
    color: 'blue'
  },
  template: `
    <div>
      <p :class="{ active: isActive }">Dynamic class binding</p>
      <p :style="{ color: color }">Dynamic style binding</p>
    </div>
  `
});

What are slot bindings in Vue.js, and how do they work?

Slot bindings allow you to pass data from a parent component to a child component's slot. This enables flexible content distribution and dynamic rendering of content within components.

Vue.component('my-component', {
  template: `
    <div>
      <slot :message="greeting"></slot> 
    </div>
  `,
  data() {
    return {
      greeting: 'Hello from My Component!'
    };
  }
});

const app = new Vue({
  el: '#app',
  template: `
    <my-component v-slot:default="slotProps">
      {{ slotProps.message }}
    </my-component>
  `
});