en:modul:m291:learningunits:lu05:aufgaben:15

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:lu05:aufgaben:15 [2025/03/21 15:16] – angelegt vdemiren:modul:m291:learningunits:lu05:aufgaben:15 [2025/03/28 11:38] (aktuell) – [Assignment 1] vdemir
Zeile 4: Zeile 4:
   * Work type: Individual   * Work type: Individual
   * Means of aid: only teaching materials, no websearch, no use of ai.   * Means of aid: only teaching materials, no websearch, no use of ai.
-  * Timeframe: 5 Minutes +  * Timeframe: 10 Minutes 
-  * Expected result: A Vue script that uses both directives, v-for+  * Expected result: A Vue script that uses the directives v-for with <ol> and <ul>
  
 ===== Learning objectives ===== ===== Learning objectives =====
   - Be able to explain the objective of v-for   - Be able to explain the objective of v-for
-  - Displying the ndex and corresponding array entry using v-for.+  - Displying the Index and corresponding array entry using v-for.
   - Dispalying array elements and the corresponding images with v-for.   - Dispalying array elements and the corresponding images with v-for.
  
 ===== Source ===== ===== Source =====
-  * [[https://www.w3schools.com/vue/tryit.php?filename=tryvue_v-for_foodText | v-for code-example]]+[[https://www.w3schools.com/vue/tryit.php?filename=tryvue_v-for_foodText | v-for code-example]]
  
-===== Assignment 1 ======+===== Assignment ======
 Data is often available as lists/arrays (concatenation of persons, for example). Previously, we prepared these lists in JavaScript using a loop and passed them to HTML for display. With v-for, we can now use the loop directly in JS, which makes things a lot easier. Data is often available as lists/arrays (concatenation of persons, for example). Previously, we prepared these lists in JavaScript using a loop and passed them to HTML for display. With v-for, we can now use the loop directly in JS, which makes things a lot easier.
  
-  - Go to the link to the task mentioned in the source and save it with the appropriate name in your W3School workspace. +  - Click on the provided link above and it with the appropriate name in your W3School workspace. 
-  - Let it run with **Run**. You will see that the array data in the script part is now displayed numbered in the browser.   +  - Execute it with **Run**. You will see that the array data in the script part is now displayed numbered in the browser.   
   - Add 3-4 more entries to your food list, at the beginning, the middle part, and the end.   - Add 3-4 more entries to your food list, at the beginning, the middle part, and the end.
-  - Record your observation in the source code as an code comments and save your work. +  - Change the <ol>-tag to  <ul>-tag. 
 +  - Note down your observation as code comments and save your work. 
  
  
Zeile 29: Zeile 30:
 ===== Solution ===== ===== Solution =====
 [[en:modul:m291:learningunits:lu05:loesungen:15|Lösung]] [[en:modul:m291:learningunits:lu05:loesungen:15|Lösung]]
 +
 +
  
  
Zeile 34: Zeile 37:
 ===== Vocabulary ===== ===== Vocabulary =====
 ^ English ^ German ^  ^ English ^ German ^ 
-| bulb | Glühbirne |+| ... | ... |
  
  
  • en/modul/m291/learningunits/lu05/aufgaben/15.1742566576.txt.gz
  • Zuletzt geändert: 2025/03/21 15:16
  • von vdemir