Introduction

In this tutorial, we'll explore a simple yet powerful Vue.js application that demonstrates core concepts like two-way data binding, template syntax, and lifecycle hooks. We'll break down each part of the code and understand how it works.

What This Application Does

1. Initial Load:
   • Displays "Hello Vue 3!" in both the input field and as text
   • Shows the number 11 (the length of "Hello Vue 3!")
2. After 3 Seconds:
   • Automatically changes the message to "the message has been changed"
   • Updates both the input field and displayed text
   • Shows the new length (25)
3. User Interaction:
   • Users can type in the input field
   • The displayed text and length update in real-time
   • Demonstrates Vue's reactive two-way data binding

Key Concepts Demonstrated

1. Reactivity:
   • Vue's reactive data system automatically updates the UI when data changes
   • Changes can come from both code (setTimeout) or user input
2. Two-way Data Binding:
   • The v-model directive creates a two-way connection between the input and data
   • Changes in either the input or data are reflected in both places
3. Template Syntax:
   • Double curly braces {{}} for text interpolation
   • Vue directives (v-model) for DOM manipulation
   • JavaScript expressions in templates (message.length)
4. Lifecycle Hooks:
   • Using mounted() to execute code after the component is ready
   • Understanding when and why to use lifecycle hooks

The Complete Code

First, let's look at the complete code we'll be discussing:

 
 
const { createApp } = Vue;
 
const apps = createApp({
  data() {
    return {
      message: "Hello Vue 3!",
    };
  },
 
  mounted() {
    setTimeout(() => {
      this.message = "the message has been changed";
    }, 3000);
  },
});
 
apps.mount("#app");
//html 
<div id="app">
  <input type="text" v-model="message"/>
  {{message}} {{message.length}}
</div>
 
 

Breaking It Down

1. Creating the Vue Application

1. We start by destructuring the createApp function from the Vue object
2. This is the starting point of any Vue 3 application
3. createApp creates a new Vue application instance

 
 
const { createApp } = Vue;
const apps = createApp({...});
 
 
 

2. Setting Up the Data

1. The data() function returns an object containing our application's reactive data
2. We define a single property message with an initial value of "Hello Vue 3!"
3. This data property will be reactive, meaning Vue will track changes to it

 
 
data() {
  return {
    message: "Hello Vue 3!",
  };
}
 
 
 

3. Using the Mounted Lifecycle Hook

1. mounted() is a lifecycle hook that runs after the component is mounted to the DOM
2. We use setTimeout to change the message after 3 seconds
3. This demonstrates how reactive data updates automatically reflect in the UI

 
mounted() {
  setTimeout(() => {
    this.message = "the message has been changed";
  }, 3000);
}
 

4. The Template

1. The id="app" identifies where our Vue application will be mounted
2. v-model="message" creates two-way data binding with our input field
3. {{message}} displays the current value of the message
4. {{message.length}} shows the length of the message string

5. Mounting the Application

This line connects our Vue application to the DOM element with id="app"

The application won't work until this step is performed

 
 
<div id="app">
  <input type="text" v-model="message"/>
  {{message}} {{message.length}}
</div>
apps.mount("#app");