Vue 2: Real-time Input Reflection

Easy
5
11.5% Acceptance

Objective

In this lab, you will build a basic Vue.js application. The goal is to get familiar with Vue's fundamental concept: two-way data binding. By the end, you'll have an app where any text you type into an input field will be dynamically reflected in another element on the page.

Instructions

1. Setting Up Your Vue.js App

  • Start by initializing a new Vue.js application. For this exercise, bind your Vue instance to an element with the id of app.
<div id="app"></div>
new Vue({
  el: '#app',
  // ... other properties
});

2. Data Property Binding

  • Inside your Vue instance, declare a data property called message.
  • This message property will hold the value of the input field.
data: {
  message: ''
}
  • Next, bind this message property to an input field using the v-model directive. This creates a two-way data binding on the input element.
<input v-model="message">

3. Dynamically Display Data

  • Now, to display the value from the input field in real-time, use the mustache syntax to bind the message property to another element, such as a <p> tag.
<p>{{ message }}</p>

Expected Outcome

When you type something into the input field, the text should immediately be displayed in the <p> tag (or whichever element you choose). This demonstrates Vue's two-way data binding in action.

Challenges

Challenge 1: Setting up the Input Field

Objective:
For effective two-way data binding testing, first, create an identifiable input field.

Task:
Create an input field. Make sure to give it an id attribute with a value of input.

Ensure other attributes, such as v-model, are correctly set to achieve the desired two-way data binding.

Challenge 2: Setting up the Output Display

Objective:
For real-time reflection of the input, an output display is necessary.

Task:
Craft a p tag for displaying the input's content in real-time. Assign it an id attribute with a value of output. Remember to dynamically bind the data to display the input.

Challenge 3: Two-Way Data Binding

Objective:
Implement two-way data binding using Vue.js to create a real-time reflection of input data.

Task:
Ensure whatever text is entered into the input field with the id input gets reflected immediately in the p tag with the id output. Achieve this by utilizing Vue's v-model directive to bind the input to the relevant data property.