Part 1: Perform simple addition [Beginner Tutorial: Learn Vue, CSS Grid and Flexbox]

As of now, you should have a new ‘pen’ on Codepen with a title and you should have added Vue to your pen either via the ‘Quick add’ dropdown or by copy-paste from the intro of this tutorial

Step 1: Add an element to your page and set it as the root element of a new Vue instance

• In the HTML pane, add an empty div element that has an id of app
• In the JS pane, assign to the variable vm the initialization of a new Vue instance
• Pass a single argument to this new Vue instance a value of type object that has a single key: value pair: the key is el and the value is a string of the CSS selector to target an element with the id of app

What you should see after completing step 1

Step 2: Add data to your Vue instance and bind to it in your template

• Still in your JS pane, add another key: value pair to your object. Its key is data and its value is another object. This nested object value has a single key: value pair. Its key is first and its value is the number 1. Don’t forget to add the necessary comma , after the first key: value pair in your data object.
• Back in your HTML pane, inside the div, add an input element. It will have two key="value" attributes: the first is a native HTML attribute called type — assign it the value "number"; the second is a Vue directive. Generally speaking, all Vue directives are written as an all-lowercase word prefixed with v- . For this input element, you will use Vue’s model directive (so, write v-model). Much like the type attribute from a moment ago was assigned the value "number", you will assign this v-model directive the value "first".
• Since Codepen auto-refreshes your page after any paused period of typing, you should notice that your input field somehow has the value 1 in it. I encourage you to replace the 1 in your JS pane with a new number, like 3. You should now see a 3 in your input field. This is proof that you completed the last few steps successfully. Congrats! Before proceeding, change this back to 1.
• Before we move on, let’s add a modifier to the v-model directive that ensures we capture and display a value who’s type is a number and not a string. The syntax for adding a modifier to a Vue directive is as such: v-directive.modifier. In this case, we want to add the number modifier.

What you should see after completing step 2

Step 3: More of the same from step 2

• In your JS pane, add another key: value pair to your data object (which already has the pair of first: 1). This time, the key is second and the value is 1. Don’t forget the comma , after the first key: value, pair.
• In your HTML pane, add another input element that has identical attributes as the one already there.
• For the second of the two identical input elements, change the v-model directive’s value from first to second. You should now see two input fields on the page, each with a 1 as their value. Like earlier, try changing your JS so that second has the value 3. You should see the page instantly update and the second input field showing the value 3. Congrats again! Change second back to 1 before proceeding.
• Lastly, in the HTML and between both input elements, type a + character. That way, on the page you should see in a single line: 1 + 1.

What you should see after completing step 3

Step 4: Computing and displaying the answer

This instruction may seem long, but I encourage you to read it once completely, then try writing the code on a second read-through. If you get stuck, an image is below of the full code.

• In your JS, the object passed in to the new Vue instance currently has two key: value pairs: one whose key is el and another whose key is data. There should also be a comma , after el's value.
• You need to add a third key: value pair, after data. The key is computed and the value is itself another object.
• This object will have one key: value pair. The key is answer and the value is…well, a function. This function receives no parameters. In the body of the function, you will write a single line. The function should return the result of adding two values together: this.first and this.second.
• Double-check that you didn’t forget to put a comma , after the closing curly brace }, for the object that is the value to the data key.
• Back in your HTML pane, after the second input element, add a span element. Between the opening and closing tags, type: {{answer}}. If you typed it right, you should see the number 2 after the second input on the page. If you see answer with one or zero curly braces on either side, you didn’t type it correctly.
• Lastly, still your HTML pane, between the second input field and the new span element, type an = character. This way, the equation appears correctly as 1 + 1 = 2 in the browser.

To explain, in all three cases (the inputs and now this span), where you typed first second and answer, Vue is evaluating those as expressions and displaying the corresponding values for each similarly named key that you added in your JS pane. first and second come from the object assigned to data. answer comes from the function assigned to the computed object’s answer key.

In the first two cases, the value in your template is being displayed in the context of an HTML attribute. In Vue, the double curly brace syntax {{ }} is not allowed here. However, in the third case, answer is being displayed not as an attribute but as text content. This context requires the double curly brace syntax {{ }} in order to perform what’s called text interpolation. Whatever appears between the double curly braces must be a valid JavaScript expression, and will be evaluated. The result will display in-place.

What you should see after completing step 4

This marks the end of Part 1

In Part 2, we will expand the application’s capability to perform subtraction, multiplication and division.

Continue to Part 2: Choose from multiple operators