App.vue
main.js
<template>
<h1>v-on Example</h1>
<p>The '.self' modifier is set on the parent element. </p>
<p>Click on the child element and see how the event propagates past the parent element because the parent click event only reacts to click on the element itself.</p>
<div v-on:click="addMsg('grandParent')" id="grandParent">
Grandparent element
<div v-on:click.self="addMsg('parent')">
Parent element.
<div v-on:click="addMsg('child')">
Child element. CLICK HERE!
</div>
</div>
</div>
<p>The order of when and where the event is captured.</p>
<ol>
<li v-for="x in msg">{{ x }}</li>
</ol>
</template>
<script>
export default {
data() {
return {
msg: []
};
},
methods: {
addMsg(txt) {
this.msg.push(txt);
}
}
}
</script>
<style scoped>
div {
margin: 10px;
padding: 10px;
border: dashed black 1px;
cursor: pointer;
}
#grandParent {
width: 250px;
background-color: lightpink;
}
#grandParent > div {
background-color: lightgreen;
}
#grandParent > div > div {
background-color: lightskyblue;
}
</style>
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')