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 clicking the run-Button.
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