Get your own Vue server
  <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!
  <p>The order of when and where the event is captured.</p>
    <li v-for="x in msg">{{ x }}</li>

export default {
  data() {
    return {
      msg: []
  methods: {
    addMsg(txt) {

<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;
import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)