LU05.A02 - VUE Directives warm up

1. Binding CSS-Style to the HTML by using v-bind directive

• Work type: Individual
• Means of aid: only teaching materials, no websearch, no use of ai.
• Timeframe: 10 Minutes
• Expected result: The background color im example code is adjusted as defined in the assignment.

• Code-example: v-bind Directive

1. box-colour change

1. Test the given script
2. Create a new CSS-Class blueBG in analogy to pinkBG). Make sure to belabour the DIVs within the script part as well.
3. Execute your script by having it run.
4. Toggle for testing purpose within your VUE-APP (in the script part) between the blue and pink.

2. extended CSS

1. create another css-class .extended
2. redifine the bgColor
3. add additional values for color, font-size, font-family, …
4. Bind this new css-class .extended into the HTML-Dom (script-part)
5. Execute your script by having it run.

3. Save the results

1. Comment your results as you find fit within the html-comment area
2. Save your solution within W3-Save-Area.
   • Therefore you might need a W3-School-Account.
   • Be advised to name you script accordingly, i.e. 20250203_vueDirectives_01. This will be helpful when preparing for the exams.

Lösung

Volkan Demir