en:modul:m291:learningunits:lu04:theorie:02

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
en:modul:m291:learningunits:lu04:theorie:02 [2025/01/22 12:11] – [Source] vdemiren:modul:m291:learningunits:lu04:theorie:02 [2025/01/22 12:14] (aktuell) – [Example of a SFC] vdemir
Zeile 32: Zeile 32:
   - <style>: Contains the CSS specific to the component, allowing you to style the component's elements. By default, these styles are global, but adding the scoped attribute makes them apply only to this component.   - <style>: Contains the CSS specific to the component, allowing you to style the component's elements. By default, these styles are global, but adding the scoped attribute makes them apply only to this component.
  
-==== Example of a SFC ==== +{{:en:modul:m291:learningunits:lu04:theorie:vue-component.png?600|Hello.vue mit SFC}}
-  <template> +
-    <div class="hello"> +
-      <h1>{{ title }}</h1> +
-      <p>Welcome to Vue Single File Components!</p> +
-      <button @click="changeTitle">Change Title</button> +
-    </div> +
-  </template> +
- +
-  <script> +
-    export default { +
-    name: 'HelloWorld', +
-    data() { +
-      return { +
-        title: 'Hello, Vue!' +
-      }; +
-    }, +
-    methods: { +
-      changeTitle() { +
-        this.title = 'Title Changed!'; +
-      } +
-    } +
-  }; +
-  </script> +
- +
-  <style scoped> +
-    .hello { +
-      text-align: center; +
-      margin: 20px; +
-    } +
-    button { +
-      background-color: #42b983; +
-      color: white; +
-      border: none; +
-      padding: 10px 15px; +
-      cursor: pointer;    +
-    } +
-    button:hover { +
-      background-color: #358a6c; +
-    } +
-  </style> +
- +
 ===== Vocabulary ===== ===== Vocabulary =====
 ^ English ^ German ^  ^ English ^ German ^ 
  • en/modul/m291/learningunits/lu04/theorie/02.1737544277.txt.gz
  • Zuletzt geändert: 2025/01/22 12:11
  • von vdemir