LU07.A01 - Events - Introductory example

• Work type: Individual
• Means of aid: only teaching materials, no websearch, no use of ai.
• Timeframe: 20 Minutes
• Expected result: A vue script with a methods, that can display a text on the screen.

1. Use of Vue Methods.
2. Writing own methods und make use of them.

• Code-example: Methods in VUE

• 1.1: Establish in your webstorm a new directory and name it 07_methods
• 1.2: Transfer the above provided script to this new directory.
• 1.3: Make sure that you have the title <h1> correctly named: lu07.s01.html
• 1.4: Execute the script. As a result, in the right window there will be a green rectangle. After clicking on that green area there should be a message-box with the content Hello World!

• 2.1: Add in a new variable cnt and initialize it with 0.
• 2.2: Add a method increment, that increments the cnt-variable with step-size 1
• 2.3: And finally create in the HTML-area a div, which increments the cnt-variable by making use of the increment-methods

• A3.1: Add another varible cnt2 for a second increment-method
• A3.2: Add another method increment2, which uses the step-size 2.
• A3.3: Define another div for making use of the method increment2

• A4.1: Define a final method alltogether, which uses both methods increment and increment2 to display the result.
• A4.2: The methods alltogether greets furthermore the Universe.
• A4.3: Be content and happy, as you finshed the complete assignment.

Lösung

Volkan Demir