LU07.A01 - Methods simple - 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 a method resetText, that sets the content of the variable text to '' (empties the content)
• 2.2: Use this new method resetText within a separate div
• 2.3: The text Hello world appears, when clicking the first area, and disapears when pushing the second area.

• 3.1: Add a new variable cnt1 and initialize it with 0.
• 3.2: Add a method increment1, that increments the cnt1-variable with step-size 1
• 3.3: Create in the HTML-area a div, which increments the cnt1-variable by making use of the increment1-method

• 4.1: Add a new variable cnt2 and initialize it with 0.
• 4.2: Add a method increment2, that increments the cnt2-variable with step-size 2
• 4.3: Create in the HTML-area a div, which increments the cnt2-variable by making use of the increment2-method

• A5.1: Create a new method alltogether which, in turn, uses the methods setText, increment1, increment2
• A5.2: Add a variable text2 to store the combined content of the variables text, cnt1 and cnt2
• A5.3: Create in the HTML-area a div, in which the content of the variable text2 is displayed

• A6.1: Define a final method resetAll which resets the content off all variables (text1, cnt1, cnt2, text2)
• A6.2: Create in the HTML-area a div, that resets all variables when clicked.

Lösung

Volkan Demir