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
Nächste Überarbeitung		 Vorhergehende Überarbeitung
en:modul:m291:learningunits:lu04:theorie:02 [2025/01/22 11:56] – angelegt vdemiren:modul:m291:learningunits:lu04:theorie:02 [2025/01/22 12:14] (aktuell) – [Example of a SFC] vdemir
Zeile 9: Zeile 9:
   * [[https://vuejs.org/|Original VUE.JS ]]   * [[https://vuejs.org/|Original VUE.JS ]]
   * [[https://www.w3schools.com/vue/vue_intro.php|W3School VUE]]   * [[https://www.w3schools.com/vue/vue_intro.php|W3School VUE]]
-  * +
 ===== What is Vue.js? ==== ===== What is Vue.js? ====
 Vue.js is a progressive JavaScript framework used for building user interfaces and single-page applications (SPAs). **It focuses on the view layer**, making it simple to integrate with other projects or libraries, while also providing powerful features for modern application development. Vue.js is known for its reactive data binding, component-based architecture, and ease of use, making it a popular choice for developers. Vue.js is a progressive JavaScript framework used for building user interfaces and single-page applications (SPAs). **It focuses on the view layer**, making it simple to integrate with other projects or libraries, while also providing powerful features for modern application development. Vue.js is known for its reactive data binding, component-based architecture, and ease of use, making it a popular choice for developers.
Zeile 22: Zeile 22:
   * Vue CLI: A powerful tool to scaffold and manage Vue applications efficiently.   * Vue CLI: A powerful tool to scaffold and manage Vue applications efficiently.
  
 +===== Single file Components (SFC) in Vue.js ===
 +In Vue.js, Single File Components (SFCs) are a core feature that enables developers to encapsulate the structure, style, and logic of a component **within a single .vue file**. This approach improves maintainability, readability, and scalability in modern web development by organizing all the component-related code in one place.
 +
 +==== Structure of a Single File Component ====
 +A typical Vue SFC consists of three sections:
 +
 +  - <template>: Contains the HTML structure for the component. This section defines how the component is displayed in the DOM.
 +  - <script>: Contains the JavaScript logic for the component, including the component's data, methods, computed properties, and lifecycle hooks.
 +  - <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.
 +
 +{{:en:modul:m291:learningunits:lu04:theorie:vue-component.png?600|Hello.vue mit SFC}}
 ===== Vocabulary ===== ===== Vocabulary =====
 ^ English ^ German ^  ^ English ^ German ^ 
  • en/modul/m291/learningunits/lu04/theorie/02.1737543415.txt.gz
  • Zuletzt geändert: 2025/01/22 11:56
  • von vdemir