LU05b - v-bind

1. Explaining what v-bind is
2. Naming what kind of object v-bind can include into the HTML-DOM
3. Using v-bind in a simple cases

• W3School - v-bind

v-bind is a Vue.js directive that allows you to dynamically bind attributes or properties to a value in your Vue instance's data. It is particularly useful for passing dynamic data to HTML elements or components. That means that v-bind simplifies the process of connecting your Vue instance's data to the DOM.

• Dynamic Attributes: Bind values to attributes like src, href, class, style, etc.
• Shorthand: The v-bind directive has a shorthand : (e.g., :class).
• Reactivity: Automatically updates the bound attribute when the data change

html

<img v-bind:src="imageSrc" alt="Dynamic Image">
<!-- Shorthand -->
<img :src="imageSrc" alt="Dynamic Image">

javascript

data() {
  return {
    imageSrc: "https://example.com/image.jpg",
  };
}

html

<div v-bind:class="{ active: isActive, 'text-bold': isBold }">Hello Vue</div>
<!-- Shorthand -->
<div :class="{ active: isActive, 'text-bold': isBold }">Hello Vue</div>

javascript

data() {
  return {
    isActive: true,
    isBold: false,
  }; 
}

html

<div v-bind:style="{ color: textColor, fontSize: fontSize + 'px' }">Styled Text</div>
<!-- Shorthand -->
<div :style="{ color: textColor, fontSize: fontSize + 'px' }">Styled Text</div>

javascript

data() {
  return {
    textColor: "blue",
    fontSize: 16,
  };
}

Volkan Demir