Vue 2: Two-Way Data Binding Lab

Objective

In this lab, you will build a simple Vue 2 app that demonstrates real-time data binding. You'll create an input field and a display area where whatever you type into the input field gets reflected immediately.

Challenges Information

Challenge 1: Create an Input Field

Create an input field and set its id attribute to 'input'. Make sure the type attribute is set to text.

Challenge 2: Create a Paragraph Tag

Create a paragraph (p) element. Assign an id attribute to it with the value 'output'. Make sure it is empty to start with.

Challenge 3: Reflect Input to Output

Whatever text is entered into the input field (with id='input') should be reflected in real-time into the paragraph (with id='output').

Note: Reflecting in real-time means as you type in the input, the text should appear in the paragraph.