Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- en:modul:m291:learningunits:lu04:theorie:02 [2025/01/22 12:01] – vdemir
+++ en: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://www.w3schools.com/vue/vue_intro.php|W3School VUE]]
-  *
 ===== 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.
@@ 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.
-==== 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 =====
 ^ English ^ German ^