<template>
<!-- The main Vue component -->
<div id="app">
<!-- Displaying a message using data property -->
<p>{{ message }}</p>
<!-- Input field bound to the 'inputText' data property -->
<input v-model="inputText" placeholder="Type something..." />
<!-- Button triggering the 'updateMessage' method on click -->
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script>
export default {
data() {
// Data property to store the message and input text
return {
message: "Initial message",
inputText: "",
};
},
methods: {
// Method to update the 'message' with the current input text
updateMessage() {
this.message = this.inputText;
},
},
};
</script>
<style>
/ Optional styling for the component /
#app {
text-align: center;
margin-top: 50px;
}
input {
margin-right: 10px;
}
</style>