en:modul:m291:learningunits:lu05:theorie:02

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Nächste Überarbeitung		 Vorhergehende Überarbeitung
en:modul:m291:learningunits:lu05:theorie:02 [2025/01/22 14:24] – angelegt vdemiren:modul:m291:learningunits:lu05:theorie:02 [2025/01/23 09:20] (aktuell) – vdemir
Zeile 1: Zeile 1:
-====== LU05a - v-bind ======+====== LU05b - v-bind ======
  
 ===== Learning ojectives ===== ===== Learning ojectives =====
Zeile 5: Zeile 5:
   - Naming what kind of object v-bind can include into the HTML-DOM   - Naming what kind of object v-bind can include into the HTML-DOM
   - Using v-bind in a simple cases   - Using v-bind in a simple cases
 +
 +===== Sources =====
 +  * [[https://www.w3schools.com/vue/vue_v-bind.php| W3School - v-bind]]
 +
  
 ===== What is v-bind? ===== ===== What is 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.+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.
  
 ===== Key Points ===== ===== Key Points =====
Zeile 14: Zeile 18:
   * **Reactivity:** Automatically updates the bound attribute when the data change   * **Reactivity:** Automatically updates the bound attribute when the data change
  
-===== Sources ===== 
-[[https://www.w3schools.com/vue/vue_v-bind.php| W3School - v-bind]] 
  
-===== Introduction ===== 
  
-https://www.w3schools.com/vue/vue_v-bind.php+ 
 + 
 +===== Examples ===== 
 + 
 +==== Binding an Image Source ==== 
 +**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", 
 +    }; 
 +  } 
 + 
 +==== Binding Classes Dynamically ===== 
 +**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, 
 +    };  
 +  } 
 + 
 + 
 +==== Bindung Styles ==== 
 +**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, 
 +    }; 
 +  } 
  
  
 ===== Vocabulary ===== ===== Vocabulary =====
 ^ English ^ German ^  ^ English ^ German ^ 
-| token| Merkmal, Eigenschaft| +| ...| ... |
-| to leverage | einsetzen, anwenden | +
  
 ---- ----
 [[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir [[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir
  
  • en/modul/m291/learningunits/lu05/theorie/02.1737552292.txt.gz
  • Zuletzt geändert: 2025/01/22 14:24
  • von vdemir