I am currently learning how to develop with Vue.js.
I have been trying to use the lifecycle callbacks in my code. In my App.vue file, I have implemented the onMounted callback. However, when I run the code, I do not see the message appearing in the console log.
Can someone please guide me on how to modify the code so that I can successfully receive the log message specified in the onMounted callback?
Note: I am working with the compositional API.
App.vue:
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import { createApp, onMounted } from 'vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
createApp({
data() {
return {
count: 0
}
}
}).mount('#app')
onMounted(()=>{
console.log("onMounted");
})
</script>
HelloWorld.vue:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
<div id="app">
<button @click="count++">
Count is: {{ count }}
</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>