Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- en:modul:m291:learningunits:lu07:theorie:02 [2025/05/05 13:29] – angelegt vdemir
+++ en:modul:m291:learningunits:lu07:theorie:02 [2025/05/05 13:52] (aktuell) – vdemir
@@ Zeile 1: / Zeile 1: @@
-====== LU07b - Methods - with parameter ======
+====== LU07b - Methods with arguments ======
 ===== Learning ojectives =====
-  - Be able to call existing methods (subroutines) in Vue.
+  - Write own parameterised methods.
-  - Be able to programme your own methods in Vue.
+  - Make use of methods which expects parameters.
-  - Be be able to create and use methods using parameters.
+===== Source =====
-===== Introduction =====
+[[http://https://www.w3schools.com/vue/vue_methods.php|W3Schools | Methods - Chapter: Passing arguments]]
-Actions such as clicking a mouse button can trigger simple actions such as changing colour, but also complex operations, e.g. calculation the VAT(Value added tax). In the latter case, these complex operations are handled using subroutines such as methods.  Methods are sub-programmes that can perform tasks of all kinds. The use of subroutines makes the programme code ‘smaller’ and easier to maintain. It is therefore worth using methods.
 ===== Introduction to Vue Methods =====
-In Vue.js, methods are functions defined inside a component’s methods object. These functions can be used to handle user events, perform calculations, or manipulate component data. Unlike computed properties, methods are invoked when needed rather than being cached. This makes them suitable for actions that must be executed on demand, such as button clicks or form submissions. Vue methods are basically defined inside the methods section of a component.
+This lesson is about writing and using methods which can process parameters. These parameters are called **arguments of a method**. Parametrisided methods enable web-application to behave more dynamic and user-friendly.
-Vue methods are powerful tools for adding interactivity and logic to your components. By keeping behavior organized in the methods object, your code remains clean and maintainable.
-===== Example 1: Simple Counter =====
-This example shows how to use a Vue method to increment a counter when a button is clicked. The increment method is called when the button is clicked. It increases the count value by 1 using this.count++.
+===== Example 1: Method with one parameter =====
+The following example calls a method when pushing a button. This event passes a message to be displayed as an argument to the method.
   <template>
     <div>
-      <p>Counter: {{ count }}</p>
+      <button @click="sayHello('Alice')">Greet Alice</button>
-      <button @click="increment">Increment</button>
     </div>
   </template>
   <script>
-    export default {
+  export default {
-      data() {
+    methods: {
-        return {
+      sayHello(name) {
-          count: 0
+        alert(`Hello, ${name}!`);
-        };
-      },
-      methods: {
-        increment() {
-          this.count++;
-        }
       }
-    };
+    }
+  }
   </script>
-===== Example 2: Greeting a User =====
-This example uses a method to generate a greeting based on the user's name. The greet method creates a greeting using the current value of name and displays it with alert().
+===== Example 2: Multiple parameters =====
+This method-example has two arguments, and is supposed to calculate the sum of two numnbers. The result will be displayed in a alert-box.
   <template>
     <div>
-      <input v-model="name" placeholder="Enter your name" />
+      <button @click="addNumbers(5, 3)">Add 5 + 3</button>
-      <button @click="greet">Greet</button>
     </div>
   </template>
   <script>
     export default {
-      data() {
-        return {
-          name: ''
-        };
-      },
       methods: {
-        greet() {
+        addNumbers(a, b) {
-          alert(`Hello, ${this.name || 'stranger'}!`);
+          alert(`The sum is ${a + b}`);
         }
       }
-    };
+    }
   </script>
-===== Source =====
-[[https://www.w3schools.com/vue/vue_methods.php|W3School-Methods]]
 ===== Vocabulary =====
 ^ English ^ German ^
-| VAT | Mehrwertsteuer |
+| ... | ... |
-| to invoke | aufrufen |
+| ... | ... |
-| submission | Versendung, Einreichung |
+| ... | ... |
 ----
 [[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir