Example of a Vue.js Application

To illustrate how Vue.js can be used, let's take an example of a To-Do List Application:

<template>
                          <div>
                            <h2>Vue.js To-Do List</h2>
                            <input v-model="newTask" @keyup.enter="addTask" placeholder="Add a task" />
                            <ul>
                              <li v-for="(task, index) in tasks" :key="index">
                                {{ task }} <button @click="removeTask(index)">Remove</button>
                              </li>
                            </ul>
                          </div>
                        </template>

                        <script>
                        export default {
                          data() {
                            return {
                              newTask: '',
                              tasks: []
                            };
                          },
                          methods: {
                            addTask() {
                              if (this.newTask.trim()) {
                                this.tasks.push(this.newTask);
                                this.newTask = '';
                              }
                            },
                            removeTask(index) {
                              this.tasks.splice(index, 1);
                            }
                          }
                        };
                        </script>
                        

This simple Vue.js To-Do List App demonstrates the core concepts of Vue.js such as data binding, event handling, and list rendering.