App.vue
main.js
<template>
<div ref="rootDiv">
<h2>Example $el Object</h2>
<p>It is recommended, and more consistent, to use the ref attribute instead of the $el object to change the background color root DIV tag.</p>
<button v-on:click="changeColor">Click here</button>
</div>
</template>
<script>
export default {
methods: {
changeColor() {
this.$refs.rootDiv.style.backgroundColor = 'lightgreen';
}
}
}
</script>
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')